05_微信小程序之scroll-view下拉刷新以及上拉加载
05_微信小程序之scroll-view下拉刷新以及上拉加载
一.布局确定
由于在微信小程序中,每一个xml节点会被自动加上page标签,而page标签默认是高度自适应,并且可以滑动的,所以为保证滑动不会冲突,在使用scroll-view时需要将page的宽高设置为100%,并且禁用page默认的滑动效果
page {
width: 100%;
height: 100%;
overflow: hidden;
}
接下来只需要在xml文件中使用scroll-view,并将scroll-view的’scroll-y’属性设为true,scroll-view才具备垂直滚动的条件,当然如果您希望scroll-view横向滑动,那么只需要将scroll-view的’scroll-x’属性设为true即可。
注意:如果要求scroll-view纵向滑动,那么除了将’scroll-y’属性设为true之外,还需要保证scroll-view的高度是确定的,横向滑动也是同样的道理,需要保证scroll-view的宽度是确定的。
由于前面已经将page的高度确定为100%;只需要将scroll-view的高度设置为100%,scroll-view的高度也就被确定为屏幕的高度了,此时,当scroll-view中所有字节点的高度超出屏幕高度,scroll-view就可以滑动了。
page {
width: 100%;
height: 100%;
overflow: hidden;
}
.scroll-view {
width: 100%;
height: 100%;
}
<!--index.wxml-->
<scroll-view class="scroll-view" scroll-y="{{true}}">
<!-- 此处省略n多个<view>wqwqwqw</view>节点 -->
</scroll-view>
二.将scroll-view设置为可下拉
只需将scroll-view的’refresher-enabled’属性设为true,即可实现下拉效果
<!--index.wxml-->
<scroll-view class="scroll-view" scroll-y="{{true}}" refresher-enabled="{{true}}">
<!-- 此处省略n多个<view>wqwqwqw</view>节点 -->
</scroll-view>
三.处理下拉刷新的逻辑
这里先模拟下从pc分页请求数据的过程,一般情况下,我们向pc请求一个列表数据时,会向pc传递一个pageSize和start参数,告诉pc端每一页要给我多少条数据,并且我请求的是第几页的数据,pc在返回列表数据时,会把相应的列表数据返给我们,并通过totalCount告诉我们总共会有多少条数据。开始模拟吧!
data: {
list:[],
serverDatas: [],
pageSize: 20,
totalPage: 1,
start: 1
},
onLoad: async function(options) {
var serverDatas = new Array();
for(var i=0; i<101; i++) {
serverDatas.push((i+1) + "")
}
this.setData({
serverDatas: serverDatas
})
var list = await this.getList(1, 20)
console.log(list)
var list = await this.getList(2, 20)
console.log(list)
var list = await this.getList(3, 20)
console.log(list)
var list = await this.getList(4, 20)
console.log(list)
var list = await this.getList(5, 20)
console.log(list)
var list = await this.getList(6, 20)
console.log(list)
},
getList: function(start, pageSize) {
var serverDatas = this.data.serverDatas
var totalCount = serverDatas.length
var list = new Array()
var length = start * pageSize >= serverDatas.length ? serverDatas.length : start * pageSize
for(var i=(start - 1) * pageSize; i<length; i++) {
list.push((i + 1) + "")
}
var result = {
totalCount: totalCount,
list: list
}
return new Promise(function (resolve, reject) {
//模拟网络请求的耗时操作
setTimeout(function () {
resolve(result);
}, 3000);
});
}
网络请求的过程已经模拟完了,万事已具备,只欠逻辑实现了????
bindrefresherrefresh ==> loading设为true,调用接口,结束后loading设为false
最后将loading的值绑定给refresher-triggered属性即可
data: {
list:[],
serverDatas: [],
pageSize: 20,
totalPage: 1,
start: 1,
loading: false
},
onLoad: async function(options) {
var serverDatas = new Array();
for(var i=0; i<101; i++) {
serverDatas.push((i+1) + "")
}
this.setData({
serverDatas: serverDatas
})
this.setData({
loading: true
})
},
getList: function(start, pageSize) {
var serverDatas = this.data.serverDatas
var totalCount = serverDatas.length
var list = new Array()
var length = start * pageSize >= serverDatas.length ? serverDatas.length : start * pageSize
for(var i=(start - 1) * pageSize; i<length; i++) {
list.push((i + 1) + "")
}
var result = {
totalCount: totalCount,
list: list
}
return new Promise(function (resolve, reject) {
//模拟网络请求的耗时操作
var timer = setTimeout(function () {
resolve(result);
clearTimeout(timer)
}, 3000);
});
},
refreshDatas: async function() {
var pageSize = this.data.pageSize
this.setData({
loading:true
})
var result = await this.getList(1, pageSize)
var list = result.list
var totalCount = result.totalCount
//计算总页数
var totalPage = 1
if (totalCount % pageSize > 0) {
totalPage = Math.floor(totalCount / pageSize) + 1
} else {
totalPage = totalCount / pageSize
}
this.setData({
loading: false,
list: list,
totalPage: totalPage
})
},
onRefresh: function(e) {
this.refreshDatas()
}
四.处理上拉加载更多数据的逻辑
bindrefresherrefresh => 请求下一页的数据,并追加到list中
<scroll-view class="scroll-view" scroll-y="{{true}}" refresher-enabled="{{true}}" bindrefresherrefresh="onRefresh" refresher-triggered="{{loading}}" bindscrolltolower="onReachBottom">
<view class="list">
<view wx:for="{{list}}">item{{item}}</view>
</view>
</scroll-view>
/**index.wxss**/
page {
width: 100%;
height: 100%;
overflow: none;
}
.scroll-view {
width: 100%;
height: 100%;
}
.list {
width: 100%;
//保证scroll-view中的子元素不能充满屏幕时,也能触发上拉加载
height: calc(100vh + 10rpx);
}
data: {
list:[],
serverDatas: [],
pageSize: 20,
totalPage: 1,
start: 1,
loading: false
},
onLoad: async function(options) {
var serverDatas = new Array();
for(var i=0; i<101; i++) {
serverDatas.push((i+1) + "")
}
this.setData({
serverDatas: serverDatas
})
this.setData({
loading: true
})
},
getList: function(start, pageSize) {
var serverDatas = this.data.serverDatas
var totalCount = serverDatas.length
var list = new Array()
var length = start * pageSize >= serverDatas.length ? serverDatas.length : start * pageSize
for(var i=(start - 1) * pageSize; i<length; i++) {
list.push((i + 1) + "")
}
var result = {
totalCount: totalCount,
list: list
}
return new Promise(function (resolve, reject) {
//模拟网络请求的耗时操作
var timer = setTimeout(function () {
resolve(result);
clearTimeout(timer)
}, 3000);
});
},
refreshDatas: async function() {
var pageSize = this.data.pageSize
this.setData({
loading:true
})
var result = await this.getList(1, pageSize)
var list = result.list
var totalCount = result.totalCount
//计算总页数
var totalPage = 1
if (totalCount % pageSize > 0) {
totalPage = Math.floor(totalCount / pageSize) + 1
} else {
totalPage = totalCount / pageSize
}
this.setData({
loading: false,
list: list,
totalPage: totalPage,
start: 1
})
},
onRefresh: function(e) {
this.refreshDatas()
},
onReachBottom: function(e) {
var that = this
var timer = setTimeout(function() {
that.loadDatas()
clearTimeout(timer)
}, 500)
},
loadDatas: async function() {
var pageSize = this.data.pageSize
var that = this
var start = that.data.start
var totalPage = that.data.totalPage
start += 1
if (start > totalPage) {
return
}
wx.showLoading({
title: '加载中',
})
var result = await this.getList(start, pageSize)
var newList = result.list
var totalCount = result.totalCount
//计算总页数
var totalPage = 1
if (totalCount % pageSize > 0) {
totalPage = Math.floor(totalCount / pageSize) + 1
} else {
totalPage = totalCount / pageSize
}
//追加数据
var list = this.data.list
for (var i = 0; i < newList.length; i++) {
list.push(newList[i])
}
wx.hideLoading()
this.setData({
list: list,
totalPage: totalPage,
start: start
})
}
上一篇: Vue第一天