小編這次要給大家分享的是微信小程序如何實現(xiàn)上拉加載功能，文章內(nèi)容豐富，感興趣的小伙伴可以來了解一下，希望大家閱讀完這篇文章之后能夠有所收獲。
創(chuàng)新互聯(lián)公司-專業(yè)網(wǎng)站定制、快速模板網(wǎng)站建設(shè)、高性價比哈巴河網(wǎng)站開發(fā)、企業(yè)建站全套包干低至880元,成熟完善的模板庫,直接使用。一站式哈巴河網(wǎng)站制作公司更省心,省錢,快速模板網(wǎng)站建設(shè)找我們，業(yè)務(wù)覆蓋哈巴河地區(qū)。費用合理售后完善，10年實體公司更值得信賴。
本文實例講述了微信小程序?qū)崿F(xiàn)上拉加載功能。分享給大家供大家參考，具體如下：
進入頁面，加載初始數(shù)據(jù)，當(dāng)向上拖動頁面至底部，自動加載新的數(shù)據(jù)，即上拉加載更多數(shù)據(jù)。
index.wxml
{{item.title}} 資源ID:{{item.id}} 玩命加載中 沒有更多內(nèi)容了
index.js
重慶分公司
重慶分公司
Page({
data: {
listdata:[], //數(shù)據(jù)
moredata: '',
p:0, //當(dāng)前分頁；默認(rèn)第一頁
hasMore:true //提示
},
//加載初始數(shù)據(jù)
onLoad: function (options) {
var that = this;
//初始頁面
var p = that.data.p;
this.loadmore();
},
//觸底事件
onReachBottom:function(){
var that = this;
//檢查是否還有數(shù)據(jù)可以加載
var moredata = that.data.moredata;
//如果還有，則繼續(xù)加載
if (moredata.more != 0) {
this.loadmore();
//如果沒有了，則停止加載，顯示沒有更多內(nèi)容了
}else{
that.setData({
"hasMore": false
})
}
},
//發(fā)起請求
loadmore:function(){
//加載提示
wx.showLoading({
title: '加載中',
})
var that = this;
//頁面累加
var p = ++that.data.p;
//請求服務(wù)器
wx.request({
url: '你的服務(wù)器/server.php?page=' + p,
data: {
"json": JSON.stringify({
"p": p
})
},
method: 'POST',
header: {
'content-type': 'application/x-www-form-urlencoded'
},
//請求成功，回調(diào)函數(shù)
success:function(res){
//隱藏加載提示
wx.hideLoading();
//判斷市局是否為空
if (res.data != 0) {
that.setData({
//把新加載的數(shù)據(jù)追加到原有的數(shù)組
"listdata": that.data.listdata.concat(res.data), //加載數(shù)據(jù)
"moredata": res.data,
"p":p
})
} else {
that.setData({
"hasMore":false
})
}
}
})
}
})1、url修改為你的服務(wù)端鏈接，格式是
http:域名/目錄/?page=頁碼
例如：
http://www.baidu.com/api/data.php?page=1
頁碼是可變的，所以聲明一個變量p，所以就是
`url: 'http://www.baidu.com/api/data.php?page' + p,`
index.wxss
.listitem{
width: 90%;
height: 155px;
background: rgba(0, 0, 0, 0.2);
margin:10px auto;
text-align: center;
position: relative;
color:#fff;
}
.listitem .cover{
width:100%;
height:155px;
position: absolute;
top: 0;
left: 0;
z-index: -100;
}
.load-more-wrap .load-content{
text-align: center;
margin:30px auto 30px;
color:#ccc;
font-size: 15px;
}返回json數(shù)組的形式，例如
[
{"id":"1","title":"標(biāo)題1","coverimg":"url1"},
{"id":"2","title":"標(biāo)題2","coverimg":"url2"},
{"id":"3","title":"標(biāo)題3","coverimg":"url3"},
{"id":"4","title":"標(biāo)題4","coverimg":"url4"},
{"id":"5","title":"標(biāo)題5","coverimg":"url5"}
]看完這篇關(guān)于微信小程序如何實現(xiàn)上拉加載功能的文章，如果覺得文章內(nèi)容寫得不錯的話，可以把它分享出去給更多人看到。
