小程序中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)
  },

页面的下拉刷新

video.json中添加enablePullDownRefresh为true就可以开启

"enablePullDownRefresh":true
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值