本文共 1456 字,大约阅读时间需要 4 分钟。
day7使用mui的tab-top-webview-main完成分类滑动栏兼容问题
和 App.vue 中的 router-link 身上的类名 mui-tab-item 存在兼容性问题,导致tab栏失效,可以把mui-tab-item改名为mui-tab-item1,并复制相关的类样式,来解决这个问题;.mui-bar-tab .mui-tab-item1.mui-active { color: #007aff; } .mui-bar-tab .mui-tab-item1 { display: table-cell; overflow: hidden; width: 1%; height: 50px; text-align: center; vertical-align: middle; white-space: nowrap; text-overflow: ellipsis; color: #929292; } .mui-bar-tab .mui-tab-item1 .mui-icon { top: 3px; width: 24px; height: 24px; padding-top: 0; padding-bottom: 0; } .mui-bar-tab .mui-tab-item1 .mui-icon~.mui-tab-label { font-size: 11px; display: block; overflow: hidden; text-overflow: ellipsis; }tab-top-webview-main组件第一次显示到页面中的时候,无法被滑动的解决方案:先导入 mui 的JS文件:import mui from '../../../lib/mui/js/mui.min.js'在 组件的 mounted 事件钩子中,注册 mui 的滚动事件:mounted() { // 需要在组件的 mounted 事件钩子中,注册 mui 的 scroll 滚动事件 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
解决方法,可以加上* { touch-action: none; } 这句样式去掉。
原因:(是chrome为了提高页面的滑动流畅度而新折腾出来的一个东西) 移除严格模式babel-plugin-transform-remove-strict-modevue-preview一个Vue集成PhotoSwipe图片预览插件转载于:https://blog.51cto.com/13517854/2320564