文章插图
使用mui的tab-top--main完成分类滑动栏 兼容问题 和 App.vue 中的 -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--main组件第一次显示到页面中的时候，无法被滑动的解决方案：
import mui from '../../../lib/mui/js/mui.min.js' mounted() {// 需要在组件的 mounted 事件钩子中，注册 mui 的 scroll 滚动事件mui('.mui-scroll-wrapper').scroll({deceleration: 0.0005 //flick 减速系数，系数越大，滚动速度越慢，滚动距离越小，默认值0.0006});}滑动的时候报警告： toeventdue tobeingas . See
解决方法，可以加上* { touch-action: pan-y; } 这句样式去掉 。原因：（是为了提高页面的滑动流畅度而新折腾出来的一个东西）
.vue