1. 程式人生 > >微信小程式 上拉載入更多

微信小程式 上拉載入更多

來個上拉重新整理,解決一下上拉問題。上拉小夥伴除了用微信小程式自帶的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就好。總結就是拿時間戳來看看是不是多次到底部,多次的話時間點過於斷的話將不進行請求