用户登录

自由学三年,把想法变成现实。33 折优惠(最后 7 天), 现在订阅 →

在这个产品列表页面上可以添加一个下拉刷新功能 .. 回到编辑器 .. 打开 pages .. shop 下面的 index 页面 ..

在页面上启用下拉刷新 .. 可以在 config 里面 .. 把 enablePullDownRefresh 的值设置成 true .. 下面再设置一下 backgroundTextStyle 的值 .. 它可以是 light .. 也可以是 dark .. 我的背景颜色是白色,所以要把文本的颜色设置成 dark ..

然后在页面上添加一个下拉刷新事件处理 .. 添加一个 onPullDownRefresh ..

在这个方法里面 .. 用一下 this.setState .. 设置一下页面的状态 .. 把 serviceError 设置成 false .. 然后把 current 的值设置成 1 ,就是每次下拉刷新都会显示第一页的内容 ..

给这个 setState 添加一个回调 .. 里面可以执行一下 fetchData 去拉取页面需要的数据 ..

复制一下 search 方法里用的这个 fetchData .. 粘贴到这个回调里面 .. 这个 search 属性的值,可以是 this.state.search ..

请求结束以后可以立即停止下拉刷新 .. 找到页面上定义的 fetchDataComplete ,请求结束会执行这个方法 ..

里面用一下 Taro.stopPullDownRefresh ..

下面再到模拟器上试一下 ..

可以先停止服务 .. 回到模拟器 .. 下拉页面 .. 会执行下拉刷新 .. 提示服务出现问题 .. 重新再去运行一下服务 .. 回到模拟器,再执行一下下拉刷新 ... 又会重新显示页面内容 ..

翻到第二页 .. 然后再执行一下,下拉刷新 .. 成功以后会回到第一页内容 ..

下面再试一下搜索 .. 搜索 咖啡 .. 然后翻到搜索结果的第二页 .. 执行下拉刷新 .. 会重新搜索 咖啡这个关键词 ..

下拉刷新(PullDownRefersh)《 电商小程序案例:产品内容 》

统计

10670
分钟
0
你学会了
0%
完成

社会化网络

关于

微信订阅号

扫描微信二维码关注宁皓网,每天进步一点