我們都知道，微信小程序使用的是MVVM框架，通過數(shù)據(jù)的綁定，可以實時解析視圖的內(nèi)容，從而展示不同內(nèi)容，下面要介紹的是一種經(jīng)常使用的功能，就是如果微信小程序里加載產(chǎn)品的列表功能，當(dāng)用戶向下滑動時，會不間斷的加載產(chǎn)品。
看來先js文件：
1.初始化參數(shù)
  data: {
p: 1,//當(dāng)前是第幾頁
list: [],//產(chǎn)品數(shù)據(jù)的數(shù)組
hasMoreData: true, //是否需要加載更多內(nèi)容
},
再來看onLoad函數(shù)，就是加載一個getProlist函數(shù)
2.onLoad: function (options) {
    var that = this
    that.getProlist('正在加載數(shù)據(jù)...')
  },
3.getProlist: function (message) {
    wx.showLoading({
      title: message,//提示正在加載中
    })
    var that = this
    var p = that.data.p
    //加載新產(chǎn)品
    var request_newpro_url = util.getApiUrl(app, "/GList/newpro", "&p=" + p)
    util._get(request_newpro_url,
      function (res) {
        wx.hideLoading();//關(guān)閉提示
        var list = that.data.list;//獲取list的值
        if (list == false) { //如果數(shù)據(jù)為空，則list就等于加載過來的數(shù)據(jù)就可以
        var data_list = res.data.data
        }else{
          var list2 = res.data.data
          var data_list = list.concat(list2);//因為list不為空，所以需要將list和list2兩個數(shù)組合并起來，再把值賦予data_list
        }
        //如果頁面數(shù)等于當(dāng)前頁,那就不要再加載了
        if (res.data.page_count <= res.data.p) {
          that.setData({
            hasMoreData: 0,
          })
        }
        that.setData({
          page_count: res.data.page_count,
          list: data_list //將data_list綁定到list中，這樣list用this.data.list獲取時，又是一個新的數(shù)組了
        })
      },
      function (res) {
        wx.hideLoading();
        wx.showToast({
          title: res.errMsg,
          duration: 2000
        })
      }
    )
  },
 //頁面相關(guān)事件處理函數(shù)--監(jiān)聽用戶下拉動作
  4.onPullDownRefresh: function () {
    this.getProlist('正在刷新數(shù)據(jù)')
  },
   //頁面上拉觸底事件的處理函數(shù)

  5.onReachBottom: function () {
    var that = this
    var p = that.data.p
    if (that.data.hasMoreData) { //判斷hasMoreData是不是等1，如果不等于1，則不再運行調(diào)用getProlist函數(shù)，也就是說加載到些結(jié)束了。
      that.setData({
        p: Number(p) + 1,
      })
      this.getProlist('加載更多數(shù)據(jù)')
    } else {
      wx.showToast({
        title: '沒有更多數(shù)據(jù)',
      })
    }
  },

再來看下后臺的程序部分，還是比較簡單的,使用的是thinkphp框架：
public function newpro(){
        $url_arr['status'] = 1;//查詢條件
                  $page= 6;//每次加載多個產(chǎn)品
                  $p = I('request.p',1);//第幾頁
                  $pagesize = ($p-1)*$page;//要加載從第幾個開始的產(chǎn)品
        $list=$ModelGoods->where($url_arr)->order('order_id asc,goods_id desc')->limit($pagesize,$page)->select();//獲取查詢的數(shù)據(jù)
                  $total_count=$ModelGoods->where($url_arr)->order('order_id asc,goods_id desc')->count();//計算所有符合條件的產(chǎn)品總數(shù)
                  $page_count = ceil($total_count/$page);//所有的產(chǎn)品一共有多少頁，向上取整
                  $data['p'] = $p;
                  $data['total_count'] = $total_count;
                  $data['page_count'] = $page_count;     
        $data['data'] = $list;
        $this->response($data,C('API_TYPE'));//將這些參數(shù)傳遞到微信小程序里
}

這個功能也是同樣運用了小程序MVVM的思想，通過后臺加載過來的數(shù)據(jù)，將數(shù)據(jù)一次次并接，形成更多的數(shù)據(jù)，讓瀏覽者能夠比較舒適的查看內(nèi)容變化，形成好的瀏覽體驗。
以上就是關(guān)于如何實現(xiàn)在微信小程序下如何無刷新加載產(chǎn)品列表的內(nèi)容(電腦如何實現(xiàn)微信多開)，希望對你有幫助，更多內(nèi)容關(guān)注創(chuàng)新互聯(lián)。

非常感謝您讀完創(chuàng)新互聯(lián)的這篇文章："如何實現(xiàn)在微信小程序下如何無刷新加載產(chǎn)品列表的內(nèi)容(電腦如何實現(xiàn)微信多開)"，僅為提供更多信息供用戶參考使用或為學(xué)習(xí)交流的方便。我們公司提供：網(wǎng)站建設(shè)、網(wǎng)站制作、官網(wǎng)建設(shè)、SEO優(yōu)化、小程序制作等服務(wù)，歡迎聯(lián)系我們提供您的需求。

分享標(biāo)題：如何實現(xiàn)在微信小程序下如何無刷新加載產(chǎn)品列表的內(nèi)容(電腦如何實現(xiàn)微信多開)
轉(zhuǎn)載源于：http://jinyejixie.com/news39/316189.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供云服務(wù)器、面包屑導(dǎo)航、網(wǎng)站制作、Google、軟件開發(fā)、網(wǎng)站維護

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)