【小程序】案例 - 本地生活（列表页面）

男娘i 2024-03-30 11:54 52阅读 0赞

## 1. 演示页面效果以及主要功能 ##

![6033d5b5fe7e4b948bf1be1fccc0ccda.png][]

页面导航并传参

上拉触底时加载下一页数据

下拉刷新列表数据

## 2. 列表页面的 API 接口 ##

以分页的形式，加载指定分类下商铺列表的数据：

接口地址

https://www.escook.cn/categories/:cate\_id/shops

URL 地址中的 :cate\_id 是动态参数，表示分类的 Id

请求方式

GET 请求

请求参数

\_page 表示请求第几页的数据

\_limit 表示每页请求几条数据

## 3. 判断是否还有下一页数据 ##

如果下面的公式成立，则证明没有下一页数据了：

页码值 \* 每页显示多少条数据 >= 总数据条数

page \* pageSize >= total

案例1：总共有 77 条数据，如果每页显示 10 条数据，则总共分为 8 页，其中第 8 页只有 7 条数

据

page（7）\* pageSize（10） >= total（77）

page（8）\* pageSize（10） >= total（77）

案例2：总共有 80 条数据，如果每页显示 10 条数据，则总共分为 8 页，其中第 8 页面有 10 条数

据

page（7）\* pageSize（10） >= total（80）

page（8）\* pageSize（10） >= total（80）

## 总结 ##

能够知道如何实现页面之间的导航跳转

声明式导航、编程式导航

能够知道如何实现下拉刷新效果

enablePullDownRefresh、onPullDownRefresh

能够知道如何实现上拉加载更多效果 onReachBottomDistance、onReachBottom

能够知道小程序中常用的生命周期函数 应用生命周期函数：

onLaunch, onShow, onHide

页面生命周期函数：

onLoad, onShow, onReady, onHide, onUnload

[6033d5b5fe7e4b948bf1be1fccc0ccda.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/37eadc123d9c4c908c3fe68c702cadad.png

发表评论取消回复

表情：

评论列表（有 0 条评论，52人围观）

还没有评论，来说两句吧...

相关阅读

相关【小程序】案例 - 本地生活（列表页面）

1. 演示页面效果以及主要功能 ![6033d5b5fe7e4b948bf1be1fccc0ccda.png][] 页面导航并传参上拉触底时加载下一页数据下拉刷

男娘i/ 2024年03月30日 11:54/ 0 赞/ 53 阅读

相关【小程序】页面事件

目录下拉刷新事件 1. 什么是下拉刷新 2. 启用下拉刷新 3. 配置下拉刷新窗口的样式 4. 监听页面的下拉刷新事件 5. 停止下拉刷新的效果上拉触底事件

深碍√TFBOYSˉ_/ 2024年03月30日 11:46/ 0 赞/ 60 阅读

相关【小程序】案例 - 本地生活（首页）

1. 首页效果以及实现步骤 ![d11b73659343408c8217420392e2a50b.png][] 新建项目并梳理项目结构配置导航栏效果配置 tab

秒速五厘米/ 2024年03月30日 11:42/ 0 赞/ 55 阅读

相关【微信小程序】案例 - 本地生活

效果： ![b731b1758e654bf79d950c0b35ef28e8.gif][] 目录首页效果以及实现步骤 ① 新建项目并梳理项目结构 ② 配置导航栏效

╰+哭是因爲堅強的太久メ/ 2023年10月01日 22:51/ 0 赞/ 20 阅读

相关小程序开发（3）-列表页面开发

选用组件 vant-weapp：https://youzan.github.io/vant-weapp 可以在官网看一下各个样式的效果，从而判断我们需要什么样的组件。

矫情吗；*/ 2023年07月18日 02:33/ 0 赞/ 27 阅读

相关微信小程序学习笔记(6) -- 本地生活项目

文章目录本地生活项目项目效果图外观和标签栏的配置 window tabBar

短命女/ 2023年02月20日 14:00/ 0 赞/ 10 阅读

相关小程序小程序列表模板

小程序列表模板今天做小程序列表页面百度搜了一圈也没有一个模板今天花了两个小时自己做了一个放图！中间的隔离线在手机显示的时候颜色比较浅截图上面显示的比较深

女爷i/ 2022年12月15日 02:19/ 0 赞/ 230 阅读

相关小程序页面设计

写一个我自己的小程序简单的设计思路。我自己喜欢在开始写小程序的时候在外部包裹两个view .body{ width: 100%; min-

朱雀/ 2022年04月18日 04:04/ 0 赞/ 208 阅读

相关微信小程序的一个典型列表页面

wxml <import src="../templete/templete" /> <view class="content"> <view c

素颜马尾好姑娘i/ 2021年11月11日 03:48/ 0 赞/ 367 阅读

相关 wx小程序—— bgm页面联调获取背景音乐列表

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ub

我不是女神ヾ/ 2021年07月25日 17:15/ 0 赞/ 459 阅读