微信小程式頁面無限滾動流

場景

目前的小程式非常火，開發起來也很快，架構很多，今天講下mpvue這個架構實作頁面無限滾動流，滾動到底加載新資料。

問題

微信小程式不支援Dom, 那麼要實作一個無限的滾動效果那不是蛋疼？

mpvue+scroll-view實作

mpvue這個是美團開源的一個架構， 文法是和vue99%相似，但是坑很多，如果你遇到可以看下我的mpvue的其他文章，裡面詳細的講了哪些坑以及解決辦法。

scroll-view标簽是微信原生提供的标簽元件， 全局可用。看代碼， 先在templates中把結構寫好， 注意mpvue可以使用微信原生的标簽！

<template>
<div id="test">
	 <scroll-view  @scrolltolower="lower" lower-threshold="20rpx" scroll-y="true">
	      <div v-for="(v,i) in content" :key="i">
	        <p class="text" v-for="(val, n) in v" :key="n" v-text="val"></p>
	      </div>
    </scroll-view>
</div>
</template>
           

• @scrolltolower=“lower” 綁定一個回調函數，就是說條件滿足，觸發此函數
• lower-threshold=“20rpx” 到距離底部還有20rpx在觸發上面的@scrolltolower="lower"事件
• 你可以按照自己的需求修改這個值，這個是按照自己的業務場景而定

• scroll-y=“true”，允許縱向y軸滾動

  注意： id="test"這個盒子一定要有高度，要不然滾不動！如果你出現了此問題請看我mpvue其他文章裡面有解決辦法！

重點核心

在methods中定義一個上面綁定的方法，lower。

lower(){
          if(this.addStatus){
            this.addStatus = !this.addStatus;
            // 這裡寫你想要的邏輯
           let that = this;
            wx.request({
                  url: that.URL",
                  method: 'POST', // OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECT
                  data: that.info,
                  success: function (res) {
                    // success
                  },
                  fail: function () {
                    // fail
                    console.log("失敗");
                  },
                });
            // 這個異步的邏輯是核心 不能少
            new Promise((resolve, reject) => {
              let that = this;
              setTimeout(function(){
                that.addStatus = !that.addStatus;
              }, 3000);
            });
          }
        },
           

• 在data中定義一個狀态addStatus，用于控制滑動請求次數，因為我們定義的是距離底部20rpx，是以可能會觸發多次lower函數
• 是以我們定義一個狀态保證一次隻有一個請求
• 當進入 if(this.addStatus)後立馬把 this.addStatus狀态改為false,保證不會再進來了
• 開始請求資料，或其他邏輯
• 最後Promise異步重置這個狀态that.addStatus，保證下次可以繼續進來，并且這不會阻礙程式繼續加載
• 我這邊按照我的需求是三秒鐘， 可以按照自己的業務來定

結束

scroll-view滾不動！如果你出現了此問題請看我mpvue其他文章裡面有解決辦法！最後友情連結有我的部落格和github位址，歡迎互相溝通學習！

想一起讨論/學習微信小遊戲開發的，GO語言開發的，請微信搜尋下方小程式加部落客微信群