小程序的上拉加载、下拉刷新
下拉刷新
onPullDownRefresh() { //执行的程序 this.getFamilyList()
wx.showLoading({ title: '加载中' })
setTimeout(function () { wx.hideLoading() }, 1000)
wx.hideNavigationBarLoading() //完成停止加载 } "enablePullDownRefresh":true 放在json里面 下拉刷新才会生效
上拉加载
html部分
// 上拉加载 这个利用小程序自带的标签 scroll-view 实现 <div class='listBox'> <scroll-view class='listLeftScroll' scroll-y @scrolltolower= 'scrollLeftBox' > </scroll-view> </div>
js部分
左边下拉加载 /order/sec/getMyOrderList/{paidStatus}/{page} paidStatus:支付状态 0未支付 1全部 有两个tab 左边全部 右边未支付 page:页码 从0开始 method get this.count 为这个请求回来的数组总长度 this.itemLeftList.length 为从请求中得到的数组长度 下面用concat累加 当全部拿到数组后则不再累加 将paga置为初始值0 scrollLeftBox () { this.pages += 1 if (this.count <= this.itemLeftList.length) { this.pages = 0 return false } this.$get( `/zgtf/order/sec/getMyOrderList/${1}/${this.pages}` ).then(data => { // this.itemLeftList this.itemLeftList = this.itemLeftList.concat(data.list) console.log('累加加', this.itemLeftList) }).catch(err => { console.log(err) }) }
css部分说明
说明 因为scroll-view 为 scroll-y 竖向属性的时候需要高度 但有时候我们需要100% 但是不会生效
所有 我们可以将它的css设置为position:relative;即可实现100% 如下
类 .listLeftScroll的样式 之后将它的父盒子设置为position:absolute;
.listBox{ width:100%;height: 100%;position:absolute;top:0;left:0; } .listLeftScroll{ position: relative; width:100%; height:100%; overflow:auto; top:50px; }