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;属性样式，从而支持 此元素的 单指水平滑动效果，提高滑动的流畅度；