Vue--mui-- 頂部滑動條實例

**## 實現圖片分享列表中頂部的滑動區域**

\1. 借助於 MUI 的 tab-top-webview-main.html 控件來實現

\2. 當拿到 UI 代碼片段之后，需要把 mui-fullscreen 去掉

--因為這個屬性是鋪滿整個界面，遮蓋住界面

\3. 當頁面布局沒有大問題之后，發現無法實現滑動效果，此時，需要使用官方推薦的形式，去初始化一下控件,具體初始化的方式，參考官方文檔:http://dev.dcloud.net.cn/mui/ui/#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">
            <span 
                  :class="['mui-control-item', item.id === 0 ? 'mui-active' : '' ]" 
                  v-for="item in category" 
                  :key="item.id"
                  @tap="getPhotoByCategory(item.id)">
                {{ item.title }}
            </span>
        </div>
    </div>

</div>

 

  :class="['mui-control-item', item.id === 0 ? 'mui-active' : '' ]" 

這個屬性----作用--一進界面選中默認第一個標簽值

 

// 1.1導入 mui 的JS文件， 這樣，就可以使用 mui 來初始化 滑動控件了
import mui from "../../../lib/mui/js/mui.js";

## 當在項目中引入了MUI的JS文件報錯的問題：

> 報錯信息：Uncaught TypeError: 'caller', 'callee', and 'arguments' properties may not be accessed on strict mode functions or the arguments objects for calls to them

\1. 分析問題的原因：

+ webpack 打包出來的 bundle.js 中，默認啟用了嚴格模式

+ 在項目中，import 導入的 mui.js 中，使用了 callee caller 這些特性， 但是這些特性在嚴格模式中不支持，會報錯；

+ 經過分析：發現，關閉webpack的嚴格模式，更容易一些，因為不再需要修改mui.js的源代碼了；

+ 如何關閉webpack的嚴格模式呢？使用一個webpack的插件：https://github.com/genify/babel-plugin-transform-remove-strict-mode

下載插件：npm install babel-plugin-trasform-remove-strict-mode

在babelrc文件中導入

transform-remove-strict-mode

{

"plugins": ["transform-runtime", "transform-remove-strict-mode"],

"presets": ["env", "stage-0"]

}

 

\1. 主要原因：需要在mounted鈎子函數中來初始化

\2. 因為，如果當前的 圖片分享列表組件，還沒有掛載到頁面上，那么，調用mui() 方法 初始化組件是沒有任何意義的；因為此時頁面上沒有任何的元素；

　解決辦法在mounted生命周期里初始化

  // 當組件中的DOM結構被渲染好並放到頁面中后，會執行這個鈎子函數

　1.2//初始化控件

  mounted() {
    // 當此鈎子函數執行的時候，我們才可以進行控件或插件的初始化工作；
    mui(".mui-scroll-wrapper").scroll({
      deceleration: 0.0005 //flick 減速系數，系數越大，滾動速度越慢，滾動距離越小，默認值0.0006
    });
  }

<style lang="scss" scoped>
.mui-slider {
  touch-action: pan-x;
}

　　

## 如何移除滑動區域的警告問題

\1. 為 mui-slider 類樣式，添加，touch-action: pan-x;屬性樣式，從而支持 此元素的 單指水平滑動效果，提高滑動的流暢度；