微信小程序實現(xiàn)上拉加載功能
更新時間:2019年11月20日 14:52:43 作者:£AP︶ㄣOL◢◤LO
這篇文章主要為大家詳細介紹了微信小程序實現(xiàn)上拉加載功能,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
本文實例為大家分享了微信小程序上拉加載的具體代碼,供大家參考,具體內容如下
demo.wxml 文件
<view wx:for="{{listdata}}" wx:key="listdata" class='listitem'> <view class='title'>{{ item.store_name }}</view> <image src='{{item.logo}}'></image> </view> <view class="load-more-wrap"> <block wx:if="{{hasMore}}"> <view class="load-content"> <text class="weui-loading"/><text class="loading-text">玩命加載中</text> </view> </block> <block wx:else> <view class="load-content"> <text>沒有更多內容了</text> </view> </block> </view>
demo.js文件
Page({ data: { listdata:[], //數(shù)據(jù) paginated: '', //{total:"12", count: 10, more: 1} total數(shù)據(jù)總數(shù),count:當前分頁數(shù)據(jù)數(shù)據(jù),more:1表示還有,0表示無數(shù)據(jù) p:0, //當前分頁;默認第一頁 hasMore:true //提示 }, onLoad: function (options) { var that = this; var p = that.data.p; this.loadmore(); }, onReachBottom:function(){ var that = this; var paginated = that.data.paginated; if (paginated.more != 0) { this.loadmore(); }else{ that.setData({ "hasMore": false }) } }, loadmore:function(){ wx.showToast({ title: "玩命加載中", icon: 'loading', duration: 1000 }) var that = this; var p = ++that.data.p; wx.request({ url: 'xxx', data: { "json": JSON.stringify({ "demo": "xxx", "p": p }) }, method: 'POST', header: { 'content-type': 'application/x-www-form-urlencoded' }, success:function(res){ if (res.data.data != 0) { that.setData({ "listdata": that.data.listdata.concat(res.data.data), //加載數(shù)據(jù) "paginated": res.data.paginated, //{total:"12", count: 10, more: 1} 此處主要用于上拉加載是否加載數(shù)據(jù) "p":p }) } else { that.setData({ "hasMore":false }) } } }) } })
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。
您可能感興趣的文章:
- 微信小程序 列表的上拉加載和下拉刷新的實現(xiàn)
- 微信小程序 scroll-view實現(xiàn)上拉加載與下拉刷新的實例
- 微信小程序(六):列表上拉加載下拉刷新示例
- 詳解微信小程序開發(fā)之下拉刷新 上拉加載
- 微信小程序實現(xiàn)列表下拉刷新上拉加載
- 微信小程序scroll-view實現(xiàn)橫向滾動和上拉加載示例
- 微信小程序列表渲染功能之列表下拉刷新及上拉加載的實現(xiàn)方法分析
- 微信小程序實現(xiàn)頁面下拉刷新和上拉加載功能詳解
- 微信小程序 下拉刷新及上拉加載原理解析
- 微信小程序實現(xiàn)上拉加載功能示例【加載更多數(shù)據(jù)/觸底加載/點擊加載更多數(shù)據(jù)】
相關文章
TinyMCE提交AjaxForm獲取不到數(shù)據(jù)的解決方法
這篇文章主要介紹了TinyMCE提交AjaxForm獲取不到數(shù)據(jù)的解決方法,實例分析了對應的源碼部分與相應的解決方法,具有一定參考借鑒價值,需要的朋友可以參考下2015-03-03關閉瀏覽器輸入框自動補齊 兼容IE,FF,Chrome等主流瀏覽器
這篇文章主要介紹了關閉瀏覽器輸入框自動補齊 兼容IE,FF,Chrome等主流瀏覽器,需要的朋友可以參考下。希望對大家有所幫助2014-02-02一道優(yōu)雅面試題分析js中fn()和return fn()的區(qū)別
這篇文章主要帶領大家深入理解JavaScript中 fn() 和 return fn() 的區(qū)別,感興趣的小伙伴們可以參考一下2016-07-07three.js 實現(xiàn)露珠滴落動畫效果的示例代碼
這篇文章主要介紹了three.js 實現(xiàn)露珠滴落動畫效果的示例代碼,非常不錯,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2021-03-03