微信小程序之下拉加载和上拉刷新

时间:2023-01-02 18:48:18

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

方法一: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;
}

效果图

微信小程序之下拉加载和上拉刷新

微信小程序之下拉加载和上拉刷新的更多相关文章

  1. 微信小程序---》分包加载

    [小程序]---分包加载   一.分包加载 某些情况下,开发者需要将小程序划分成不同的子包,在构建时打包成不同的分包,用户在使用时按需进行加载 在构建小程序分包项目时,构建会输出一个或多个分包.每个使 ...

  2. 微信小程序-工具无法加载本地模拟开发服务的解决办法

    微信小程序开发工具出现如下问题: 因为网络代理软件或者 VPN 影响,工具无法加载本地模拟开发服务  请尝试以下任一解决方案1.关闭相关网络代理软件,重新编译成功后,再启动相关网络代理软件: 2.配置 ...

  3. 微信小程序实现滚动加载更多

    1.需要用到的组件和api scroll-view(可滚动视图区域) wx.showToast(OBJECT)显示消息提示窗----显示loading小菊花用的 2.需要用到的属性 3.scrol-v ...

  4. 微信小程序 - 图片懒加载

    wxml <!-- 数据源 --> <view class='item-{{index}}' wx:for="{{lazyData}}" wx:key=&quot ...

  5. 微信小程序中的加载更多(即列表分页)

    1.app.json中: "window": { "enablePullDownRefresh": true //是否开启当前页面下拉刷新 } 2.wxml中: ...

  6. 微信小程序上滑加载更多

    onReachBottom: function () { var that = this var limit = that.data.limit var count = that.data.count ...

  7. 微信小程序上拉加载下拉刷新

    微信小程序实现上拉加载下拉刷新 使用小程序默认提供方法. (1). 在xxx.json 中开启下拉刷新,需要设置backgroundColor,或者是backgroundTextStyle ,因为加载 ...

  8. 微信小程序之下拉刷新,上拉更多列表实现

    代码地址如下:http://www.demodashi.com/demo/11110.html 一.准备工作 首先需要下载小程序开发工具 官方下载地址: https://mp.weixin.qq.co ...

  9. mui scroll和上拉加载&sol;下拉刷新

    mui中 scroll和上拉加载/下拉刷新同时存在会出现两个滚动条 把/*   */ /* //mui页面鼠标拖动代码: mui('.mui-scroll-wrapper').scroll({ dec ...

随机推荐

  1. JavaWeb——文件上传和下载

    在Web应用系统开发中,文件上传和下载功能是非常常用的功能,今天来讲一下JavaWeb中的文件上传和下载功能的实现. 对于文件上传,浏览器在上传的过程中是将文件以流的形式提交到服务器端的,如果直接使用 ...

  2. 【译】ASP&period;NET MVC 5 教程 - 11:Details 和 Delete 方法详解

    原文:[译]ASP.NET MVC 5 教程 - 11:Details 和 Delete 方法详解 在教程的这一部分,我们将研究一下自动生成的 Details 和Delete 方法. Details ...

  3. Xamarin&period;iOS &plus; MvvmCross&colon; UIPickerView data binding&comma; SelectedItemChanged event

    UI initialization: _pickerView = new UIPickerView(); _pickerView.ShowSelectionIndicator = true; _pic ...

  4. 第13章 切换到混合流并添加API访问 - Identity Server 4 中文文档&lpar;v1&period;0&period;0&rpar;

    在之前的快速入门中,我们探讨了API访问和用户身份验证.现在我们想把这两个部分放在一起. OpenID Connect和OAuth 2.0组合的优点在于,您可以使用单个协议和使用令牌服务进行单次交换来 ...

  5. maven web工程 解决了pom&period;xml报错之后,maven web工程还是有个红色的叉叉 解决

    这里之前有个红色叉叉 改完了pom.xml文件之后需要:右键工程-MavenMyEclipse-Update Project 刷新Maven web 工程,即可解决此问题

  6. Apache启动不成功时,用命令行检测(新手&rpar;

    1,在配置Apache服务器时,经常要在httpd.conf 修改和添加一些代码,编写中,误写或者写错时,无法正常启动时,直接报错The requested operation has failed! ...

  7. 程序员工作 996 生病 ICU ?

    阅读本文大概需要 2 分钟. 说实话,一般平时这个点我已经睡着了,今天准备好的文章也会准时在凌晨推送给大家.睡前看篇关于强制 996 加班的消息,里面有句口号还挺溜,上班996,下班ICU,为此还特意 ...

  8. Linux Kernel API

    记录一些Linux Device Drivers中常用的API. Linux官方提供的内核文档: 1. 最新版: https://www.kernel.org/doc/html/latest/ 2. ...

  9. mysql系列三、mysql开启缓存、设置缓存大小、缓存过期机制

    一.开启缓存 mysql 开启查询缓存可以有两种方法来开启一种是使用set命令来进行开启,另一种是直接修改my.ini文件来直接设置都是非常的简单的哦. 开启缓存,设置缓存大小,具体实施如下: 1.修 ...

  10. UGUI表情系统解决方案

    参考链接: https://blog.uwa4d.com/archives/Sparkle_UGUI.html http://tech.seasungame.com/blog/index.php/20 ...