微信小程序开发(十四)scroll-view实现下拉刷新上拉加载更多

之前在做原生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的上拉和下拉事件中，我都加了一个定时，这里是为了延长上拉下拉视图的显示时间。