微信小程序下拉加载和上拉刷新两种实现方法详解
作者:武小妞WLJ 时间:2024-04-23 09:30:52
方法一:onPullDownRefresh和onReachBottom方法实现小程序下拉加载和上拉刷新
首先要在json文件里设置window属性
设置js里onPullDownRefresh和onReachBottom方法
下拉加载说明:
当处理完数据刷新后,wx.stopPullDownRefresh可以停止当前页面的下拉刷新。
onPullDownRefresh(){
console.log('--------下拉刷新-------')
wx.showNavigationBarLoading() //在标题栏中显示加载
wx.request({
url: 'https://URL',
data: {},
method: 'GET',
// OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECT
// header: {}, // 设置请求的 header
success: function(res){
// success
},
fail: function() {
// fail
},
complete: function() {
// complete
wx.hideNavigationBarLoading() //完成停止加载
wx.stopPullDownRefresh() //停止下拉刷新
}
})
方法二:在scroll-view里设定bindscrolltoupper和bindscrolltolower实现微信小程序下拉
index.wxml
<!--index.wxml-->
<view class="container" style="padding:0rpx">
<!--垂直滚动,这里必须设置高度-->
<scroll-view scroll-top="{{scrollTop}}" scroll-y="true" style="height:{{scrollHeight}}px;"
class="list" bindscrolltolower="bindDownLoad" bindscrolltoupper="topLoad" bindscroll="scroll">
<view class="item" wx:for="{{list}}">
<image class="img" src="{{item.pic_url}}"></image>
<view class="text">
<text class="title">{{item.name}}</text>
<text class="description">{{item.short_description}}</text>
</view>
</view>
</scroll-view>
<view class="body-view">
<loading hidden="{{hidden}}" bindchange="loadingChange">
加载中...
</loading>
</view>
</view>
index.js
var url = "http://www.imooc.com/course/ajaxlist";
var page =0;
var page_size = 5;
var sort = "last";
var is_easy = 0;
var lange_id = 0;
var pos_id = 0;
var unlearn = 0;
// 请求数据<br> var loadMore = function(that){
that.setData({
hidden:false
});
wx.request({
url:url,<br> data:{
page : page,
page_size : page_size,
sort : sort,
is_easy : is_easy,
lange_id : lange_id,
pos_id : pos_id,
unlearn : unlearn
},
success:function(res){
//console.info(that.data.list);
var list = that.data.list;
for(var i = 0; i < res.data.list.length; i++){
list.push(res.data.list[i]);
}
that.setData({
list : list
});
page ++;
that.setData({
hidden:true
});
}
});
}
Page({
data:{
hidden:true,
list:[],
scrollTop : 0,
scrollHeight:0
},
onLoad:function(){
// 这里要注意,微信的scroll-view必须要设置高度才能监听滚动事件,所以,需要在页面的onLoad事件中给scroll-view的高度赋值
var that = this;
wx.getSystemInfo({
success:function(res){
that.setData({
scrollHeight:res.windowHeight
});
}
});
loadMore(that);
},
//页面滑动到底部
bindDownLoad:function(){
var that = this;
loadMore(that);
console.log("lower");
},
scroll:function(event){
//该方法绑定了页面滚动时的事件,我这里记录了当前的position.y的值,为了请求数据之后把页面定位到这里来。
this.setData({
scrollTop : event.detail.scrollTop
});
},
topLoad:function(event){
// 该方法绑定了页面滑动到顶部的事件,然后做上拉刷新
page = 0;
this.setData({
list : [],
scrollTop : 0
});
loadMore(this);
console.log("lower");
}<br> })
index.wxss
/**index.wxss**/
.userinfo {
display: flex;
flex-direction: column;
align-items: center;
}
.userinfo-avatar {
width: 128rpx;
height: 128rpx;
margin: 20rpx;
border-radius: 50%;
}
.userinfo-nickname {
color: #aaa;
}
.usermotto {
margin-top: 200px;
}
/**/
scroll-view {
width: 100%;
}
.item {
width: 90%;
height: 300rpx;
margin: 20rpx auto;
background: brown;
overflow: hidden;
}
.item .img {
width: 430rpx;
margin-right: 20rpx;
float: left;
}
.title {
font-size: 30rpx;
display: block;
margin: 30rpx auto;
}
.description {
font-size: 26rpx;
line-height: 15rpx;
}
来源:https://www.cnblogs.com/wuliujun521/p/11459601.html
标签:微信,小程序,下拉,加载,上拉,刷新
![](/images/zang.png)
![](/images/jiucuo.png)
猜你喜欢
JavaScript解决Joseph问题
2008-06-21 17:11:00
Vue3.0 自己实现放大镜效果案例讲解
2024-04-09 10:45:54
![](https://img.aspxhome.com/file/2023/2/139852_0s.png)
python绘制高斯曲线
2023-01-06 06:48:33
![](https://img.aspxhome.com/file/2023/2/107222_0s.jpg)
JS获取当前时间的实例代码(昨天、今天、明天)
2024-04-23 09:28:36
go第三方库sqlx操作MySQL及ORM原理
2024-01-18 21:12:32
![](https://img.aspxhome.com/file/2023/5/134135_0s.jpg)
Python将字典转换为XML的方法
2023-08-04 16:13:22
Python中模块的使用--binascii模块用法
2022-11-16 13:53:16
opencv-python+yolov3实现目标检测
2022-01-18 06:45:17
![](https://img.aspxhome.com/file/2023/5/92415_0s.jpg)
python实现360皮肤按钮控件示例
2023-01-22 11:19:58
PHP MySQL的安装与配置详解
2023-10-26 11:14:55
Python自定义一个类实现字典dict功能的方法
2023-07-20 22:45:59
python和C++共享内存传输图像的示例
2021-03-28 01:27:57
![](https://img.aspxhome.com/file/2023/9/120479_0s.png)
js 客户端打印html 并且去掉页眉、页脚的实例
2024-04-22 22:24:26
Dreamweaver定义本地站点
2010-07-02 16:27:00
Python实现21点小游戏的示例代码
2022-06-14 06:32:10
Python自定义线程池实现方法分析
2021-12-17 09:13:10
![](https://img.aspxhome.com/file/2023/7/107147_0s.png)
django foreignkey外键使用的例子 相当于left join
2021-04-17 15:52:33
全兼容的纯CSS级联菜单要点浅析
2009-06-10 14:42:00
Docker安装常用组件(mysql,redis)的方法
2024-01-28 02:44:56
Mysql中的排序规则utf8_unicode_ci、utf8_general_ci的区别总结
2024-01-13 14:39:02