小程序中scroll-view的下拉刷新和小程序页面的下拉刷新开启方法-Toy模板网

这篇具有很好参考价值的文章主要介绍了小程序中scroll-view的下拉刷新和小程序页面的下拉刷新开启方法。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

scroll-view的下拉刷新

video.wxml中

<scroll-view 
    class="videoScroll" 
    scroll-y="true"
    refresher-enabled="true" 
    bindrefresherrefresh="handleRefresher"
    refresher-triggered="{{isTriggered}}">
    //如果只开启refresher-enabled="true" 页面只会下拉刷新，但是不会回去，下拉刷新的图标一直存在，所以需要设置一个自定义下拉刷新被触发

video.js中

  data: {
    videoGroupList:[], //导航标签数据
    navId:'', //导航标签的id标识
    videoList:[], //视频列表数据
    videoId:'', //video标识
    videoUpdateTime:[], //记录实时播放的时长
    isTriggered:false, //定义一个用来表示下拉刷新是否被触发，当更新完数据需要重新定义为false
  },
  
  // 获取视频列表数据的功能函数
  async getVideoList(navId){
    let videoListData=await request('/video/group',{id:navId})
    let index=0
    if (videoListData.datas) {
      let videoList=videoListData.datas.map(item=>{
        item.id=index++
        return item
      })
      // 关闭消息提示框
      wx.hideLoading()
      this.setData({
        videoList,
        isTriggered:false //加载更新完数据重新变为false，这时下拉刷新的图标也会消失
      })
    }
  },
  
  // 下拉刷新回调
  handleRefresher(event){
    // 发送请求获取最新的视频数据
    this.getVideoList(this.data.navId)
  },