解决vue的顶部滑动导航组件的一些问题

一.由于默认此组件全屏显示，所以需要取消全屏显示

解决办法： 去掉id为slider元素的一个类名：mui-fullscreen 即可

二.因为这个组件是js组件，自带滑动行为，所以要引入js文件，并初始化scroll控件

解决办法：
1.先导入mui的js文件
2.在它所在的组件被挂载（mounted钩子函数）时将这个完成这个组件的初始化：

mounted() {
		  // 当 组件中的DOM结构被渲染好并放到页面中后，会执行这个 钩子函数
		  // 如果要操作元素了，最好在 mounted 里面，因为，这里时候的 DOM 元素 是最新的
		  // 2. 初始化滑动控件
		  mui(".mui-scroll-wrapper").scroll({
			deceleration: 0.0005 //flick 减速系数，系数越大，滚动速度越慢，滚动距离越小，默认值0.0006
		  });
		}

三.若初始化后会出现一个错误以下问题：

Uncaught TypeError: 'caller', 'callee', and 'arguments' properties may not be accessed on strict mode

这是因为webpack打包的bundle.js中默认是启用了严格模式，严格模式下不可以随意使用arguments , callee , caller ，而mui这个组件总用到了以上三个参数
解决办法：
1.安装插件 yarn add babel-plugin-transform-remove-strict-mode –D
2. 在.babelrc中添加如下代码：

{
  "presets": ["env", "stage-0"],
  "plugins": [
    "transform-runtime", 
    ["component", 
      [
        {
          "libraryName": "mint-ui",
          "style": true
        }
      ]
    ], 
    "transform-remove-strict-mode"
  ] 
}

四.在滑动时一直出现警告
解决办法：将touch-active属性的值定义为pan-y：

<style lang="scss" scoped>
	* {
	  touch-action: pan-y;
	}
</style>

五.还是滑动不了，也没有报错，试着参考如下代码修改

<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>
				</div>
			</div>