微信小程序点击、上拉加载更多数据

开发需求

进入页面，加载初始数据，当向上拖动页面至底部，自动加载新的数据，即上拉加载更多数据。

微信截图_20200420133041.png

演示

GIF 2020-4-20 13-31-41.gif

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 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"}
]

以上是 微信小程序点击、上拉加载更多数据 的全部内容， 来源链接： utcz.com/a/18391.html

回到顶部