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;
}

最终效果图

mui之 scroll采坑相关推荐

iOS 微信SDK1.8.6后需要UniversalLink解决方案及采坑记录
项目最初因审核原因,一直使用iOS原生分享, 最近因项目需求要求, 接入微信分享, 以为和原来的没有区别, 但是接入时才发现改动的地方还是挺多的, 主要是需要配置UniversalLink和提包时的一 ...
H5拍照、预览、压缩、上传采坑记录
H5拍照.预览.压缩.上传采坑记录公司项目前段时间需要实现手机拍照上传的功能,本来以为用createObjectURL和canvas可以很轻松的实现,结果发现问题多多,特此记录下来. DEMO预览( ...
【TP3.2】模板 select选项采坑
1.TP3.2 模板 select 下拉框采坑 <div class="form-item"><label class="item-label" ...
MySQL单表数据量过千万，采坑优化记录，完美解决方案
MySQL单表数据量过千万,采坑优化记录,完美解决方案参考文章: (1)MySQL单表数据量过千万,采坑优化记录,完美解决方案 (2)https://www.cnblogs.com/ExMan/p/ ...
VS2015+MySql+EF6采坑经验总结
原文:VS2015+MySql+EF6采坑经验总结背景:VS2015+MySql+EF6(DB First) 采坑顺序:按照以前的记忆,操作依次如下: 1,安装 MySQL Connector/NE ...
mysql8.0.19.0_分享MySql8.0.19 安装采坑记录
上篇文章给大家介绍了MySql8.0.19 安装过程,需要的朋友可以点击查看.https://www.jb51.net/article/178988.htm 1.ERROR 1820 (HY000): ...
bootstrap-select采坑
bootstrap-select采坑 1.class="selectpicker" 普通的下拉框功能 2.title="请选择城市名称" title的作用与pa ...
Taro小程序采坑记
Taro,京东凹凸实验室出品的适配多端的一个框架, Taro 是一套遵循 React 语法规范的多端开发解决方案.现如今市面上端的形态多种多样,Web.React-Native.微信小程序等各种端 ...
mysql8.0依赖_分享MySql8.0.19 安装采坑记录
上篇文章给大家介绍了MySql8.0.19 安装过程,需要的朋友可以点击查看.https://www.jb51.net/article/178988.htm 1.ERROR 1820 (HY000): ...

mui之 scroll采坑

mui之 scroll采坑相关推荐

最新文章

热门文章