之前在做原生app开发的时候,下拉刷新和上拉加载更多是使用的比较多的一个功能了。现在在做微信小程序开发,小程序只提供了下拉刷新的接口。那么下拉刷新和上拉加载更多就需要我们换个思路实现了。
关于scroll-view
什么是scroll-view
scroll-view:可滚动视图区域。
scroll-view的属性
注意点
使用竖向滚动时,需要给一个固定高度,通过 WXSS 设置 height。
Bug & Tip
- 请勿在 scroll-view 中使用 textarea、map、canvas、video 组件
- scroll-into-view 的优先级高于 scroll-top
- 在滚动 scroll-view 时会阻止页面回弹,所以在 scroll-view 中滚动,是无法触发 onPullDownRefresh
- 若要使用下拉刷新,请使用页面的滚动,而不是 scroll-view ,这样也能通过点击顶部状态栏回到页面顶部
在这里其实也就说了在使用scroll-view时是不能使用onPullDownRefresh了。
效果图
代码实现
wxml文件
<view class="header" hidden="{{hideHeader}}">
<view>下拉刷新中……</view>
<view>{{refreshTime}}</view>
</view>
<scroll-view class="list" style="height: 1208rpx" scroll-y="true" bindscrolltoupper="refresh" bindscrolltolower="loadMore">
<view class="item" wx:for="{{contentlist}}" wx:key="index">
<view class="left">
<image src="{{item.contentImg}}"></image>
</view>
<view class="right">{{item.title}}</view>
</view>
</scroll-view>
<view class="bottom" hidden="{{hideBottom}}">
<view>{{loadMoreData}}</view>
<view>{{refreshTime}}</view>
</view>
这里就是页面结构,上下都是下拉和上拉才会显示的。中间的scroll-view才是滚动视图。
js文件
/**
* 页面的初始数据
*/
data: {
hideHeader: true,
hideBottom: true,
refreshTime: '', // 刷新的时间
contentlist: [], // 列表显示的数据源
allPages: '', // 总页数
currentPage: 1, // 当前页数 默认是1
loadMoreData: '加载更多……'
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
var date = new Date();
this.setData({
refreshTime: date.toLocaleTimeString()
})
this.getData();
},
// 上拉加载更多
loadMore: function(){
var self = this;
// 当前页是最后一页
if (self.data.currentPage == self.data.allPages){
self.setData({
loadMoreData: '已经到顶'
})
return;
}
setTimeout(function(){
console.log('上拉加载更多');
var tempCurrentPage = self.data.currentPage;
tempCurrentPage = tempCurrentPage + 1;
self.setData({
currentPage: tempCurrentPage,
hideBottom: false
})
self.getData();
},300);
},
// 下拉刷新
refresh: function(e){
var self = this;
setTimeout(function(){
console.log('下拉刷新');
var date = new Date();
self.setData({
currentPage: 1,
refreshTime: date.toLocaleTimeString(),
hideHeader: false
})
self.getData();
},300);
},
// 获取数据 pageIndex:页码参数
getData: function(){
var self = this;
var pageIndex = self.data.currentPage;
wx.request({
url: 'https://route.showapi.com/582-2',
data: {
showapi_appid: '19297',
showapi_sign: 'cf606a68a01f45d196b0061a1046b5b3',
page: pageIndex
},
success: function(res){
var dataModel = res.data;
if (dataModel.showapi_res_code == 0){
if (dataModel.showapi_res_body.ret_code == 0){
if(pageIndex == 1){ // 下拉刷新
self.setData({
allPages: dataModel.showapi_res_body.pagebean.allPages,
contentlist: dataModel.showapi_res_body.pagebean.contentlist,
hideHeader: true
})
}else{ // 加载更多
console.log('加载更多');
var tempArray = self.data.contentlist;
tempArray = tempArray.concat(dataModel.showapi_res_body.pagebean.contentlist);
self.setData({
allPages: dataModel.showapi_res_body.pagebean.allPages,
contentlist: tempArray,
hideBottom: true
})
}
}
}
},
fail: function(){
}
})
},
分析
这里js代码里面其实就是处理逻辑。上拉的时候我们需要在数组contentlist的后面拼接数据和处理请求的页码;下拉的时候我们需要把当前页码设置成1,contentlist取当前网络请求的数据。网络请求getData函数上拉下拉的区分是通过当前页码值区分的。
在scroll-view的上拉和下拉事件中,我都加了一个定时,这里是为了延长上拉下拉视图的显示时间。