1、app.json启用enablePullDownRefresh
在window配置项里面添加"enablePullDownRefresh": true
2、页面.wxml
<view class='panel base-padding base-margin-bottom cate-data'> <view class='panel-heading'> <view class='panel-title font-lv1 strong'>唐诗 </view> </view> <view class='panel-body'> <block wx:for="{{contentlist}}"> <view class='row'> <navigator url='/pages/intro/intro' class='ellipsis-1row font-lv2'>{{item.title}}</navigator> <view class='text-muted info'>{{item.authors}}</view> <view class='text-muted ellipsis-2row desc'>{{item.content}} </view> </view> </block> </view> </view>
3、后台方法返回
由于是测试,找了网上一个免费https接口:https://api.apiopen.top/getTangPoetry?page=1&;count=5
返回如下:
{"code":200,"message":"成功!","result":[{"title":"帝京篇十首 一","content":"秦川雄帝宅,函谷壮皇居。|绮殿千寻起,离宫百雉余。|连甍遥接汉,飞观迥凌虚。|云日隐层阙,风烟出绮疏。","authors":"太宗皇帝"},{"title":"帝京篇十首 二","content":"岩廊罢机务,崇文聊驻辇。|玉匣启龙图,金绳披凤篆。|韦编断仍续,缥帙舒还卷。|对此乃淹留,欹案观坟典。","authors":"太宗皇帝"},{"title":"帝京篇十首 三","content":"移步出词林,停舆欣武宴。|雕弓写明月,骏马疑流电。|惊雁落虚弦,啼猿悲急箭。|阅赏诚多美,于兹乃忘倦。","authors":"太宗皇帝"},{"title":"帝京篇十首 四","content":"鸣笳临乐馆,眺听欢芳节。|急管韵朱弦,清歌凝白雪。|彩凤肃来仪,玄鹤纷成列。|去兹郑卫声,雅音方可悦。","authors":"太宗皇帝"},{"title":"帝京篇十首 五","content":"芳辰追逸趣,禁苑信多奇。|桥形通汉上,峰势接云危。|烟霞交隐映,花鸟自参差。|何如肆辙迹?万里赏瑶池。","authors":"太宗皇帝"}]}
4、页面.js
Page({ /** * 页面的初始数据 */ data: { page: 1, pageSize: 5, hasMoreData: true, contentlist: [] }, getInfo: function () { var that = this; wx.request({ url: 'https://api.apiopen.top/getTangPoetry', data: { page: that.data.page, count: that.data.pageSize }, success: function (res) { console.log(res);// 服务器回包信息 var contentlistTem = that.data.contentlist; if (res.data.code == 200) { if (that.data.page == 1) { contentlistTem = [] } var contentlist = res.data.result; if (contentlist.length < that.data.pageSize) { that.setData({ contentlist: contentlistTem.concat(contentlist), hasMoreData: false }) } else { that.setData({ contentlist: contentlistTem.concat(contentlist), hasMoreData: true, page: that.data.page + 1 }) } }else{ wx.showToast({ title: '出现异常' }) } } }) }, /** * 生命周期函数--监听页面加载 */ onLoad: function (options) { var that = this; that.getInfo(); }, /** * 生命周期函数--监听页面初次渲染完成 */ onReady: function () { }, /** * 生命周期函数--监听页面显示 */ onShow: function () { }, /** * 生命周期函数--监听页面隐藏 */ onHide: function () { }, /** * 生命周期函数--监听页面卸载 */ onUnload: function () { }, /** * 页面相关事件处理函数--监听用户下拉动作 */ onPullDownRefresh: function () { this.data.page = 1; this.getInfo(); }, /** * 页面上拉触底事件的处理函数 */ onReachBottom: function () { if (this.data.hasMoreData) { this.getInfo(); } else { wx.showToast({ title: '没有更多数据', }) } }, /** * 用户点击右上角分享 */ onShareAppMessage: function () { } })
界面效果如下:
备注:
分页代码主要参考这篇文章https://blog.csdn.net/xiehuimx/article/details/74938034