小程序中scroll-view的下拉刷新和小程序页面的下拉刷新开启方法_scroll-view 下拉刷新

scroll-view的下拉刷新

video.wxml中

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

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)
  },
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

页面的下拉刷新

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

"enablePullDownRefresh":true
1