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;
}
最终效果图