MUI
中的滑动条
- 首先导入
mui.js
import mui from '../../lib/mui/js/mui.js'
- 然后在
mounted(){}
中初始化滑动控件
mounted(){ // 当组件中的 DOM 结构被渲染好,并放置好后,就会执行这个钩子函数。
// 2. 初始化滑动控件
mui('.mui-scroll-wrapper').scroll({
deceleration: 0.0005 //flick 减速系数,系数越大,滚动速度越慢,滚动距离越小,默认值0.0006
});
},
-
去除严格模式:安装两个插件
@babel/plugin-transform-modules-commonjs
@babel/plugin-transform-strict-strict-mode
-
去除严格模式:然后在
.babelrc
中添加:"plugins": ["@babel/plugin-transform-modules-commonjs",{"strictMode": false}],
-
在
style
中* { touch-action: pan-y; }
-
由于滑动组件的 JS 中出现底部 tabbar 不能转换,这是由于样式存在了冲突。
- 所以改变
.mui-tab-item
类名,也就是将它的所有样式重新书写一遍(将这个类面下的样式复制出来,然后再将.mui-tab-item
改变,再次带入即可)。
// 该类名解决 tabbar 点击无法切换的问题 // 就是将 .mui-tab-item 改成 .mui-tab-item-lib ,然后再将 app.vue 中的样式 .mui-tab-item 改成 .mui-tab-item-lib .mui-bar-tab .mui-tab-item-lib.mui-active { color: #007aff; } .mui-bar-tab .mui-tab-item-lib { display: table-cell; overflow: hidden; width: 1%; height: 50px; text-align: center; vertical-align: middle; white-space: nowrap; text-overflow: ellipsis; color: #929292; } .mui-bar-tab .mui-tab-item-lib .mui-icon~.mui-tab-label { font-size: 11px; display: block; overflow: hidden; text-overflow: ellipsis; } .mui-bar-tab .mui-tab-item-lib .mui-icon { top: 3px; width: 24px; height: 24px; padding-top: 0; padding-bottom: 0; }
- 所以改变
图片的懒加载
- 图片列表需要使用懒加载结束,我们可以使用 Mint-UI 提供的现成的组件 ‘lazy-load’
- 根据 ‘lazy-load’ 的使用文档,尝试使用。
- 渲染图片列表数据。
vue-preview的使用
- vue-preview 是一个缩略图插件
- 对
msrc
的样式改变在
figure{
display: inline-block;
margin: 10px;
img{
width: 100px;
height: 100px;
}
}
- 像这类没有明确样式的元素中,直接先运行,然后通过检查找样式。
尝试在自己的手机上去进行项目的预览和测试
- 要保证自己的手机可以正常运行;
- 要保证手机和开发项目的电脑在同一个 WiFi 下面,也就是说手机能访问到电脑的 IP
- 打开自己的项目中 package.json 文件中,在 dev 脚本中,添加一个 --host 指令,把当前电脑的 WiFi IP 地址设置为 --host 的指令;
- 查自己电脑的 IP