微信小程序scroll-view实现自定义刷新@TOC

先说原生页面级的刷新

通常我们可以利用微信小程序的onPullDownRefresh函数（下拉刷新监听函数）和onReachBottom函数（上拉加载监听函数）监听页面的下拉和上拉动态，从而对页面数据进行修改！
1.在页面.json文件声明

   //下拉刷新"backgroundTextStyle":"dark",//backgroundTextStyle 设置为 dark 是为了可见下拉时的三个点。。"enablePullDownRefresh": true//允许下拉刷新

2.使用onPullDownRefresh()监听用户下拉操作，实现刷新操作；

  onPullDownRefresh(){var self = this;wx.showToast({title:'加载中....',icon:'loading'});setTimeout(() => {// 数据成功后，停止下拉刷新wx.stopPullDownRefresh();}, 1000);},

tips：可以通过wx.startPullDownRefresh和wx.stopPullDownRefresh触发和关闭页面下拉刷新；

使用scroll-view

但是上述刷新方式只能做简单交互，对于复杂页面，使用起来或许会出现意料之外的情况：
1.没有办法自定义动画效果。
2.该下拉刷新只能出现在最顶部，也就是说对于顶部使用了自定义组件的页面，比如顶部使用了自定义标题栏、搜索功能的，刷新就会把自定义组件”拉下来“，非常丑陋。
因此，微信小程序也为开发者提供了scroll-view, scroll-view提供了多个属性，操作相对更灵活

使用scroll-view

wxml部分：

    <scroll-view scroll-y style="width: 100%;height:100%;" refresher-enabled="{{true}}" refresher-threshold="{{100}}" refresher-triggered="{{triggered}}" bindrefresherrefresh="onRefresh"></scroll-view>

refresher-enabled设置为true表示启用自定义下拉刷新
refresher-triggered用来控制下拉刷新状态，true表示下拉，false表示复位

  data: {triggered: false,},

  async onRefresh() {let that = thisawait this.setData({triggered: true,//测试下拉triggered不会自动变为true，需要强制设置一下，不然下面复位无效，真神奇})
/*
可在这里处理数据
*/setTimeout(function () {console.log('1111');that.setData({triggered: false,//1.5秒后复位})}, 1500);},

##至此，就可以实现常规的下拉刷新动作啦

微信小程序scroll-view实现自定义刷新相关推荐

微信小程序头部导航栏自定义
微信小程序头部导航栏自定义参考网址微信开放文档 navigationStyle导航栏样式:仅支持以下值:default默认样式,custom 自定义导航栏,只保留右上角胶囊按钮配置示例 {&quo ...
微信小程序—for循环包括自定义for循环中的item和index（图文）
微信小程序-for循环包括自定义for循环中的item和index <view wx:for="{{list}}" wx:key="{{index}}"& ...
微信小程序顶部导航栏自定义，根据不同手机自适应距离状态栏高度，防止标题栏高度歪歪扭扭
微信小程序顶部导航栏自定义,根据不同手机自适应距离状态栏高度一.微信小程序顶部导航栏自定义 "navigationStyle": "custom" app. ...
微信小程序----返回上一页刷新或当前页刷新
WXRUI体验二维码如果文章对你有帮助的话,请打开微信扫一下二维码,点击一下广告,支持一下作者!谢谢! 声明 bug: 在onShow中执行this.onLoad(),会导致页面第一次加载的时候数组 ...
微信小程序：微信也可以发闪照了闪照制作生成微信小程序源码下载,自定义闪照时间
这是一款闪照制作的一款微信小程序源码该源码呢也就是让用户在微信也可以实现QQ上面的闪照功能用户可以自主上传照片,可以自定义的选择闪照的时间另外这款小程序还支持流量主模式这种东西目前在微信还是挺 ...
威信也可以发闪照了闪照制作生成微信小程序源码下载,自定义闪照时间
这是一款单照制作的一款微信小程序源码该源码呢也就是让用户在威信也可以实现Q上面的闪照功能用户可以自主上传照片,可以自定义的选择闪照的时间这种东西目前在威信还是挺少见的,用来在朋友面前装装还是挺好 ...
小程序源码：微信也可以发闪照了闪照制作生成微信小程序源码下载,自定义闪照时间
这是一款闪照制作的一款微信小程序源码该源码呢也就是让用户在微信也可以实现QQ上面的闪照功能用户可以自主上传照片,可以自定义的选择闪照的时间另外这款小程序还支持流量主模式这种东西目前在微信还是挺 ...
小程序源码：闪照制作生成微信小程序源码下载,自定义闪照时间-多玩法安装简单
这是一款闪照制作的一款微信小程序源码该源码呢也就是让用户在微信也可以实现QQ上面的闪照功能用户可以自主上传照片,可以自定义的选择闪照的时间另外这款小程序还支持流量主模式这种东西目前在微信还是挺 ...
微信小程序学习——view的显示与隐藏
微信小程序学习--view的显示与隐藏需要在全局数据块中,设定一个控制键. data: {......//省略其他代码showView: true}, 然后是在wxml中,view的class中设置 ...
免费的微信小程序客服消息自定义关键词自动回复管理系统
源码名称:微信小程序客服消息自定义关键词回复管理系统框架版本:laravel5.8,和thinkphp类似的框架,会thinkphp就会laravel. 适用范围:二次开发,独立部署,客服自动回复 ...

微信小程序scroll-view实现自定义刷新

先说原生页面级的刷新

使用scroll-view

使用scroll-view

微信小程序scroll-view实现自定义刷新相关推荐

最新文章

热门文章