微信小程序onPullDownRefresh onReachBottom实现下拉刷新上拉分页加载 - 好文

样式基于weui

首先需要配置页面的json文件，启用下拉刷新
{ "enablePullDownRefresh": true }
在WXML里，通过列表渲染即可显示数据
<view class="weui-panel__bd"> <view wx:for="{{list}}" wx:key="item" class=
"weui-media-box weui-media-box_appmsg" hover-class="weui-cell_active"> <view
class="weui-media-box__hd weui-media-box__hd_in-appmsg"> <image class=
"weui-media-box__thumb" src="{{item.coverpic ? item.coverpic : '/src/img
/coverpic.png'}}" /> </view> <view class="weui-media-box__bd
weui-media-box__bd_in-appmsg"> <view class="weui-media-box__title">{{item.title
}} <block wx:if="{{item.groupid==2}}"> <view class="weui-badge" style=
"margin-left: 5px;" wx:if="{{item.ishidden==1}}">隐藏</view> <view class=
"weui-badge" style="margin-left: 5px;" wx:if="{{item.status==0}}">待审核</view> <
view class="weui-badge" style="margin-left: 5px;" wx:if="{{item.status==2}}">请修改
</view> </block> </view> <view class="weui-flex"> <block wx:if="{{item.groupid
==2}}"> <navigator class="placeholder"> 详情 </navigator> <navigator class=
"placeholder" url="/pages/my/activity/add/add?activity_id={{item.activity_id}}">
编辑</navigator> <navigator class="placeholder" url=
"/pages/my/activity/form/form?activity_id={{item.activity_id}}"> 报名信息 </
navigator> <navigator class="placeholder"> 项目 </navigator> <navigator class=
"placeholder"> 赛程 </navigator> </block> <navigator class="placeholder"> 签到 </
navigator> </view> </view> </view> <view class="weui-loadmore
weui-loadmore_line" hidden='{{hasmoreData}}'> <view class="weui-loadmore__tips
weui-loadmore__tips_in-line">暂无更多数据</view> </view> <view class="weui-loadmore"
hidden='{{hiddenloading}}'> <view class="weui-loading"></view> <view class=
"weui-loadmore__tips">正在加载</view> </view> </view>
JS部分我是将post再封装了一次，这边主要用到onPullDownRefresh和onReachBottom两个方法
var app = getApp() Page({ data: { num:10, count:-1, page: 0, list: [],
hasmoreData: true, hiddenloading: true, }, onLoad: function (options) {
this.getList() }, onPullDownRefresh: function () {
this.setData({num:10,count:-1,page:0,list:[],hasmoreData:true,hiddenloading:true})
this.getList(); console.log('刷新数据') wx.stopPullDownRefresh() }, onReachBottom:
function () { console.log('加载更多') this.setData({ hiddenloading:false})
this.getList() }, getList: function () { var that = this if
(that.data.count!=-1&&that.data.page * that.data.num >= that.data.count) {
that.setData({ hasmoreData: false, hiddenloading:true }) return }
app.post('链接',{page:that.data.page},function(res){//这边是我自己的封装的post方法，具体大家再看 if
(res.count == 0) that.setData({ count: res.data.count,hasmoreData: false })
for(var i=0;i<res.data.list.length;i++){ that.data.list.push(res.data.list[i])
} that.setData({ count: res.data.count, num:
res.data.num,page:that.data.page+1,list:that.data.list,hiddenloading:true}) if
(!res.data.hasmoreData) that.setData({ hiddenloading: true }) }) }, })
完整说明：

* 将请求接口封装为一个方法
* 通过监听onPullDownRefresh，先对data中的数据进行初始化，然后请求接口
* 通过监听onReachBottom，实现加载分页数据

热门工具换一换