MUI scroll顶部滑动条问题

37 篇文章 0 订阅
16 篇文章 0 订阅

在使用webpack打包时,使用Vue和MUI 中的 scroll 和 Tabbar 的时候会出现一些坑!!!

6坑以及解决6坑的方法:
  1. 制作滑动条,不想自己写,想找模板,就用 MUI 中的 tab-top-webview-main.html

  2. 当 html 样式引过来的时候,有一个类必须去掉,要不然他会覆盖整个屏幕,所以需要把 slider区域 的 mui-fullscreen 删除掉。

  3. 上边都做完,发现滑动条还是无法滑动,然后可以去官方文档,发现这是JS组件,需要被初始化
    官方文档

    1. 导入 mui.min.js
    2. 调用官方提供的方式去初始化:
    	mui('.mui-scroll-wrapper').scroll({
    		deceleration: 0.0005 //flick 减速系数,系数越大,滚动速度越慢,滚动距离越小,默认值0.0006
    	});
    
    
  4. 以上都做完之后,发现控制台报错:“Uncaught TypeError: ‘caller’, ‘callee’, and ‘arguments’ properties may not be accessed on strict mode…”
    在这里插入图片描述

    1. 注释导入 mui.js 就没有报错,所以推测,可能是mui.js用到了'caller', 'callee', and 'arguments' 这些东西,但是,webpack 打包好的 xxx.js 文件中,默认启用了严格模式,所以这两者冲突了;
    2. 解决方案:
      1. mui.js 中的 非严格 模式的代码 改掉,但是不现实,毕竟 代码是人家写的!!!!
      2. 把 webpack 打包时候的严格模式禁用掉;
    3. 选择第二种方法:移除严格模式,需要安装使用一个插件
      cnpm i babel-plugin-transform-remove-strict-mode -D
      然后,在.babelrc 这个文件中配置
    		{
     			"plugins": ["transform-remove-strict-mode"]
       		}
    
  5. 以上都做完了,刷新一下页面,终于能滑动了,但是控制台又报错了:Unable to preventDefault inside passive event listener due to target being treated as passive.
    解决方案:
    关于 touch-action 的CSS属性,可以进官网看看!

     //在你的样式中添加 
     
     * {
     	touch-action:pan-x;
     }
    
  6. 这个时候,也可以滑动了,也不报错了,就很开心;唉,还是年轻哈哈;当你重新打开的时候,又不能滑动了,白高兴!!!!!

    1. 分析:当进入页面的时候,滑动条不能正常工作,经分析发现,如果要初始化 滑动条,必须等 DOM 元素加载完,所以,要把 初始化 滑动条 的代码 ,搬到 mounted 生命周期的钩子函数中;
     mounted() {
     	// 当组件中的 DOM 结构被渲染好,并放到页面中后,会执行这个钩子函数
    	//如果要操作元素,最早要在 mounted 中,因为这时候 DOM 元素是最新的
    
    	// 2.初始化滑动控件(放的位置会重要,不能直接放到导入mui.js后面)
    	mui(".mui-scroll-wrapper").scroll({
      	deceleration: 0.0005 //flick 减速系数,系数越大,滚动速度越慢,滚动距离越小,默认值0.0006
    });
    

}
```

注:到这里就做完了!!!!



赠送:
如果你引用了 MUI 的 tabbar 之类的样式了,那么你以上做完,发现切换组件不成功!!!!
因为这里的样式类名和滑动条JS中的代码重名了!!!
解决:

首先打开你引用 tabbar 的部分,有一个类名叫 mui-tab-item ,先从控制台把关于它的所有的样式拷贝到你的样式中,然后重新起一个类名替换它;例如:mui-tab-item-s

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值