首页 > 其他分享> > 使用mui遇到的问题总结

使用mui遇到的问题总结

2021-07-01 18:01:32 作者：互联网

1、mui区域滑动无法滑动

官方给出的滑动模块，默认overflow不是scroll，需要重新设置一下，区域就可以滑动了

<div class="mui-scroll-wrapper" style="overflow: scroll;">
  <div class="mui-scroll">
    <!--这里放置真实显示的DOM内容-->
  </div>
</div>

2、mui下拉刷新无法使用（双webView模式）

下拉刷新可能因为缺少一点细节或者模块设置错误都会使用不了
比较重要的便是容器的id设置，并且需要使用mui-content
以下为使用的正确格式

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
  <title>test</title>
  <script src="../js/mui.min.js"></script>
  <link href="../css/mui.min.css" rel="stylesheet"/>
  <script type="text/javascript" charset="utf-8">
    // 下拉刷新
    mui.init({
      pullRefresh : {
        container:"#refreshContainer",//下拉刷新容器标识
        down : {
          height:50,//触发下拉刷新拖动距离,
	  auto: false,//首次加载刷新一次
	  contentdown : "下拉可以刷新",//下拉时刷新标题
	  contentrefresh : "正在刷新...",//正在刷新时标题
	  contentmore: '刷新完成', // 完成后的内容
          callback : pulldownRefresh //刷新函数，可以编辑业务；
          }
        }
      });
      // callback刷新处理的函数
      function pulldownRefresh(){
        // 处理延时
        setTimeout(function(){
          // 结束刷新
          mui('#refreshContainer').pullRefresh().endPulldownToRefresh();
        },2000)
      }
  </script>
</head>
<body>
  <div id="refreshContainer" class="mui-content mui-scroll-wrapper" style="overflow: scroll;">
    <div class="mui-scroll">
      <!-- 具体内容 -->
    </div>
  </div>
</body>

3、mui下拉刷新a标签无法正常使用

这个因为mui的js代码的问题，官方为了修复safari下拉刷新时偶尔触发整个页面拖动的问题
解决的两种方式解决

（1）通过监听tab点击进行解决

mui('body').on('tap','a',function(){
		//事件处理
  });

(2)直接删掉这一部分的js即可

找到这一部分js然后删除即可

a.touches&&a.touches.length&&a.touches[0].clientX>30&&a.target&&!this._preventDefaultException(a.target,this.options.preventDefaultException)&&a.preventDefault()

标签：总结,touches,遇到,js,&&,刷新,滑动,mui
来源： https://www.cnblogs.com/fhrdr/p/14960050.html