之前在一篇文章上看到BetterScroll可能是目前最好用的移动端滚动插件,所以这次就想试试，滴滴开源的cube-ui组件库里面大多数用到的滑动组件都是基于better-scroll，体验了一下感觉还挺好。为什么没有用cube了？因为个人感觉主题颜色有点丑。所以自己就打算基于better-scroll封装一个vue版本的scroll组件。不说那么多了，立马上图：
想用better-scroll还有另外一个原因，我想自定义上下拉的动画。
想看demo及源码请点击这里。记得给个star哟
自定义指令 vue-finger
包括点击，长按，双击，拖拽移动，多点触控，滑动，旋转，缩放手势
这一块我这边是基于别人的demo改造的，在这些指令里面你可以做很多在移动端手势方面想做的事情。后续我会继续迭代这些指令，制定出体验接近原生的组件，大家要关注我的github哟
移动端适配方案
## rem.js
const baseSize = 32
// 设置 rem 函数
function setRem () {
// 当前页面宽度相对于 750 宽的缩放比例，可根据自己需要修改。
const scale = document.documentElement.clientWidth / 750
// 设置页面根节点字体大小
document.documentElement.style.fontSize = (baseSize * Math.min(scale, 2)) + 'px'
}
// 初始化
setRem()
// 改变窗口大小时重新设置 rem
window.onresize = function () {
setRem()
}
## main.js
import './rem'
还有最后还有一步。对于经常写样式的同学，px转rem是不是感觉很烦。 我这边处理的方式是，在项目根目录新建一个postcss.config.js文件。这样你只需按照设计稿的样式，正常写px就好。运行项目时会自动帮你转成rem。
module.exports = { plugins: { 'autoprefixer': { browsers: ['Android >= 4.0', 'iOS >= 7'] }, 'postcss-pxtorem': { rootValue: 16, propList: ['*'] } } }
如何分情况处理页面置顶
上文有讲到vue-router里面这个方法。
## router.js scrollBehavior (to, from, savedPosition) { // keep-alive 返回缓存页面后记录浏览位置 if (savedPosition && to.meta.keepAlive) { return savedPosition } // 异步滚动操作 return new Promise((resolve) => { setTimeout(() => { resolve({ x: 0, y: 1 }) }, 0) }) },
但是感觉添加页面转场动画后。页面会有回弹。所以我就放弃它了。不添加动画的可以考虑。
我这边用到了better-scroll后就不用担心这个问题。看完better-scroll文档介绍，你就会发现better-scroll就是为移动端运用而生的。
路由懒加载
当打包构建应用时，JavaScript 包会变得非常大，影响页面加载。如果我们能把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，这样就更加高效了。 这是路由懒加载就很重要了。看过官方文档大家应该都会用了，这里我就不介绍了。
// 路由懒加载 const _import_ = file => () => import('./views/' + file + '.vue') routes: [ { path: 'https://www.jb51.net/', name: 'home', component: _import_('Home/Home'), meta: { title: '首页', keepAlive: true } }, ]
终于写完了，以上这些就是我在移动端体验优化的实战。希望能帮到大家。如果往后有什么好的优化方案我会继续更新。谢谢大家的观看。觉得好的点个赞