開發需求
進入頁面,加載初始數據,當向上拖動頁面至底部,自動加載新的數據,即上拉加載更多數據。
演示
index.wxml
<!-- 數據列表 -->
<view wx:for="{{listdata}}" wx:key="listdata" class='listitem'>
<view class='title'>{{item.title}}</view>
<view class='title'>資源ID:{{item.id}}</view>
<image src="{{item.coverimg}}" class='cover'></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>
index.js
Page({
data: {
listdata:[], //數據
moredata: '',
p:0, //當前分頁;默認第一頁
hasMore:true //提示
},
//加載初始數據
onLoad: function (options) {
var that = this;
//初始頁面
var p = that.data.p;
this.loadmore();
},
//觸底事件
onReachBottom:function(){
var that = this;
//檢查是否還有數據可以加載
var moredata = that.data.moredata;
//如果還有,則繼續加載
if (moredata.more != 0) {
this.loadmore();
//如果沒有了,則停止加載,顯示沒有更多內容了
}else{
that.setData({
"hasMore": false
})
}
},
//發起請求
loadmore:function(){
//加載提示
wx.showLoading({
title: '加載中',
})
var that = this;
//頁面累加
var p = ++that.data.p;
//請求服務器
wx.request({
url: '你的服務器/server.php?page=' + p,
data: {
"json": JSON.stringify({
"p": p
})
},
method: 'POST',
header: {
'content-type': 'application/x-www-form-urlencoded'
},
//請求成功,回調函數
success:function(res){
//隱藏加載提示
wx.hideLoading();
//判斷市局是否爲空
if (res.data != 0) {
that.setData({
//把新加載的數據追加到原有的數組
"listdata": that.data.listdata.concat(res.data), //加載數據
"moredata": res.data,
"p":p
})
} else {
that.setData({
"hasMore":false
})
}
}
})
}
})
說明
1、url修改爲你的服務端鏈接,格式是
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數組的形式,例如
[
{"id":"1","title":"標題1","coverimg":"url1"},
{"id":"2","title":"標題2","coverimg":"url2"},
{"id":"3","title":"標題3","coverimg":"url3"},
{"id":"4","title":"標題4","coverimg":"url4"},
{"id":"5","title":"標題5","coverimg":"url5"}
]
作者
Author:TANKING
Date:2020-04-20
WeChat:face6009