微信小程序?qū)崿F(xiàn)上拉加載功能
本文實(shí)例為大家分享了微信小程序上拉加載的具體代碼,供大家參考,具體內(nèi)容如下
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>沒有更多內(nèi)容了</text>
</view>
</block>
</view>
demo.js文件
Page({
data: {
listdata:[], //數(shù)據(jù)
paginated: '',
//{total:"12", count: 10, more: 1} total數(shù)據(jù)總數(shù),count:當(dāng)前分頁數(shù)據(jù)數(shù)據(jù),more:1表示還有,0表示無數(shù)據(jù)
p:0, //當(dāng)前分頁;默認(rèn)第一頁
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
})
}
}
})
}
})
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- 微信小程序 列表的上拉加載和下拉刷新的實(shí)現(xiàn)
- 微信小程序 scroll-view實(shí)現(xiàn)上拉加載與下拉刷新的實(shí)例
- 微信小程序(六):列表上拉加載下拉刷新示例
- 詳解微信小程序開發(fā)之下拉刷新 上拉加載
- 微信小程序?qū)崿F(xiàn)列表下拉刷新上拉加載
- 微信小程序scroll-view實(shí)現(xiàn)橫向滾動(dòng)和上拉加載示例
- 微信小程序列表渲染功能之列表下拉刷新及上拉加載的實(shí)現(xiàn)方法分析
- 微信小程序?qū)崿F(xiàn)頁面下拉刷新和上拉加載功能詳解
- 微信小程序 下拉刷新及上拉加載原理解析
- 微信小程序?qū)崿F(xiàn)上拉加載功能示例【加載更多數(shù)據(jù)/觸底加載/點(diǎn)擊加載更多數(shù)據(jù)】
相關(guān)文章
TinyMCE提交AjaxForm獲取不到數(shù)據(jù)的解決方法
這篇文章主要介紹了TinyMCE提交AjaxForm獲取不到數(shù)據(jù)的解決方法,實(shí)例分析了對(duì)應(yīng)的源碼部分與相應(yīng)的解決方法,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-03-03
js Math數(shù)學(xué)簡(jiǎn)單使用操作示例
這篇文章主要介紹了js Math數(shù)學(xué)簡(jiǎn)單使用,結(jié)合實(shí)例形式分析了js Math數(shù)學(xué)相關(guān)函數(shù)的基本用法與操作注意事項(xiàng),需要的朋友可以參考下2020-03-03
使用JavaScript實(shí)現(xiàn)輪播圖效果完整實(shí)例
我們?cè)诟鞣N網(wǎng)頁中經(jīng)常見到輪播圖的效果,下面這篇文章主要給大家介紹了關(guān)于使用JavaScript實(shí)現(xiàn)輪播圖效果的相關(guān)資料,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-01-01
關(guān)閉瀏覽器輸入框自動(dòng)補(bǔ)齊 兼容IE,FF,Chrome等主流瀏覽器
這篇文章主要介紹了關(guān)閉瀏覽器輸入框自動(dòng)補(bǔ)齊 兼容IE,FF,Chrome等主流瀏覽器,需要的朋友可以參考下。希望對(duì)大家有所幫助2014-02-02
一道優(yōu)雅面試題分析js中fn()和return fn()的區(qū)別
這篇文章主要帶領(lǐng)大家深入理解JavaScript中 fn() 和 return fn() 的區(qū)別,感興趣的小伙伴們可以參考一下2016-07-07
three.js 實(shí)現(xiàn)露珠滴落動(dòng)畫效果的示例代碼
這篇文章主要介紹了three.js 實(shí)現(xiàn)露珠滴落動(dòng)畫效果的示例代碼,非常不錯(cuò),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2021-03-03

