小程序API —— 57 拓展 - 增强 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-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 方法，用于下拉刷新：

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

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

  

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