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

1. 配置基本信息

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

html 复制代码

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

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

css 复制代码

.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 中添加页面使用的数据：
javascript 复制代码
```
Page({
  data: {
    numList: [1, 2, 3]
  }
})
```
基本页面如下所示：

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

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

html 复制代码

<scroll-view
  scroll-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 方法，用于下拉刷新：

javascript 复制代码

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 中配置下拉刷新功能：

html 复制代码

<scroll-view
  scroll-y 
  class="scroll-y"
  lower-threshold="100"
  bindscrolltolower="getMore"
  enable-back-to-top

  refresher-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 中配置下拉刷新方法：

javascript 复制代码

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 个厨师数据，如下：

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

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

目录

1. 配置基本信息

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

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

4. 实现下拉刷新功能