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

下拉刷新
(1)直接调用onPullDownRefresh:function()事件,首先设置app.js以及有该需求的页面json文件中的
“enablePullDownRefresh”: true, //允许下拉刷新
“backgroundTextStyle”: “dark”, //点的颜色为黑色
“backgroundColor”: “#fff” //显示白色背景
onPullDownRefresh:function(){
setTimeout(function () {
wx.stopPullDownRefresh();
console.info(‘下拉数据加载完成.’);
}, 1000);
}
(2)scroll-view组件
这里写图片描述
wx.showNavigationBarLoading() //在标题栏中显示加载
setTimeout(function()//在刷新时执行函数的回调中执行
{
wx.hideNavigationBarLoading() //完成停止加载
wx.stopPullDownRefresh() //停止下拉刷新
},1500);
bindscrolltoupper就是滑动到顶部的事件函数,在该函数中执行相应的操作也可实现下拉刷新,但是scrolll-view组件的用户体验并不好,设置下拉事件时会闪屏
上拉加载
(1) 用onReachBottom函数进行上拉加载的操作
这里写图片描述`
用于分页操作请求时重新请求接口将请求后的数据与原来数据concat后显示列表,同时对页面底部显示文案进行更改
(2)scroll-view
scroll-view组件提供的bindscrolltolower事件是滚动条滑动到底部时触发的,同onReachBottom函数作用效果一样

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值