关于mui 时间插件 dtpicker 与下拉刷新冲突问题 2019-05-05

mui 的部分写法会导致插件与插件之间产生冲突,小猿最近发现很多这样的问题,其中一个是mui 的时间插件与下拉刷新冲突。话不多说,先看时间插件常见的初始方法:

var chooseDate = function() {var result = mui("#result")[0];var btns = mui(".mui-btn");btns.each(function(i, btn) {btn.addEventListener("tap", function() {var _self = this;if(_self.picker) {_self.picker.show(function(rs) {result.value = rs.text;_self.picker.dispose();_self.picker = null;});} else {var optionsJson = this.getAttribute("data-options") || "{}";var options = JSON.parse(optionsJson);var id = this.getAttribute("id");_self.picker = new mui.DtPicker(options);_self.picker.show(function(rs) {result.value = rs.text;_self.picker.dispose();_self.picker = null;});}}, false);});}

  最开始想到的是监听picker的弹出可隐藏,但是隐藏好像监听不到,最后想到picker的有个隐藏方法,然后重写一下这个方法,在重写的方法里面对下拉刷新做对应操作,代码如下:

var chooseDate = function() {var result = mui("#result")[0];var btns = mui(".mui-btn");btns.each(function(i, btn) {btn.addEventListener("tap", function() {mui("#pullrefresh").pullRefresh().setStopped(true); //暂时禁止滚动var _self = this;if(_self.picker) {_self.picker.show(function(rs) {result.value = rs.text;_self.picker.dispose();_self.picker = null;});} else {var optionsJson = this.getAttribute("data-options") || "{}";var options = JSON.parse(optionsJson);var id = this.getAttribute("id");_self.picker = new mui.DtPicker(options);_self.picker.show(function(rs) {result.value = rs.text;_self.picker.dispose();_self.picker = null;});}_self.picker.hide = function() {//在选择器开启的时候会禁止页面滚动,隐藏的时候解开mui("#pullrefresh").pullRefresh().setStopped(false); //开启禁止滚动//下面这部分就是mui.picker.js的hide方法的源码了,我并没有深入分析,在此不再详解var i = this;if(!i.disposed) {var n = i.ui;n.picker.classList.remove(mui.className("active")),n.mask.close(),document.body.classList.remove(mui.className("dtpicker-active-for-page")),mui.back = i.__back}}}, false);});}希望可以帮助到大家!!

  

, 1, 0, 9);

Copyright © 2019 88pt88大奖游戏888 All Rights Reserved
李义志
地址:上海市松江区泗泾镇泗砖公路608号
全国统一热线:18800964296