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

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:http://www.kartarina.com/news47/109097.html

網站建設、網絡推廣公司-創新互聯,是專注品牌與效果的網站制作,網絡營銷seo公司;服務項目有微信小程序

廣告

聲明:本網站發布的內容(圖片、視頻和文字)以用戶投稿、用戶轉載內容為主,如果涉及侵權請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網站立場,如需處理請聯系客服。電話:028-86922220;郵箱:631063699@qq.com。內容未經允許不得轉載,或轉載時需注明來源: 創新互聯

猜你還喜歡下面的內容

小程序開發

微信小程序知識

同城分類信息

主站蜘蛛池模板: 无码人妻精品一区二区三区蜜桃| 92午夜少妇极品福利无码电影| 久久综合精品国产二区无码| 久久无码国产专区精品| 日韩av无码成人无码免费| 中文字幕乱码人妻无码久久| 久久99精品久久久久久hb无码| 亚洲AV无码一区二区三区鸳鸯影院 | 白嫩无码人妻丰满熟妇啪啪区百度| 无码精品人妻一区二区三区影院| 亚洲ⅴ国产v天堂a无码二区| 人妻无码一区二区三区四区| 日日麻批免费40分钟无码| 伊人久久大香线蕉无码麻豆| 亚洲另类无码专区丝袜| 亚洲AV无码码潮喷在线观看| 无码人妻少妇伦在线电影| 无码精品国产dvd在线观看9久| 国产成人麻豆亚洲综合无码精品| 无码人妻精一区二区三区| 亚洲av无码不卡久久| 亚洲av无码乱码国产精品fc2| 西西4444www大胆无码| 国产午夜激无码av毛片| 亚洲AV无码一区二区三区久久精品 | 久久精品无码一区二区无码| 少妇无码AV无码一区| 一本色道无码道在线| 无码专区一va亚洲v专区在线| 无码国产精品一区二区免费I6| 久热中文字幕无码视频| 91久久精品无码一区二区毛片 | 国产精品一区二区久久精品无码| 中文字幕无码乱码人妻系列蜜桃| 午夜亚洲AV日韩AV无码大全| 人妻无码第一区二区三区| 人妻丰满熟妞av无码区 | 人妻丰满熟妇AV无码区| 亚洲av永久中文无码精品| 久久久精品天堂无码中文字幕| 无码精品国产va在线观看dvd|