微信小程序 上拉加载更多
来源:互联网 发布:酸碱滴定实验报告数据 编辑:程序博客网 时间: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就好。总结就是拿时间戳来看看是不是多次到底部,多次的话时间点过于断的话将不进行请求
阅读全文
0 0
- 微信小程序 上拉加载更多
- 微信小程序 上拉加载更多
- 微信小程序-下拉刷新,上拉加载更多
- 微信小程序开发之 下拉刷新,上拉加载更多
- [微信小程序]下拉刷新上拉加载更多
- 微信小程序下拉刷新/上拉加载更多
- 上拉加载更多
- 上拉加载更多
- 上拉加载更多
- 上拉加载更多
- listview 上拉加载更多
- ListView上拉加载更多
- ListView上拉加载更多
- ionic 上拉加载更多
- Android上拉加载更多
- android 上拉加载更多
- 上拉加载更多数据
- RecyclerView 上拉加载更多
- 开关电源(DC-DC)与LDO电源的区别---效率
- 高通Camera 驱动调试要点(二)
- 第二章 身份验证——《跟我学Shiro》
- 关于多组织多数据读写
- PHP中如何判断FROM表单提交的数字是否为整数?
- 微信小程序 上拉加载更多
- 简单一元线性回归
- nginx不支持pathinfo 导致thinkphp出错解决办法
- Mongo数据库(一)
- 基于JAVA的Ajax与登录界面尝试(一)
- vue生命周期面试题
- 【树状数组+二分】BZOJ2028 [SHOI2009]会场预约
- 阿里云前端周刊
- Android Studio jni动态注册步骤