day7
使用mui的tab-top-webview-main完成分類(lèi)滑動(dòng)欄
兼容問(wèn)題
- 和 App.vue 中的
router-link身上的類(lèi)名mui-tab-item存在兼容性問(wèn)題，導(dǎo)致tab欄失效，可以把mui-tab-item改名為mui-tab-item1，并復(fù)制相關(guān)的類(lèi)樣式，來(lái)解決這個(gè)問(wèn)題；
.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組件第一次顯示到頁(yè)面中的時(shí)候，無(wú)法被滑動(dòng)的解決方案：
- 先導(dǎo)入 mui 的JS文件:
import mui from '../../../lib/mui/js/mui.min.js'
- 在 組件的
mounted事件鉤子中，注冊(cè) mui 的滾動(dòng)事件：
mounted() {
// 需要在組件的 mounted 事件鉤子中，注冊(cè) mui 的 scroll 滾動(dòng)事件
mui('.mui-scroll-wrapper').scroll({
deceleration: 0.0005 //flick 減速系數(shù)，系數(shù)越大，滾動(dòng)速度越慢，滾動(dòng)距離越小，默認(rèn)值0.0006
});
}
- 滑動(dòng)的時(shí)候報(bào)警告：
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為了提高頁(yè)面的滑動(dòng)流暢度而新折騰出來(lái)的一個(gè)東西） http://www.cnblogs.com/pearl07/p/6589114.html
https://developer.mozilla.org/zh-CN/docs/Web/CSS/touch-action
移除嚴(yán)格模式
babel-plugin-transform-remove-strict-mode
vue-preview
一個(gè)Vue集成PhotoSwipe圖片預(yù)覽插件
