运维开发网

vue使用mui遇到的陷阱及其解决方案

运维开发网 https://www.qedev.com 2022-04-29 15:02 出处:网络
这篇文章主要介绍了vue使用mui遇到的坑及解决,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

这篇文章主要介绍了vue使用mui遇到的坑及解决,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教


使用mui遇到的坑记录

主要用webpack打包工具和mui,mint ui,其中mui有很多坑,这里有记录。

首先,使用mui的选项卡组件制作底部选项卡,如下所示


是的,样式是可以的,但是当稍后发现切换选项时,将会报告一个错误:由于目标被视为被动,无法防止被动事件侦听器内部的默认,如下所示


不过这个错误不会影响操作,但是我有强迫症。查了一下资料,发现是触控事件无法监听preventDefault的问题,也就是触发触控事件时导致的问题。你可以简单的在通用选择器中添加一个样式touch-action:none,结果发现成功解决了。

之后,根据需求,你需要一个横向滚动的导航条,类似这样的。


你可以要求区域滚动。mui好心地给我们提供了这个组件。当然,目前这个横滚的例子好像还没有在官网上,我们需要下载官方文档。这个案例可以在https://github.com/dcloudio/mui. github网站上找到


路径如图所示,双击打开即可。


废话不多说,然后官方要求加载js文件,ok直接介绍,然后我用webpack打包后发现了错误。

未捕获的类型错误:lsquocallerrsquo,lsquocalleersquo,和lsquoargumentsrsquo在严格模式下不能访问属性



所以我们查阅资料后发现,webpack默认使用js的严格模式,但有些mui的并不严格,所以需要对其进行修改,安装babel包,进入。添加代码的babelrc文件。



transform-remove-strict-mode

解决问题后,需要指定初始滚动位置。根据官方文档,你需要使用scrollTo(x,y,time)函数。好,直接抄。问题来了。


未捕获的类型错误:(0,_ mu imin 2 . default)(hellip;).卷轴(hellip).scrollTo不是一个函数


找了半天资料,发现应该是用在挂载的钩子函数里,因为在这之前,修改过的组件还没有完全渲染好,不可能放在created里(我大部分时间习惯在created里处理业务)。

可是,问题又来了,我的头快要爆炸了。设置好初始滚动位置后,我发现空滑动时变成了白色。后来发现scrollTo的参数要求数值类型,但我给了它一个字符串类型,所以可以用parseInt转换。

随着我的内容越来越多,出现了滚动条。后来发现手机上不能上下滚动,只能左右滚动以前的导航栏组件。后来发现之前设置的touch-action可以设置多种属性,于是找到了属性pan-y,用来启用单指垂直平移手势。设置好之后,我发现我可以上下滚动,而没有以前的“无法”的错误。

没错,问题又来了。我点了最下面的选项卡,发现无法切换。查阅资料后发现是因为类名mui-tab-item的冲突。



mui的js冲突了,有2种解决方法


方法1

复制mui-tab-item的样式,然后更改类名。可以更改mui-tab-item-s,不容易混淆。


方法2

将以下代码添加到主组件(通常是应用程序组件)


mounted() { mui('body').on('tap', 'a', function () { document.location.href = this.href; }); }

请注意,它必须在已安装的挂钩功能中使用。

还有一个小问题,vue的滚动事件问题。如果在父容器中设置了overflow:hidden,则使用onscroll绑定事件将无效。如果不想更改父容器的溢出属性,可以使用

addEventListener('scroll',function(){},true)

请注意,添加true参数表示捕获模式(有关此函数的详细信息,请参考事件冒泡)。

到目前为止,发现的问题都解决了。

以上个人经验,希望能给你一个参考,也希望你能支持一下搜源网。


0

精彩评论

暂无评论...
验证码 换一张
取 消