微信小程序上拉加载更多

来个上拉刷新，解决一下上拉问题。上拉小伙伴除了用微信小程序自带的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就好。总结就是拿时间戳来看看是不是多次到底部，多次的话时间点过于断的话将不进行请求

微信小程序 上拉加载更多

猜你喜欢

微信小程序上拉加载更多