微信小程序 上拉加载更多

来源:互联网 发布:酸碱滴定实验报告数据 编辑:程序博客网 时间:2024/05/17 07:47
来个上拉刷新,解决一下上拉问题。上拉小伙伴除了用微信小程序自带的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就好。总结就是拿时间戳来看看是不是多次到底部,多次的话时间点过于断的话将不进行请求