精华内容
下载资源
问答
  • 因项目的需要,采用了MUI的滚动事件(scroll),遇到了不少的问题,做个记录,方便以后查询 问题一:引入MUI顶部滑动样式后,顶部滑动条全屏显示 <div id="slider" class="mui-slider mui-fullscreen"> <...

    因项目的需要,采用了MUI的滚动事件(scroll),遇到了不少的问题,做个记录,方便以后查询

    问题一:引入MUI顶部滑动样式后,顶部滑动条全屏显示

    <div id="slider" class="mui-slider mui-fullscreen">
      <div id="sliderSegmentedControl"
           class="mui-scroll-wrapper mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
        <div class="mui-scroll">
          <a class="mui-control-item mui-active" href="#item1mobile" data-wid="tab-top-subpage-1.html">
            全部
          </a>
          <a class="mui-control-item" href="#item2mobile" data-wid="tab-top-subpage-2.html">
            家居生活
          </a>
          <a class="mui-control-item" href="#item3mobile" data-wid="tab-top-subpage-3.html">
            北京
          </a>
          <a class="mui-control-item" href="#item4mobile" data-wid="tab-top-subpage-4.html">
            社会
          </a>
          <a class="mui-control-item" href="#item5mobile" data-wid="tab-top-subpage-5.html">
            娱乐
          </a>
        </div>
      </div>
    </div>
    

    解决方案:查看官方文档,文档说明:区域滚动组件默认为absolute定位,全屏显示。所以你需要手动删掉全屏这个类,即 mui-fullscreen

    问题二:没有滚动效果

    解决方案:根据官方文档:若使用区域滚动组件,需手动初始化scroll控件,因此,在需要用到该滚动效果的组件中,引入mui.js文件,并初始化

    import mui from '../../../lib/mui/js/mui.js'; // 建了lib文件夹,存放mui相关文件
    mui('.mui-scroll-wrapper').scroll({
    deceleration: 0.0005 //flick 减速系数,系数越大,滚动速度越慢,滚动距离越小,默认值0.0006
    });
    

    问题三:初始化之后报错

    控制台错误消息为:

    Uncaught TypeError: 'caller', 'callee', and 'arguments' properties may not be accessed on strict mode functions or the arguments objects for calls to them
    

    解决方案:

    1. 使用cnpm 安装 @babel/plugin-transform-modules-commonjs @babel/plugin-transform-strict-mode
    cnpm i @babel/plugin-transform-modules-commonjs @babel/plugin-transform-strict-mode -D
    
    1. 在.babelrc文件中增加["@babel/plugin-transform-modules-commonjs", { “strictMode”: false }]
    "plugins": [
          ["@babel/plugin-transform-modules-commonjs", { "strictMode": false }]
        ]
    

    问题四:刚进入页面无法滑动,要刷新之后方可滑动

    主要原因:滑动时机不对,如前面代码显示的那样,在导入mui后就初始化滑动控件,此时,当重新进入页面时,组件的DOM结构还未渲染好,就初始化,自然不会有效果。

    解决方法:放到mounted钩子函数中,在这个生命周期函数中,DOM结构已被渲染好,可以初始化滑动控件
    解决方案:

    mounted(){
      // 初始化滑动控件
      mui('.mui-scroll-wrapper').scroll({
        deceleration: 0.0005 //flick 减速系数,系数越大,滚动速度越慢,滚动距离越小,默认值0.0006
      });
    }
    

    问题五:终于可以滑动了,点击滑动报错:

    Unable to preventDefault inside passive event listener due to target being treated as passive. See https://www.chromestatus.com/features/5093566007214080
    

    解决方法:加入css样式

    .mui-slider {
    	touch-action: pan-x;
    }
    

    2016年Google I/O上提出的概念,目的是用来提升页面滑动的流畅度

    问题六:顶部可以滑动之后,底部Tab不能切换

    控制台错误消息为:

    Unable to preventDefault inside passive event listener due to target being treated as passive. See https://www.chromestatus.com/features/5093566007214080
    

    原因:
    Tab样式(也是MUI的)与MUI的JS文件冲突,具体什么冲突不清楚,有兴趣可以看源码,我还晕乎乎的
    解决方法:
    找到Tab栏mui-tab-item的所有样式,复制一份,重新赋予新的样式类名,如my-tab-item

    展开全文
  • 因项目的需要,采用了MUI的滚动事件(scroll),遇到了不少的问题,做个记录,方便以后查询。 问题一:引入MUI顶部滑动样式后,顶部滑动条全屏显示 <div id="slider" class="mui-slider mui-fullscreen"> <...

    因项目的需要,采用了MUI的滚动事件(scroll),遇到了不少的问题,做个记录,方便以后查询。

    问题一:引入MUI顶部滑动样式后,顶部滑动条全屏显示

    <div id="slider" class="mui-slider mui-fullscreen">
      <div id="sliderSegmentedControl"
           class="mui-scroll-wrapper mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
        <div class="mui-scroll">
          <a class="mui-control-item mui-active" href="#item1mobile" data-wid="tab-top-subpage-1.html">
            全部
          </a>
          <a class="mui-control-item" href="#item2mobile" data-wid="tab-top-subpage-2.html">
            家居生活
          </a>
          <a class="mui-control-item" href="#item3mobile" data-wid="tab-top-subpage-3.html">
            北京
          </a>
          <a class="mui-control-item" href="#item4mobile" data-wid="tab-top-subpage-4.html">
            社会
          </a>
          <a class="mui-control-item" href="#item5mobile" data-wid="tab-top-subpage-5.html">
            娱乐
          </a>
        </div>
      </div>
    </div>

    解决方案:查看官方文档,文档说明:区域滚动组件默认为absolute定位,全屏显示。所以你需要手动删掉全屏这个类,即 mui-fullscreen

    问题二:没有滚动效果

    解决方案:根据官方文档:若使用区域滚动组件,需手动初始化scroll控件,因此,在需要用到该滚动效果的组件中,引入mui.js文件,并初始化

    import mui from '../../lib/mui/js/mui.js'; // 建了lib文件夹,存放mui相关文件
    mui('.mui-scroll-wrapper').scroll({
    deceleration: 0.0005 //flick 减速系数,系数越大,滚动速度越慢,滚动距离越小,默认值0.0006
    });
    

    问题三:初始化之后报错

    控制台错误消息为:

    caller', 'callee', and 'arguments' properties may not be accessed on strict mode functions or the arguments objects for calls to them。

    原因:webpack启用了严格模式,而MUI没有,所以两者冲突了。
    解决方案:在.babelrc文件中加上:

    "ignore": [
    "./src/lib/mui/js/*.js"  // 建了lib文件夹,存放mui相关文件
    ]

    另一种解决方法:该方法试过,出现另一种报错:export 'default' (imported as 'mui') was not found in '../../lib/mui/js/mui.js'。不知道是不是因人而异呢==,有朋友成功了而我的不行2333

    1. 安装babel-plugin-transform-remove-strict-mode
    cnpm i babel-plugin-transform-remove-strict-mode -D
    2. 在.babelrc文件的plugins节点中配置:
    "transform-remove-strict-mode"
    

    问题四:终于可以滑动了,点击滑动报错:

    控制台错误消息为:

    Unable to preventDefault inside passive event listener due to target being treated as passive. See https://www.chromestatus.com/features/5093566007214080

    解决方法:

    * {
    touch-action: pan-y;
    }

    2016年Google I/O上提出的概念,目的是用来提升页面滑动的流畅度。

    问题五:顶部可以滑动之后,底部Tab不能切换

    控制台错误消息为:

    Unable to preventDefault inside passive event listener due to target being treated as passive. See https://www.chromestatus.com/features/5093566007214080

    原因:
    Tab样式(也是MUI的)与MUI的JS文件冲突,具体什么冲突不清楚,有兴趣可以看源码,我还晕乎乎的
    解决方法:
    找到Tab栏mui-tab-item的所有样式,复制一份,重新赋予新的样式类名,如mui-tab-item-my

    问题六:刚进入页面无法滑动,要刷新之后方可滑动

    原因:滑动时机不对,如前面代码显示的那样,在导入mui后就初始化滑动控件,此时,当重新进入页面时,组件的DOM结构还未渲染好,就初始化,自然不会有效果。
    解决方法:放到mounted钩子函数中,在这个生命周期函数中,DOM结构已被渲染好,可以初始化滑动控件

    mounted(){
      // 初始化滑动控件
      mui('.mui-scroll-wrapper').scroll({
        deceleration: 0.0005 //flick 减速系数,系数越大,滚动速度越慢,滚动距离越小,默认值0.0006
      });
    }
    
    展开全文
  • 引入的样式如下: <div id="slider" class="mui-slider mui-fullscreen"&...div id="sliderSegmentedControl" class="mui-scroll-wrapper mui-slider-indicator mui-segmented-control mui-segmented-control-in...

    引入的样式如下:

    <div id="slider" class="mui-slider mui-fullscreen">
    				<div id="sliderSegmentedControl" class="mui-scroll-wrapper mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
    					<div class="mui-scroll">
    						<a class="mui-control-item mui-active" href="#item1mobile" data-wid="tab-top-subpage-1.html">
    							推荐
    						</a>
    						<a class="mui-control-item" href="#item2mobile" data-wid="tab-top-subpage-2.html">
    							热点
    						</a>
    						<a class="mui-control-item" href="#item3mobile" data-wid="tab-top-subpage-3.html">
    							北京
    						</a>
    						<a class="mui-control-item" href="#item4mobile" data-wid="tab-top-subpage-4.html">
    							社会
    						</a>
    						<a class="mui-control-item" href="#item5mobile" data-wid="tab-top-subpage-5.html">
    							娱乐
    						</a>
    						<!--<a class="mui-control-item" href="#item6mobile" data-wid="tab-top-subpage-6.html">
    							科技
    						</a>-->
    					</div>
    				</div>
    
    			</div>
    

    问题1:顶部滑动条全屏显示

    原因:区域滚动组件默认为absolute定位,全屏显示。
    在这里插入图片描述
    解决方案:所以你需要手动删掉全屏这个类,即 mui-fullscreen


    问题二:没有滚动效果

    原因:若使用区域滚动组件,需手动初始化scroll控件

    解决方案:在需要用到该滚动效果的组件中,引入mui.js文件,并初始化

    import mui from '../../lib/mui/js/mui.js'
    mui('.mui-scroll-wrapper').scroll({
    	deceleration: 0.0005 // flick 减速系数,系数越大,滚动速度越慢,滚动距离越小,默认值0.0006
    })
    

    问题三:初始化完成后依旧会报错:

    Uncaught TypeError: 'caller', 'callee', and 'arguments' properties may not be accessed on strict mode functions or the arguments objects for calls to them
        at Function.Class.extend (mui.js?80c5:3424)
        at eval (mui.js?80c5:3642)
        at eval (mui.js?80c5:4550)
        at Object../src/lib/mui/js/mui.js (app.js:2933)
        at __webpack_require__ (app.js:679)
        at fn (app.js:89)
        at eval (selector.js?type=script&index=0!./src/components/photos/PhotoList.vue:1)
        at Object../node_modules/babel-loader/lib/index.js!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./src/components/photos/PhotoList.vue (app.js:781)
        at __webpack_require__ (app.js:679)
        at fn (app.js:89)
    

    原因:因为mui中的tab-top-webview-main 滑动组件中的js,使用了非严格模式的语法,然而在webpack打包中默认使用了严格模式去打包

    解决方案:

    1.安装包

    npm install --save-dev babel-plugin-syntax-dynamic-import

    2.在.babelrc文件根目录处添加

    "ignore": [ "./src/lib/mui/js/*.js" ]


    问题四:解决完以上问题后就可以滑动了,点击滑动后发现,又开始报错

    [Intervention] Unable to preventDefault inside passive event 
    listener due to target being treated as passive. See <URL>
    

    解决方案:在需要用到该滚动效果的组件中加入样式:

    * {
    		touch-action: pan-y;
    	}
    

    这是chrome为了提高页面流畅度而提出的理念


    问题五:点击滑动问题解决后,底部tab栏又出现不能切换的情况,并且有报错信息

    [Intervention] Unable to preventDefault inside passive 
    event listener due to target being treated as passive. See 
    https://www.chromestatus.com/features/5093566007214080
    

    原因:Tab栏样式也是mui的,与MUI的JS文件冲突
    在这里插入图片描述
    解决方案:将Tab栏mui-tab-item的所有样式复制下来,重新赋予其新的样式类名
    在这里插入图片描述
    在这里插入图片描述


    问题六: 刚进入页面时滑动条无法滑动,要刷新之后才能滑动

    原因:滑动化的时机不对
    在这里插入图片描述

    解决方案:应该将初始化放入mounted中,这时候DOM元素是最新的

    mounted(){
    			// 初始化滑动触键
    			mui('.mui-scroll-wrapper').scroll({
    				deceleration: 0.0005 // flick 减速系数,系数越大,滚动速度越慢,滚动距离越小,默认值0.0006
    			})
    		}
    
    
    展开全文
  • vue2.0引用mui组件

    千次阅读 2019-05-12 22:53:12
    在vue_cli中使用mui的UI插件,我们需要去...文件下载后我们就需要引入vue_cli中,我们打开vue项目的文件,我是放置在src/assets/mui,把dist的文件都放置进去 这三个文件分别是css、icon、js样式文件。我们在v...

    在vue_cli中使用mui的UI插件,我们需要去mui官网下载文件https://github.com/dcloudio/mui   我们点击下载按键,把文件下载下来后,解压选择dist文件,

    文件下载后我们就需要引入vue_cli中,我们打开vue项目的文件,我是放置在src/assets/mui,把dist的文件都放置进去

    这三个文件分别是css、icon、js样式文件。我们在vue中需要在main.js中引入mui.css和mui.js文件,我们需要进行三个操作。

    import mui from './assets/mui/js/mui.min.js' //引入mui的js样式

    import './assets/mui/css/mui.min.css'//mui的css样式    import 后面跟的是自己文件的路径要对哦

    Vue.prototype.mui = mui //给vue原型添加mui的方法

     

    同时给找到.babelrc文件,添加配置语句"ignore":["./src/assets/mui/js/mui.min.js"],  注意那你要填写自己文件的路径。(这是vue的严格模式下配置后能忽略mui.min.js)

    之后我们还需要在 .eslintignore文件填写  添加src/assets/mui/js/mui.min.js(如果你在建项目的时候没有选择eslint 为yes这里就不出现.eslintignore文件)

    我由于配置了webpack,所以需要在webpack中填入,我们可以添加  const webpack = require("webpack")和

    plugins: [

    new webpack.ProvidePlugin({

    mui:"mui",

    "window.mui":"mui"

    })

    ],假如你之前就有了plugins就可以只添加mui就去就好

     

    当我们在main.js引入了之后我们在vue中使用了,我这里选了一个mui的按钮样式,同时添加了一个mui的icon

    效果图如下

    此时我们vue就引入好muiUI组件了,想要的样式就可以去mui官网去查看,把class拿过来就好,

    如果我们需要引用的是mui的js这时候要先初始化mui 同时要在mounted时候才能初始化哦。使用mui的时候我们是用this.mui

    打箭头的地方要注意啊 不然会报错 mui is no define。

    如果你想看mui的例子的话,可以打开他的案例来看,在前面下载的文件夹 路径你可以参考我这个mui-master\mui-master\examples\hello-mui  

    好啦 mui的安装就先到这里了 之后再工作中再慢慢更新mui的坑。

    展开全文
  • 引入顶部选项卡(可左右滑动) 第一个问题:顶部滑动条全屏显示 原因:class属性中有一个mui-fullscreen ...解决方案:在需要用到该滚动效果的组件中,引入mui.js文件,并初始化 import mui from '../....
  • MUI不依赖任何第三方JS库,压缩后的JS和CSS文件仅有100+K和60+K,鉴于之前的很多前端框架(特别是响应式布局的框架),UI控件看起来太像网页,没有原生感觉,因此追求原生UI感觉也是我们的重要目标. MUI是以iOS平台...
  • mui.ttf 字体文件

    2016-08-21 10:01:24
    开源框架mui.js的 mui.ttf 文件。 用于显示小图片的功能。
  • 直接在mui源代码里面粘贴复制grid-default的ul代码,但是我这样子做之后,并不是所期待的三行三列或者两行三列。 原因在于我们的原始html文件最上方,需要 添加一项设置: 就是那个第二行,让我们在模拟手机端...
  • 引用mui.js 方案一# 原因:babel在将js文件转码为ES5时,默认使用严格模式,而在严格模式下,为了安全起见是不能用caller,callee,arguments等属性的。 解决:修改bablerc文件的配置,让项目忽略mui.js的转码,...
  • mui

    2019-09-30 13:51:01
    MUI + SDK 使用笔记: MUI是什么:http://ask.dcloud.net.cn/article/91 /* MUI 使用说明: * * 1.每个用到mui的页面都调用下mui.init。 * 2.如果需要使用大H5+对象,就写到plusReady中,如plus对象。 ...
  • vscode html引用 element ui 和mui 引用 Element UI 一共要引入三个文件 1. vue.js 2. elementui.js 3. elementui.css 要注意的是 引入vue.js 的时候,一定要在elementui.js上面,不然没有效果 <!-- 引入样式 --&...
  • mui中获取本地的json文件

    千次阅读 2018-10-15 18:54:17
    刚遇到的一个小问题,...mui.getJSON('../index.json',null,function(rs){//本地文件相对路径,参数为null,回调函数 if(rs.code == 0) { that.pageData = rs.list; } else { console.log(1) } }); ...
  • MUI 引用阿里字体图标

    千次阅读 2018-03-06 10:18:23
    阿里图标网址:http://www.iconfont.cn/所需要图标都加入购物车之后,点击购物车,下载代码打开解压文件件,复制图示2个文件添加至项目目录,我这里添加至font文件夹修改 iconfont.css :@font-face 修改至一下@font...
  • 基于mui的公共js文件

    千次阅读 2019-01-16 13:53:27
    (因为公司框架是mui,因此部分方法是基于mui的) //将数据存储到本地缓存 function set(type, value) { sessionStorage.setItem(type, value); // localStorage.setItem(type, value); } /...
  • MUI入门

    2020-03-12 22:44:32
    官方地址:...MUI不依赖任何第三方JS库,压缩后的JS和CSS文件仅有100+K和60+K 快速体验: 官方推荐: 推荐使用软件:Hbuilder。 具体创建步骤:选择文件,新建“移动APP”,并选择“Hello MUI”...
  • MUI框架

    千次阅读 2018-05-28 18:37:21
    MUI不依赖任何第三方JS库,压缩后的JS和CSS文件仅有100+K和60+K二、原生UI鉴于之前的很多前端框架(特别是响应式布局的框架),UI控件看起来太像网页,没有原生感觉,因此追求原生UI感觉也是我们的重要目标MUI以iOS...
  • mui入门

    千次阅读 2018-09-26 18:57:54
    最近在做手机版网站,对比了jQuery Mobile,zepto,mui,最后选定mui。 官方文档位置:http://dev.dcloud.net.cn/mui/ui/ 12 注意事项: 1. DOM结构 关于mui页面的dom,你需要知道如下规则。 固定栏靠前 所谓的固定...
  • 注意:默认的图标,图标和标题两行展示,引用阿里的一行展示,解决方法:先加上mui默认的图标类名mui-icon,然后再加上阿里的图标类名,就两行展示了。 说一下引用阿里的图标的步骤: 1、进阿里的图标网站。...
  • mui 入门

    千次阅读 2017-07-31 23:18:28
    1.MUI框架 MUI(Mobile User Interface)是一套基于HTML5的,遵循html5+规范的,中国团队开发的,开源的,用于手机端界面开发的一套框架。mui框架是一个可以方便开发出高性能App的框架,也是目前最接近原生App效果...
  • 1、首先需要全局引用mui.js; mui下载地址:http://dcloud.io/hellomui/; 2、在vue methods中写一个调用方法; downloadIamgeMUI(urls) { let that = this; mui.plusReady(()=> { // 创建下载任务 图片下载...
  • MUI开发初学demo

    2017-06-05 15:47:08
    MUI开发demo,MUI: 最接近原生APP体验的高性能前端框架... 在Hbuilder中,新建HTML文件,选择”含mui的HTML“模板,可以快速生成mui页面模板,该模板默认处理了mui的js、css资源引用
  • 很多时候很多api,比如mui中第三方插件map中有一个setIcon传入的必须是本地的图片文件地址,目前的第三方地图系统任然不支持base64的标注图,所以折腾了一晚之后终于在native.js中找到了将base64转化为图片
  • mui框架

    万次阅读 2017-10-16 10:29:06
    1 MUI介绍 =======1.1 MUI是什么,解决了什么问题。(1)性能和体验的差距,一直是mobile app开发者放弃HTML5的首要原因。 浏览器天生的切页白屏、不忍直视的转页动画、浮动元素的抖动、无法流畅下拉刷新等问题,...
  • MUI框架-01-介绍-准备-创建项目 从0开始快速高效学习 MUI 框架官方文档:http://dev.dcloud.net.cn/mui/ui/ (1)MUI 介绍 MUI 是什么,解决了什么问题?MUI 官方号称最接近原生APP体验的高性能前端框架简单...
  • MUI框架-03-自定义MUI控件样式

    万次阅读 2018-09-23 15:02:04
    MUI框架-03-自定义MUI控件样式 开发请查阅:官方文档:http://dev.dcloud.net.cn/mui/ui/ 如何自定义MUI控件样式 mui 以 iOS 7的 UI 为基础,补充了部分 Android 平台特有的 UI 组件,整体色系比较素雅;但...
  • MUI选择器

    万次阅读 2018-02-27 14:50:47
    可用于弹出单级或多级选择器,poppicker和dtpicker是对picker的具体实现【PopPicker示例】注:PopPicker组件依赖mui.picker.js/.css和mui.poppicker.js/.css,请务必在mui.js/css后中引用。1. 初始化PopPicker组件...
  • Hbulider & MUI

    2019-02-17 23:21:00
    Hbulider ... Hbulider与MUI可快速制作基于HTML5的App ...在Hbuilder中,新建HTML文件,选择”含mui的HTML“模板,可以快速生成mui页面模板,该模板默认处理了mui的js、css资源引用。 2.输入mheader ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 1,444
精华内容 577
关键字:

引用mui文件