微信小程序中的加载更多(即列表分页)

2021-04-20    分类: 微信小程序

1.app.json中:

"window": {

  "enablePullDownRefresh": true //是否开启当前页面下拉刷新

}

2.wxml中:

<view class="info" wx:for="{{contentlist}}" wx:key="key">     <input hidden="{{hidden}}" value="{{item.id}}"/>     <text>{{item.title}}</text>     <text class="time">{{item.inputtime}}</text>     <view>         <text>{{item.content}}</text>     </view> </view>

3.js中:

data: {     hidden: true,                          //隐藏表单控件         page: 1,                              //当前请求数据是第几页         pageSize: 10,                          //每页数据条数         hasMoreData: true,                      //上拉时是否继续请求数据,即是否还有更多数据         contentlist: [],                        //获取的数据列表,以追加的形式添加进去 }, // 获取分页列表 getInfo: function (message) {     var that = this;     wx.showNavigationBarLoading()              //在当前页面显示导航条加载动画     wx.showLoading({                        //显示 loading 提示框         title: message,     })     wx.request({         url: 'http://localhost:88/wechat/test.php',    //本地设置不校验合法域名         data: { page: that.data.page, count: that.data.pageSize },         method: 'post',         header: { 'content-type': 'application/x-www-form-urlencoded' },         success: function (res) {             var contentlistTem = that.data.contentlist;             if (res.data.length > 0) {                 wx.hideNavigationBarLoading()     //在当前页面隐藏导航条加载动画                 wx.hideLoading()               //隐藏 loading 提示框                 if (that.data.page == 1) {                     contentlistTem = []                 }                 var contentlist = res.data;                 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                     })                 }             }         },         fail: function (res) {             wx.hideNavigationBarLoading()             wx.hideLoading()             fail()         },         complete: function (res) {         },     }) }, /** * 生命周期函数--监听页面初次渲染完成 */ onLoad: function (options) {     // 页面初始化 options为页面跳转所带来的参数     var that = this     that.getInfo('正在加载数据...') }, /** * 页面相关事件处理函数--监听用户下拉动作 */ onPullDownRefresh: function () {     this.data.page = 1     this.getInfo('正在刷新数据') }, /** * 页面上拉触底事件的处理函数 */ onReachBottom: function () {     if (this.data.hasMoreData) {         this.getInfo('加载更多数据')     } else {         wx.showToast({             title: '没有更多数据',         })     } } 

本文名称:微信小程序中的加载更多(即列表分页)
分享URL:/news47/109097.html

网站建设、网络推广公司-创新互联,是专注品牌与效果的网站制作,网络营销seo公司;服务项目有微信小程序

广告

声明:本网站发布的内容(图片、视频和文字)以用户投稿、用户转载内容为主,如果涉及侵权请尽快告知,我们将会在第一时间删除。文章观点不代表本网站立场,如需处理请联系客服。电话:028-86922220;邮箱:631063699@qq.com。内容未经允许不得转载,或转载时需注明来源: 创新互联

猜你还喜欢下面的内容

小程序开发

微信小程序知识

同城分类信息