MUI下拉刷新与区域滚动冲突的解决办法，实际解决

今天遇到了MUI下拉刷新的大坑，百度了好久也没看到有能用的解决办法。

自己查阅HTML 5+ API文档后，觉得可以监听scroll事件，当到达顶部时开启下拉刷新，非顶部时关闭即可。一尝试果然可行。

废话不说了，解决办法如下：

//日志标记flag
var flag = true;
//进入时开启刷新
var selfpage = plus.webview.currentWebview();
selfpage.setPullToRefresh({support: true
}, onRefresh);
//监听滚动事件
document.querySelector('.scroll-body').addEventListener('scroll', function(e) {//当scrollTop等于0时即是到达顶部if(this.scrollTop == 0) {flag = true;console.log("refresh:" + flag);    //开启刷新，参考//http://www.html5plus.org/doc/zh_cn/webview.html#plus.webview.WebviewPullToRefreshStylesplus.webview.currentWebview().setPullToRefresh({support: true,style: 'circle',height: '40px',range: '40px',offset: '61px',});}else if(flag) {flag = false;console.log("refresh:" + flag);selfpage.setPullToRefresh({support: false});});//具体执行刷新的方法
function onRefresh(){console.log("onRefresh");plus.webview.currentWebview().endPullToRefresh();}

MUI下拉刷新与区域滚动冲突的解决办法，实际解决相关推荐

mui下拉刷新，无法滑动
由于在开发中,经常用到mui前端框架,所有经常犯了一些低级错误,业务流程都做出来了,可是下拉刷新的时候就是动不了,下面还有一些div没有显示出来,可是就是拉不下去. 1.首先得写上完整的html的mu ...
pb自定义控件事件_Android WebView与下拉刷新控件滑动冲突的解决方法
使用WebView时一般会在外层使用下拉刷新控件如(SwipeRefreshLayout).但是测试时会发现网页无法上拉,往上滑动就会触发下拉刷新控件的refresh事件.所以这里记录一下解决该问题的 ...
[ vant ] vue移动端下拉刷新组件
学习关键语句: vant list组件和下拉刷新 vant 下拉刷新和局部滚动冲突写在前面每一次 ! 我是说每一次我在使用 vant 组件库里面 list组件和下拉刷新连在一起用的时候都会出现下 ...
DCloud-MUI：下拉刷新、上拉加载
ylbtech-DCloud-MUI:下拉刷新.上拉加载 1. 下拉刷新返回顶部 0. http://dev.dcloud.net.cn/mui/pulldown/ 1. 概述为实现下拉刷新功能,大 ...
自定义下拉刷新之仿AcFun下拉刷新
俗话说好记性不如烂笔头,决定以后将研究过的东西写到博客里,方便自己以后查找,也方便技术分享.第一篇从基础的自定义下拉刷新开始.这里说下,我是在大神的肩膀上进行自定义的,因为自己重写下拉刷新的话会有很多 ...
flutter NestedScrollView 下拉刷新的解决方案一
题记 -- 执剑天涯,从你的点滴积累开始,所及之处,必精益求精. 重要消息 [x1]微信公众号的每日提醒随时随记每日积累随心而过 [x2]各种系列的视频教程免费开源关注你不会迷路 [x3] ...
DCloud-MUI 下拉刷新与加载更多
下拉刷新单WebView 实现原理下拉刷新,触发的是原生下拉刷新控件,而整个webview位置不会发生变化,所以不会在拖动过程中发生DOM重绘,当控件拖动到一定位置触发动态加载数据以及刷新操作.此 ...
h5实现下拉刷新上拉加载（兼容iOS手机）
在移动端开发中经常会遇到上拉加载下拉刷新的分页的需求,本人在用jquery weui框架中的相应扩展组件的时候发现不太好用,于是有找了一下,发现了一个非常不错的组件iscroll4.js,现在好像官网 ...
小程序：区域滚动、下拉刷新、上拉加载更多
一.简介开发环境:小程序.uniapp 实现功能:列表页面实现,区域滚动.下拉刷新.上拉加载更多,效果如图: 正常: 下拉刷新: 上拉加载: 二.实现 2.1.代码 <scroll-view ...

MUI下拉刷新与区域滚动冲突的解决办法，实际解决

MUI下拉刷新与区域滚动冲突的解决办法，实际解决相关推荐

最新文章

热门文章