小程序API —— 57 拓展 - 增强 scroll-view

scroll-view 组件功能非常强大，这里使用 scroll-view 实现上拉加载和下拉刷新功能；

下面使用微信开发者工具来演示一下具体用法：

1. 配置基本信息

• 在 pages/cate/cae.wxml 中添加页面框架：

  <scroll-view scroll-y class="scroll-y"><view wx:for="{{ numList }}" wx:key="*this">{{ item }}</view>
  </scroll-view>
  

• 在 pages/cate/cate.scss 中添加页面样式：

  .scroll-y {height: 100vh;background-color: #efefef;
  }view {height: 400rpx;display: flex;align-items: center;justify-content: center;
  }view:nth-child(odd){background-color: skyblue;
  }view:nth-child(even){background-color: lightsalmon;
  }
  

• 在 pages/cate/cate.js 中添加页面使用的数据：

  Page({data: {numList: [1, 2, 3]}
  })
  

• 基本页面如下所示：

  

2. 实现上拉加载更多功能

• 修改 pages/cate/cate.wxml 文件，在 scroll-view 中添加新的参数：

  <scroll-viewscroll-y class="scroll-y"lower-threshold="100"bindscrolltolower="getMore"
  ><view wx:for="{{ numList }}" wx:key="*this">{{ item }}</view>
  </scroll-view>
  

• 修改 pages/cate/cate.js 文件，添加 getMore 方法，用于下拉刷新：

  Page({data: {numList: [1, 2, 3]},// scroll-view 上拉加载更多事件的事件处理函数getMore(){wx.showLoading({title: '数据加载中...',})setTimeout(()=>{// 获取数组的最后一项const lastNum = this.data.numList[this.data.numList.length - 1]// 定义需要追加的元素const newArr = [lastNum + 1, lastNum + 2, lastNum + 3]this.setData({numList:[...this.data.numList, ...newArr]})wx.hideLoading()}, 1500)}
  })
  

• 点击编译，可以看到使用 scroll-view 实现了下拉功能：

  

3. 实现快速回到顶部功能

如果我们下拉访问的数据比较多，如果想返回第一条数据，需要一直向上滑动，比较麻烦；在微信中有一个功能，如果是IOS可以点击顶部状态栏，如果是安卓可以点击标题栏，这两种方式可以使滚动条返回顶部，下面我们演示这个属性：

• 在 pages/cate/cate.wxml 中的 scroll-view 中添加 enable-back-to-top 属性：

  

• 点击顶部的编译，用手机微信扫描，在手机端下拉刷新，然后双击顶部的状态栏或者标题栏，就可以返回第一条数据位置：

  

4. 实现下拉刷新功能

• 在 pages/cate/cate.wxml 中配置下拉刷新功能：

  <scroll-viewscroll-y class="scroll-y"lower-threshold="100"bindscrolltolower="getMore"enable-back-to-toprefresher-enabled refresher-default-style="black"refresher-background="f7f7f8"bindrefresherrefresh="refreshHandler"refresher-triggered="{{isTriggered}}"
  ><view wx:for="{{ numList }}" wx:key="*this">{{ item }}</view>
  </scroll-view>
  

• 在 pages/cate/cate.js 中配置下拉刷新方法：

  Page({data: {numList: [1, 2, 3],isTriggered: false  // 用于下拉刷新 loading 页面收回},refreshHandler () {wx.showToast({title: '下拉刷新...',})// 当用户上拉加载更多以后，如果用户进行了下拉刷新，需要将数据进行重置this.setData({numList: [1, 2, 3],isTriggered: false})},// scroll-view 上拉加载更多事件的事件处理函数getMore(){wx.showLoading({title: '数据加载中...',})setTimeout(()=>{// 获取数组的最后一项const lastNum = this.data.numList[this.data.numList.length - 1]// 定义需要追加的元素const newArr = [lastNum + 1, lastNum + 2, lastNum + 3]this.setData({numList:[...this.data.numList, ...newArr]})wx.hideLoading()}, 1500)}
  })
  

• 点击编译，下拉刷新之后，可以看到，数据恢复到 3 个厨师数据，如下：

  

参考视频：尚硅谷微信小程序开发教程