微客导航 » 文章资讯 » 微信小程序下拉加载和上拉刷新两种实现方法详解

微信小程序下拉加载和上拉刷新两种实现方法详解

2023-08-15 05:03:04 337

方法一：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








{{item.name}}
{{item.short_description}}





加载中...

index.js

varurl="http://www.imooc.com/course/ajaxlist";
varpage=0;
varpage_size=5;
varsort="last";
varis_easy=0;
varlange_id=0;
varpos_id=0;
varunlearn=0;
//请求数据
varloadMore=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);
varlist=that.data.list;
for(vari=0;i})

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:20rpxauto;
background:brown;
overflow:hidden;
}

.item.img{
width:430rpx;
margin-right:20rpx;
float:left;
}

.title{
font-size:30rpx;
display:block;
margin:30rpxauto;
}

.description{
font-size:26rpx;
line-height:15rpx;
}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

返回顶部
3162201930
czq8825@qq.com

微信小程序下拉加载和上拉刷新两种实现方法详解

热门推荐

随机推荐