微信小程序 详解下拉加载与上拉刷新实现方法
作者:lqh 时间:2024-04-23 09:31:09
微信小程序下拉刷新上拉加载的两种实现方法
实现效果图:
方法一:onPullDownRefresh和onReachBottom方法实现小程序下拉加载和上拉刷新
首先要在json文件里设置window属性
属性 | 类型 | 描述 |
enablePullDownRefresh | Boolean | 是否开启下拉刷新,详见页面相关事件处理函数。 |
设置js里onPullDownRefresh和onReachBottom方法
属性 | 类型 | 描述 |
onPullDownRefresh | function | 页面相关事件处理函数——监听用户下拉动作 |
onReachBottom | function | 页面上拉触发底事件的处理函数 |
下拉加载说明:
当处理完数据刷新后,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实现微信小程序下拉
属性 | 类型 | 描述 |
bindscrolltoupper | EventHandle | 滚动到顶部/左边,会触发 scrolltoupper 事件 |
bindscrolltolower | EventHandle | 滚动到底部/右边,会触发 scrolltolower 事件 |
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;
// 请求数据
var loadMore = function(that){
that.setData({
hidden:false
});
wx.request({
url:url,
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");
}
})
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;
}
感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!
标签:微信小程序,下拉加载,上拉刷新
0
投稿
猜你喜欢
MySQL 开窗函数
2024-01-15 11:06:24
Tensorflow的DataSet的使用详解
2021-03-19 18:18:04
Vue网页html转换PDF(最低兼容ie10)的思路详解
2024-06-07 15:25:12
SQL Server中的事务介绍
2024-01-16 17:09:58
Python中OpenCV Tutorials 20 高动态范围成像的实现步骤
2022-04-02 07:24:20
python+OpenCV人脸识别考勤系统实现的详细代码
2021-11-01 01:28:44
mysql向mariadb平滑过渡的步骤详解
2024-01-26 18:12:39
网易网站设计(思想)
2009-03-27 17:51:00
关于Python 实现tuple和list的转换问题
2022-02-18 21:29:03
python中threading和queue库实现多线程编程
2023-01-12 13:59:08
mysql 按中文字段排序
2024-01-14 18:04:19
利用Python操作消息队列RabbitMQ的方法教程
2022-12-11 21:52:16
python比较两个列表大小的方法
2023-01-14 22:24:40
Python运算符重载的简单实例代码
2021-02-13 11:21:22
Go语言实现定时器的方法
2024-02-09 04:55:21
Python实现类别变量的独热编码
2023-10-17 02:37:33
PHP Session ID的实现原理与实例
2023-07-13 13:36:53
总结python中pass的作用
2021-02-15 18:34:45
Python中新式类与经典类的区别详析
2022-02-04 05:11:16
JS实现字符串转驼峰格式的方法
2024-04-10 13:58:45