1.上拉加载更多
在微信小程序里面其实是没有分页控件的,也就不能像网页一样点击页面跳转到某一页。这时我们需要使用上滑加载来实现一页一页的加载,当我们的内容到了底部以后,就会加载第二页的内容。那么这个上滑加载是如何实现的呢?
1.设置初始加载函数
初始加载函数的意思就是,当页面进来显示的时候,要显示一页的内容,这一项是必须的。
2.配置onReadBottom函数
配置触发小程序到底后加载数据,这里我们需要一个初始页码,每次到达页面底部以后,页码加1,
this.data.currentPage = this.data.currentPage + 1;
结果运用concat函数进行拼接:
that.setData({
items: that.data.items.concat(JSON.parse(res.data[0].list))
})
这样,我们在将页码传入后台进行数据分页查询,就可以实现分页加载了。
实例:
//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"}
]
2.点击加载更多
和上拉刷新其实是一样的,只不过触发事件的形式稍微不同,原理一样。
实例:
//view
<view wx:if="{{arrayProject !=''}}">
<view class="list-view" wx:for="{{arrayProject}}" wx:key="id">
<view class="title"><h2><text bindtap="articlelink" data-id="{{item.id}}">{{item.title}}</text></h2>
</view>
<view class='auth-view'>
<view class='muted' id='mute-category' bindtap="typelink" data-alias="{{item.alias}}" data-name="{{item.cid}}" data-ctype=""><text class='fa fa-list-alt'></text><text class="fontgreen ml">{{item.cid}}</text></view>
<view class='muted'><text class='fa fa-clock-o'></text><text class="ml">{{item.created_at}}</text></view>
<view class='muted'><text class='fa fa-eye'></text> {{item.scan_count}}</view>
<view class='muted'><text class='fa fa-comments-o'></text> <text bindtap='' class="fontgreen"><text class="ml">{{item.comment_count}}</text>评论</text></view>
<view class='muted'><view href='javascript:;' data-action='ding' data-id='240' like-url='/view/like' id='Addlike' class='action'><text class='fa fa-heart-o' style="color:#f78585"></text> <text class="ml">{{item.like_count}}喜欢</text></view>
</view>
</view>
</view>
<view class='remind' bindtap='loadMore' data-alias="{{alias}}" data-name="{{name}}" data-ctype="{{ctype}}" wx:if="{{state==1}}"><text class="more">↓加载更多↓</text></view>
<view class='remind' wx:if="{{state==0}}"><text class="none">没有更多数据^_^</text></view>
</view>
//js
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
var mythis = this;
var alias = options.alias;
var name = options.name;
var ctype = options.ctype;
this.setData({
alias: alias,
name: name,
ctype: ctype,
})
getarticlelist(this.data.pagesize, this.data.p, mythis, alias, name, ctype) //获取列表
},
/**
* 点击加载更多时触发
*/
loadMore: function (e) {
var mythis = this;
var alias = e.currentTarget.dataset.alias;
var name = e.currentTarget.dataset.name;
var ctype = e.currentTarget.dataset.ctype;
/*wx.showLoading({
title: '玩命加载中...',
});*/
mythis.data.p = mythis.data.p + 1;
//console.log(this.data.p);
getarticlelist(this.data.pagesize, this.data.p, mythis, alias, name, ctype)
wx.hideLoading();
},
/**
* 获取文章列表
*/
function getarticlelist(pagesize, p, mythis, alias, name, ctype='') {
//console.log(ctype);
if(p=='0' || (p=='1' && ctype=='')) mythis.data.allProject = [];
wx.request({
url: 'https://ittxx.cn/api/XXX?cat=' + alias + '&p=' + p + '&pagesize=' + pagesize + '&ctype=' + ctype,
method: 'GET',
data: {
pagesize: pagesize,
p: p,
alias: alias,
name: name,
ctype: ctype,
},
header: {
'content-type': 'application/x-www-form-urlencoded'
},
success: function (res) {//如果搜出来的结果<1 就说明后面已经没数据可加载了,所以将state设为0
//if (res.data.message == 'success') {
console.log(res.data.length);
if (res.data.length < pagesize && p > 1)
mythis.setData({
state: 0
});
//console.log(mythis.data.pagesize);
var state1 = 1;//如果有数据,但小于每次期望加载的数据量(pagesize),将state设为0,表示后面已没有数据可加载
if (res.data.length < mythis.data.pagesize)
var state1 = 0;
//循环将结果集追加到数组后面
if(ctype !='' && p ==0){
mythis.data.allProject = [];
for (var i = 0; i < res.data.length; i++) {
mythis.data.allProject.push(res.data[i]);
}
mythis.setData({
p:1,
});
}
else{
for (var i = 0; i < res.data.length; i++) {
mythis.data.allProject.push(res.data[i]);
}
}
mythis.setData({
arrayProject: mythis.data.allProject,
state: state1
});
//}
//console.log(mythis.data.arrayProject)
},
fail: function (res) {
console.log(res);
}
});
}
效果:请关注ittxxcn小程序并查看文章列表
参考网址:
https://www.cnblogs.com/lishuang2243/p/11142999.html
https://blog.csdn.net/liumude123/article/details/80401175
https://www.h5w3.com/18391.html
https://blog.csdn.net/qq_38882327/article/details/92627805
转载请注明: ITTXX.CN--分享互联网 » 小程序上拉加载和点击加载更多实例
最后更新:2020-06-02 17:30:30