mui之 scroll採坑

scroll：區域滾動
採坑一：
單純的複製樣式和結構

  <div id="slider" class="mui-slider">
				<div id="sliderSegmentedControl" class="mui-scroll-wrapper mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
					<div class="mui-scroll">
						<a class="mui-control-item mui-active" href="#item1mobile" data-wid="tab-top-subpage-1.html">
							推薦
						</a>
						<a class="mui-control-item" href="#item2mobile" data-wid="tab-top-subpage-2.html">
							熱點
						</a>
						<a class="mui-control-item" href="#item3mobile" data-wid="tab-top-subpage-3.html">
							北京
						</a>
						<a class="mui-control-item" href="#item4mobile" data-wid="tab-top-subpage-4.html">
							社會
						</a>
						<a class="mui-control-item" href="#item5mobile" data-wid="tab-top-subpage-5.html">
							娛樂
						</a>
						</div>

當你滑動的時候，是滑動不了的

其實想想也是，滑動不是js操作的行爲嗎？
翻看文檔，發現需要初始化scroll控件
1 導入 mui.js
import mui from '../../lib/mui/js/mui.min.js'

2 調用官方提供的 方式 去初始化：

繼續刷新頁面

蒙了？ 先翻譯一下是什麼原因
經過我們合理的推測，覺得，可能是 mui.js 中用到了 ‘caller’, ‘callee’, and ‘arguments’ 東西，但是， webpack 打包好的 bundle.js 中，默認是啓用嚴格模式的，所以，這兩者衝突了；
解決方案： 1. 把 mui.js 中的 非嚴格 模式的代碼改掉；但是不現實； 2. 把 webpack 打包時候的嚴格模式禁用掉；
最終，我們選擇了 plan B 移除嚴格模式： 使用這個插件 babel-plugin-transform-remove-strict-mode

npm i babel-plugin-transform-remove-strict-mode -D

在.babelrc進行配置


雖然可以滑動了，但是在其他tabbar有阻斷
原因：
如果要初始化 滑動條，必須要等 DOM 元素加載完畢，所以，我們把 初始化 滑動條 的代碼，搬到了 mounted 生命週期函數中；

mounted(){
    // 組件中dom結構被渲染好，並且已經放到頁面，會執行這個鉤子函數
        mui('.mui-scroll-wrapper').scroll({
	deceleration: 0.0005 //flick 減速係數，係數越大，滾動速度越慢，滾動距離越小，默認值0.0006
});

也說明，要操作元素，最好在mounted裏面，應爲此時的數據是最新的

還有一個小問題，就是滑動的時候，chrome瀏覽器會報黃
添加這個 樣式就ok

* {
  // 用於指定某個區域是否允許用戶操作，以及如何響應用戶操作(比如瀏覽器自帶的滑動，縮放)
  touch-action: pan-x;
}

最終效果圖