抖音實戰~首頁視訊~下拉重新整理

文章目錄

• ​​1. 配置下拉重新整理​​
• ​​2. 下拉重新整理監聽​​
• ​​3. tab監聽索引​​
• ​​4. 控制台監控​​
• ​​5. 父子元件調用​​
• ​​6. 效果圖​​

1. 配置下拉重新整理

在​

​pages.json​

​配置檔案中添加如下配置：

"enablePullDownRefresh":true  //開啟下拉重新整理      

2. 下拉重新整理監聽

// 目前頁下拉重新整理
    onPullDownRefresh() {
      var me = this;
      // 監聽tab
      console.log("me.curIndex",me.curIndex)
      
      // 下拉重新整理判斷，如果是不同tab，那麼元件中重新整理的請求也不同
      if (me.curIndex == 0) {
        // 虛位以待
      } else if (me.curIndex == 1) {
        // 調用公共視訊元件查詢首頁短視訊清單
        this.$refs.videoFollowComp.displayVideoPaging(1, true);
      } else if (me.curIndex == 2) {
        // 調用公共視訊元件查詢首頁短視訊清單
        this.$refs.videoComp.displayVideoPaging(1, true);
      }
      
    }      

3. tab監聽索引

tab頁面	監聽目前索引方法	擷取監聽api	索引
附近	onPullDownRefresh	me.curInde
關注	onPullDownRefresh	me.curInde	1
推薦	onPullDownRefresh	me.curInde	2

4. 控制台監控

5. 父子元件調用

• 父頁面index.nvue

this.$refs.videoFollowComp.displayVideoPaging(1, true);      

• 子元件videoComp.vue

(page, needClearList) {

        // 查詢首頁短視訊清單
        var me = this;
        var myUserInfo = getApp().getUserInfoSession();
        // console.log("首頁",myUserInfo)
        var userId = "";
        if (myUserInfo != null) {
          userId = myUserInfo.id;
        }
        var serverUrl = app.globalData.serverUrl;
        uni.request({
          method: "GET",
          header: {
            headerUserId: userId,
            headerUserToken: app.getUserSessionToken()
          },
          url: serverUrl + "/vlog/indexList?userId=" + userId + "&page=" + page + "&pageSize=10",
          success(result) {

            if (result.data.status == 200) {
              var vlogList = result.data.data.rows;
              var totalPage = result.data.data.total;
              // me.playerList = vlogList;
              if (needClearList) {
                me.playerList = [];
              }
              me.playerList = me.playerList.concat(vlogList);
              me.page = page;
              me.totalPage = totalPage;

              if (needClearList) {
                me.setThisVlogInfo();
                me.freshCommentCounts();
              }
            } else {
              uni.showToast({
                title: result.data.msg,
                icon: "none",
                duration: 3000
              });
            }

          },
          complete() {
            uni.stopPullDownRefresh();
          }
        });
      }      

6. 效果圖