样式基于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,实现加载分页数据