您的位置: 首页  >  文章  >  vue在引用mui.js文件时会遇到的各种问题

vue在引用mui.js文件时会遇到的各种问题

分类: 文章 • 2023-12-06 09:55:28

引入的样式如下：

<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定位，全屏显示。
vue在引用mui.js文件时会遇到的各种问题
解决方案：所以你需要手动删掉全屏这个类，即 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文件冲突
vue在引用mui.js文件时会遇到的各种问题
解决方案：将Tab栏mui-tab-item的所有样式复制下来，重新赋予其新的样式类名
vue在引用mui.js文件时会遇到的各种问题
vue在引用mui.js文件时会遇到的各种问题

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

原因：滑动化的时机不对
vue在引用mui.js文件时会遇到的各种问题

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

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

相关推荐