微信小程式 上拉載入更多
阿新 • • 發佈:2019-01-08
來個上拉重新整理,解決一下上拉問題。上拉小夥伴除了用微信小程式自帶的onReachBottom外,最多用的就是scroll-view的上拉載入啦。但是呢,scroll-view上拉載入會一到底部就不斷的觸發這個事件,怎麼辦才能巧妙的解決這個問題呢?問了度娘依舊沒有解決問題,所以跟小夥伴研究了一下,得到下面方法,希望對小夥伴有用。
<view class='allOrder'> <scroll-view class='scroller' scroll-y style="height:{{scrollHeight}}px;" bindscrolltolower="LoadMore"> <view class='show-one-order' wx:for="{{list}}" wx:key="{{index}}" data-index='{{index}}' catchtap='getOrderDetail'> <!-- 展示一張票的img --> <view class='order-one-img'> <image wx:if='{{item.photos[0]}}' src='{{item.photos[0]}}' mode='aspectFill'></image> </view> </view> <view class="nonedata {{noneData== false?'hidden':''}}">沒有更多資料了 ~~~</view> </scroll-view> </view>
js 部分內容
// 引入請求(已封裝好的函式在上一篇部落格) var util = require('../../../utils/util.js'); Page({ /** * 頁面的初始資料 */ data: { flag: 1,//得到轉換的資料,1是全部 scrollHeight: 0,//得到手機螢幕高度 list: [],//得到列表 page: 1,//得到當前的頁數 limit: 10,//得到當前的條數 lastLoadTime: 0,//得到上一次載入的時間 loadMoreIs: false,//監控是否是下拉載入更多 noneData: false,//得到是否顯示沒有更多資料 totalPage: 0,//得到總的頁數 }, /** * 生命週期函式--監聽頁面載入 */ onLoad: function (options) { var that = this; wx.getSystemInfo({ success: function (res) { var height = res.windowHeight - 54; that.setData({ scrollHeight: height }); } }) this.getData();//得到相應資料 }, getData: function (e) { var dataType = this.data.flag; var that = this; //資料請求部分 util.HttpRequst(true, "order/orderList", 1, wx.getStorageSync('sessionId'),{ "limit": that.data.limit, "page": that.data.page, "type": dataType },"GET" , function (res) { if (res.code == 200) { var List = res.content.list; that.setData({ totalPage: res.content.totalPage }); if (List.length == 0 || List.length < that.data.limit || (that.data.totalPage == that.data.page && List.length % that.data.limit ==0)) { that.setData({ noneData: true }); } if (that.data.loadMoreIs == false) { that.setData({ list: List }); } else { var shanList = that.data.list.concat(List); that.setData({ list: shanList }); } console.log(res); } }) }, /** * 載入更多 */ LoadMore: function (e) { var that = this; var currentTime = e.timeStamp;//得到當前載入的時間 var lastTime = this.data.lastLoadTime;//得到上一次載入的時間 if (currentTime - lastTime < 300) { console.log("時間間隔太短,不能算下拉載入"); return; } var newPage = this.data.page + 1; console.log("當前頁"+newPage) if (that.data.totalPage >= newPage) { this.setData({ page: newPage, lastLoadTime: e.timeStamp, loadMoreIs: true }); this.getData(); } }, })
最後嘮叨一下getData裡面包含了下拉載入時候如果遇到載入到最後的情況時顯示更多,一併複製貼上上來了,如不需要可以不看,只看loadMore就好。總結就是拿時間戳來看看是不是多次到底部,多次的話時間點過於斷的話將不進行請求