ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

使用mui遇到的问题总结

2021-07-01 18:01:32  阅读:177  来源: 互联网

标签:总结 touches 遇到 js && 刷新 滑动 mui


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

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有