博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
前端与移动开发之vue-day7
阅读量:6096 次
发布时间:2019-06-20

本文共 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-mode
vue-preview
一个Vue集成PhotoSwipe图片预览插件

转载于:https://blog.51cto.com/13517854/2320564

你可能感兴趣的文章
Heritrix maven
查看>>
解决Lync联盟用户之间只能IM聊天不能进行A/V呼叫问题
查看>>
java Log日志规范
查看>>
Linux系统日常管理
查看>>
深入理解PHP中的Session和Cookie
查看>>
Apache 日志分析
查看>>
第一期openstack远程培训10月10日开课(来晚就没有了)
查看>>
【Git入门之四】操作项目
查看>>
老男孩教育每日一题-第107天-简述你对***的理解,常见的有哪几种?
查看>>
Python学习--time
查看>>
CentOS7.0+PHP5.6+Nginx+Mysql5.7环境安装
查看>>
listview当选中某一个item时设置背景色其他的不变
查看>>
Confluence 6 针对站点维护使用只读模式
查看>>
聊聊你可能误解的Kubernetes Deployment滚动更新机制
查看>>
详解coredump
查看>>
bash脚本:break和continue
查看>>
Ajax跨域问题解决
查看>>
docker on CentOS 7.0
查看>>
python课程第二周 内置数据结构——列表和元组
查看>>
golang beego crud
查看>>