精华内容
下载资源
问答
  • 因项目的需要,采用了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 '../....

    引入顶部选项卡(可左右滑动)
    在这里插入图片描述
    第一个问题:顶部滑动条全屏显示
    原因:class属性中有一个

    mui-fullscreen
    解决方法:删除mui-fullscreen即可


    问题二:没有滚动效果

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

    解决方案:一定要在全局main.js中引入mui.js

    import mui from '../../lib/mui/js/mui.js'
    Vue.prototype.mui=mui(不写这个会报错)
    然后在用到mui的组件中写:
    mounted(){
    this.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文件添加

    "plugins": ["transform-remove-strict-mode"]

    注意:一定要先删除"transform-vue-jsx","transform-runtime",否则不起作用


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

    [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
    			})
    		}
    

    原文链接:https://blog.csdn.net/qq_43633937/article/details/90676485

    展开全文
  • MUI不依赖任何第三方JS库,压缩后的JS和CSS文件仅有100+K和60+K,鉴于之前的很多前端框架(特别是响应式布局的框架),UI控件看起来太像网页,没有原生感觉,因此追求原生UI感觉也是我们的重要目标. MUI是以iOS平台...
  • 直接在mui源代码里面粘贴复制grid-default的ul代码,但是我这样子做之后,并不是所期待的三行三列或者两行三列。 原因在于我们的原始html文件最上方,需要 添加一项设置: 就是那个第二行,让我们在模拟手机端...
  • MUI 引用阿里字体图标

    千次阅读 2018-03-06 10:18:23
    阿里图标网址:http://www.iconfont.cn/所需要图标都加入购物车之后,点击购物车,下载代码打开解压文件件,复制图示2个文件添加至项目目录,我这里添加至font文件夹修改 iconfont.css :@font-face 修改至一下@font...
  • 1、首先需要全局引用mui.js; mui下载地址:http://dcloud.io/hellomui/; 2、在vue methods中写一个调用方法; downloadIamgeMUI(urls) { let that = this; mui.plusReady(()=> { // 创建下载任务 图片下载...
  • Hbulider & MUI

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

    2017-06-05 15:47:08
    MUI开发demo,MUI: 最接近原生APP体验的高性能前端框架... 在Hbuilder中,新建HTML文件,选择”含mui的HTML“模板,可以快速生成mui页面模板,该模板默认处理了mui的js、css资源引用
  • MUI 学习一

    2018-10-19 14:27:41
    在Hbuilder中,新建HTML文件,选择”含mui的HTML“模板,可以快速生成mui页面模板,该模板默认处理了mui的js、css资源引用。 2.输入mheader 顶部标题栏是每个页面都必需的内容,在Hbuilder中输入mheader,可以快速...
  • 1、下载引用矢量图 1.打开阿里矢量图 官网 https://www.iconfont.cn/ 2.搜索需要的图标,加入购物车,增加入库, 3.点击 购物车图标,增加至项目,没项目就新建项目, 4.在上方 切换为 Symbol 代码,然后点击下载到...
  • Uncaught ReferenceError: mui is not defined,一开始使用的官网的例子,然后自己复制了一个,只选取了其中一个功能,发现引用mui.js自动添加了一个../js/mui.min.js导致的报错,所以错误很明显,就是说没找到这个文件,...
  • mui.previewimage的图片预览

    千次阅读 2019-04-17 10:00:21
    先在文件末端中引用mui.previewimage.js/ mui.zoom.js这二个脚本 再在文件头部加入mui.previewimage.css/mui.css这两个样式文件 2.在img标签中加入 data-preview-src="" data-preview-group="1" 如: <img ...
  • MUI中文文档及包含demo

    2017-06-05 15:49:40
    MUI中文文档及demo,MUI: 最接近原生APP体验的高性能前端框架... 在Hbuilder中,新建HTML文件,选择”含mui的HTML“模板,可以快速生成mui页面模板,该模板默认处理了mui的js、css资源引用
  • mui自定义图标

    2017-04-06 15:48:45
    mui自定义图标 1、登陆阿里巴巴矢量图标库选择自己想要的图标 2、选择下载代码 3、下载解压后选择标红的两个文件引入 4、CSS保留图片上的即可,要将ttf引入。注意后面要分号 5、在页面引用样式即可。
  • mui的picker组件填坑

    2019-02-11 17:34:00
    在公司项目用到mui,vue进行开发 import mui from './...import './assets/js/mui.picker.min.js'是没用的因为mui引用的是静态文件所以在mui.picker.min.js中的mui是undefine的 需要在mui.picker.min.js最顶部...
  • mui mui-icon-extra的使用

    千次阅读 2018-08-30 18:56:43
    首先引用css文件 &amp;amp;amp;amp;lt;link rel=&amp;amp;amp;quot;stylesheet&amp;amp;amp;quot; type=&amp;amp;amp;quot;text/css&amp;amp;amp;quot; href=&amp;amp;amp;quot;../css/...
  • 例如项目中使用app.js文件做如下定义: //定义变量 (function($){ window.dog = {}; })(mui);...接着在html文件中的script标签中要使用上面定义的变量与函数,只需要在html文件引用上面的app.js文件
  • mui picker设置默认值

    2019-11-05 17:01:40
    js文件引用 <script type="text/javascript" src="js/mui.min.js"></script> <script type="text/javascript" src="js/mui.picker.js" ></script> <script type="text/javascript" src=...
  • MUI中的疑难杂症

    千次阅读 2016-10-18 16:18:00
    MUI弹出框多次弹出?poppicker无效?引用文件运行失败?mui.fire传值无效?修改动态css?Slider控件跳转到指定项?
  • 引用mui.js之后 发现icon 图标是没出来了,原因很简单,我还少放了一个字体文件进行项目。 mui.ttf (mui的 字体文件) 然后就事放在哪里的问题了 直接看图吧 也就是说要新建一个跟mui.min.css cs...
  • 前 言 鉴于之前的很多前端框架(特别是响应式布局的框架),UI控件看起来太...在Hbuilder中,新建HTML文件,选择”含mui的HTML“模板,可以快速生成mui页面模板,该模板默认处理了mui的js、css资源引用。 2.输入mheade
  • Vue项目上使用MUI

    千次阅读 2019-07-26 15:32:32
    MUI是一款轻量级的APPUI样式框架,官网地址:...但是需要注意的是,它在npm下是不支持安装的,所以要想在项目中使用它,我们就需要在Gihub上下载,之后将它的dist文件夹下的文件放在项目的第三方引用包文件夹下:....
  • 从代码风格看,该class应该是mui官方封装的样式,而官方的css包括mui.css及mui.min.css,最后定位找到mui.css中设置了该样式,而且该文件在对应文件中也引用了,那么确定就是改这里了,将颜色码值修改为目标值即可。...
  • mui点击小图放大预览

    千次阅读 2018-10-08 17:43:01
    引用css文件 &lt;link rel="stylesheet" href="css/imageview.css" /&gt; &lt;link rel="stylesheet" href="css/mui.imageviewer.css" /&gt; 引用js...
  • 最近在项目中引用mui的图片预览插件,但是长按预览图片时没有反应,既不能下载图片也不能识别图中的二维码,直接贴上我的解决方法 1.修改mui.previewimage.js文件mui-zoom-scroller替换为mui-scroller 注意...

空空如也

空空如也

1 2 3 4
收藏数 72
精华内容 28
关键字:

引用mui文件