1. 程式人生 > >小程式頁面內容觸底分頁載入

小程式頁面內容觸底分頁載入

呼叫介面,獲取商品資訊

<view class='btm'>
  <view class='btm-tit'>福利中心</view>
  <view class='welfare-list'>
     <view class="no-data" wx:if="{{goodList.length<=0}}">
      <image src="/images/zw_cnntent.png" mode="aspectFit"></image>
      <text>暫無相關內容哦~</text>
</view> <block wx:for="{{goodList}}" wx:key="this3"> <view class='welfare-detail'> <view class='good-img'> <image src="{{item.meg_cover}}"></image> </view> <view class='good-describe'> <view class
='good-tit'>
{{item.meg_name}}</view> <view class='good-content'>{{item.meg_brief}}</view> <view class='toExchange'> <text class='needSum'>{{item.meg_score}}福利</text> <view class='exchange-btn' bindtap='getWelfare' data-index
='{{index}}' data-id='{{item.meg_id}}' data-type='{{item.meg_type}}'>
兌換</view> </view> </view> </view> </block> <view class="nomore-tip" style="margin-top:-16rpx;" wx:if="{{noMoretip&&goodList.length>0}}">沒有更多資料啦~</view> </view> </view>

邏輯、

page({
	data:{
	 goodList:[], //商品列表
	 page:0,	//商品頁碼
	 noMoretip: false,    //false為有更多資料,true為資料載入完畢
	},
	 onLoad: function () {
		this.getGoodList(); //請求列表
 	},
 	getGoodList:function(){
	    wx.showLoading({
	      title: '載入中',
		    })
		var page=this.data.page; //獲取頁碼
		var that=this;
		// 發起請求,獲取列表列表
    wx.request({
      url: app.globalData.requestUrl,
      data: {
      	map:xx,
      	page:page		
      },
      success: function (e) {
        if(e.data.ec==200){
          var allArr=[];   
          var initArr = that.data.goodList ? that.data.goodList : [];  //獲取已載入的商品
          var newArr = e.data.data.goods;				//獲取新載入的商品
          var lastPageLength = newArr.length;  			//新獲取的商品數量
          if(page<=0){									//如果是第一頁
            allArr = e.data.data.goods;
          }else{
            allArr = initArr.concat(newArr);		//如果不是第一頁,連線已載入與新載入商品
          }
          if (lastPageLength < 10) {           //如果新載入的一頁課程數量小於10,則沒有下一頁
            that.setData({
              noMoretip: true,
            });
          }
          that.setData({
            goodList: allArr,
          })
        }else{
          wx.showToast({
            title: res.data.em, 	 //錯誤資訊
            icon:'none',
            duration:'2000'
          })
        }
        
      },
      fail:function(){
        wx.showToast({
          title: '網路錯誤',
          icon:'none'
        })
      },
      complete: function () {
        wx.hideLoading();
      }
    });
  },
  /**
   * 頁面上拉觸底事件的處理函式
   */
  onReachBottom: function () {
    var page = this.data.page;  //獲取現在頁碼
    if (!this.data.noMoretip){
      page++		
      this.setData({			//頁碼加一,呼叫函式,獲取下一頁內容
        page:page
      })
      this.getGoodList();
    }
  },
  //下拉重新整理,要將商品列表,頁碼都改為初始值,否則會出現重新整理之後商品的錯亂
  onPullDownRefresh: function () {
    this.setData({
      page: 0,
      noMoretip: false,    //無更多
      goodList: [], //商品列表
    })
    this.getGoodList();
  },

})