Vue - 使用mui的 tab-top-webview-main 完成分類滑動欄

使用mui的tab-top-webview-main完成分類滑動欄

兼容問題

1. 和 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;
    }

2. 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
        });
  	}

3. 滑動的時候報警告：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爲了提高頁面的滑動流暢度而新折騰出來的一個東西） http://www.cnblogs.com/pearl07/p/6589114.html
https://developer.mozilla.org/zh-CN/docs/Web/CSS/touch-action

移除嚴格模式

babel-plugin-transform-remove-strict-mode

vue-preview

一個Vue集成PhotoSwipe圖片預覽插件