微信小程序怎么實現(xiàn)滾動加載更多功能

這篇文章主要為大家展示了微信小程序怎么實現(xiàn)滾動加載更多功能，內(nèi)容簡而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶大家一起來研究并學(xué)習(xí)一下“微信小程序怎么實現(xiàn)滾動加載更多功能”這篇文章吧。

1.需要用到的組件和api

scroll-view（可滾動視圖區(qū)域）

wx.showToast(OBJECT)顯示消息提示窗----顯示loading小菊花用的

2.需要用到的屬性

3.scrol-view需要指定一個高度，這個高度可以按自己的需求計算，我使用的是屏幕可用高度并且默認(rèn)一頁顯示6個

4.滾動到底部綁定需要觸發(fā)的事件

<scroll-view scroll-y='true' style="height:{{height}}px" bindscrolltolower='lower'>

5.操作事件函數(shù)，主要是將請求下來的數(shù)據(jù)用concat方法進(jìn)行合并，然后賦值，我是用的for循環(huán)假裝添加的數(shù)據(jù)，實際項目中可以換成自己的ajax，并且為了模擬加載我添加了一個1.5秒的定時器，先調(diào)用提示框api成功之后關(guān)閉

  lower() {

    var result = this.data.res;

    var resArr = [];

　　//這里可以使用自己的ajax

    for (let i = 0; i < 10; i++) {

      resArr.push(i);

    };

    var cont = result.concat(resArr);//合并請求的數(shù)據(jù)

    console.log(resArr.length);

    if (cont.length >= 100) {

      wx.showToast({ //期間為了顯示效果可以添加一個過度的彈出框提示“加載中”  

        title: '我也是有底線的',

        icon: 'success',

        duration: 300

      });

      return false;

    } else {

      wx.showLoading({ //期間為了顯示效果可以添加一個過度的彈出框提示“加載中”  

        title: '加載中',

        icon: 'loading',

      });

      setTimeout(() => {

        this.setData({

          res: cont

        });

        wx.hideLoading();

      }, 1500)

    }

  }

6.成功，放完整代碼可以直接復(fù)制運(yùn)行

wxml代碼

class='box'>

<scroll-view scroll-y='true' style="height:{{height}}px" bindscrolltolower='lower'>

  <view wx:for="{{res}}" data-id="{{index}}" wx:key="{{index}}" style="height:{{(height/6)-1}}px;width:100%;text-align:center;line-height:{{(height/6)-1}}px; border-bottom:1px solid #ccc">{{item}}view>

scroll-view>

view>

js代碼

Page({

  /**

   * 頁面的初始數(shù)據(jù)

   */

  data: {

    height: '',

    res: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]

  },

  lower() {

    var result = this.data.res;

    var resArr = [];

    for (let i = 0; i < 10; i++) {

      resArr.push(i);

    };

    var cont = result.concat(resArr);

    console.log(resArr.length);

    if (cont.length >= 100) {

      wx.showToast({ //如果全部加載完成了也彈一個框

        title: '我也是有底線的',

        icon: 'success',

        duration: 300

      });

      return false;

    } else {

      wx.showLoading({ //期間為了顯示效果可以添加一個過度的彈出框提示“加載中”  

        title: '加載中',

        icon: 'loading',

      });

      setTimeout(() => {

        this.setData({

          res: cont

        });

        wx.hideLoading();

      }, 1500)

    }

  },

  /**

   * 生命周期函數(shù)--監(jiān)聽頁面加載

   */

  onLoad: function (options) {

    wx.getSystemInfo({

      success: (res) => {

        this.setData({

          height: res.windowHeight

        })

      }

    })

  }

}) 

小程序是什么意思

小程序是一種不需要下載安裝即可使用的應(yīng)用，通過掃描二維碼或是搜一搜立即使用，操作簡單，便于傳播，能夠?qū)崿F(xiàn)消息通知、線下掃碼、公眾號關(guān)聯(lián)等七大功能。它基于微信運(yùn)行的，類似于APP，想用就用，用完即走，不會占用內(nèi)存。

以上就是關(guān)于“微信小程序怎么實現(xiàn)滾動加載更多功能”的內(nèi)容，如果該文章對您有所幫助并覺得寫得不錯，勞請分享給您的好友一起學(xué)習(xí)新知識，若想了解更多相關(guān)知識內(nèi)容，請多多關(guān)注億速云行業(yè)資訊頻道。