依依色图片,龙猫多少钱一只,hercyna
去年年底自己搭了一个vue在移动端的开发框架，感觉体验不是很好。上个星期又要做移动端的项目了。所以我花了两天时间对之前的那个开发框架做了以下优化
自定义 vuex-plugins-loading
如果每个页面在数据加载完成前，展示loading。你首先想到的是每个页面设置状态，show和hide状态。但是这样冗余代码太多了，而且自己写的都烦。我之前的react的项目中用到了dva，其中有dva-loading库，之前就有研究过，所以我就用他的思想，自己写一个vuex-loading。
实现思路：vuex中注册一个管理loading的module,通过绑定异步的action，将每个action的loading存在vuex中，这样我在每个页面只需要在vuex的store中拿相对应的action loading就能达到此目的
我要评论
## 核心代码
store.subscribeaction({
before: action => {
if (shouldeffect(action, includes, excludes)) {
store.commit({ type: namespace + '/show', payload: action.type })
}
},
after: action => {
if (shouldeffect(action, includes, excludes)) {
store.commit({ type: namespace + '/hide', payload: action.type })
}
}
})
}
}
使用之前大家可以先了解一下subscribeaction
想安装此插件，请点击这里，记得给个star哟
注意: 使用上述代码,vuex必需为3.1.0版本。因为subscribeaction在3.1.0才新增的
路由切换动画 + keep alive 动态管理缓存组件
之前采用的是全局设置路由切换动画，但是体验效果不是很好，特别是返回列表页，页面会引起回弹，页面切换时会有暂时的空白。
未改造前的，也是参考别人的做法
## app.vue
<transition :name="transitionname">
<keep-alive :include="data">
<router-view></router-view>
</keep-alive>
</transition>
computed: {
// 数据存放在vuex里面
...mapstate({
data: state => {
return state.global.data
}
})
},
methods: {
// 设置keep_alive路由
setkeep_alive (to) {
if (to.meta.keepalive) {
this.$store.dispatch({
type: 'global/setdata',
payload: to.name
})
}
}
},
watch: {
'$route' (to, from) {
// 此时从from页面跳转到to页面
this.setkeep_alive(to)
const routedeep = ['/', '/list', '/detail', '/reservation', '/addcars']
const todepth = routedeep.indexof(to.path)
const fromdepth = routedeep.indexof(from.path)
if (!from.name) {
this.transitionname = 'fold'
return
}
this.transitionname = todepth > fromdepth ? 'fold-left' : 'fold-right'
}
},
## 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)
})
},
两个问题
列表页滑动到一定位置后跳转到详情页，返回列表页页面回弹
原因：原生滚动条的位置是不变的，使用scrollbehavior，根据上述代码可知滚动条会有一个闪烁的过程先置顶，然后滚动到上次保留的位置。
页面切换时会有暂时的空白,过渡不正常。
改造后
## app.vue
<keep-alive :include="data">
<router-view></router-view>
</keep-alive>
computed: {
// 数据存放在vuex里面
...mapstate({
data: state => {
return state.global.data
}
})
},
methods: {
// 设置keep_alive路由
setkeep_alive (to) {
if (to.meta.keepalive) {
this.$store.dispatch({
type: 'global/setdata',
payload: to.name
})
}
}
},
watch: {
'$route' (to, from) {
// 此时从from页面跳转到to页面
this.setkeep_alive(to)
}
},
list.vue
<scroll ref="scroll" class="scroll-home" :scrollbar="scrollbar" :probetype="3" :pulldownrefresh="pulldownrefresh" :pullupload="true" @pullingdown="onrefresh" @scroll="scroll" @pullingup="onload" > <div class="contantview"> </div> </scroll>
1.采用better-scroll后,第一个问题可以直接解决。而且不用设置scrollbehavior，不懂可以去看
2.给页面css添加设置“position:absolute;”，此时页面脱离文档流，不占空间，这样就不会把下一页挤下去，完成平滑过渡。使用better-scroll给页面css添加设置“position:fixed;”。
如果页面布局里面有用到flex布局，一定要给flex组件加一个position为absolute或者fixed的div。
上述代码中已有keep alive 动态管理缓存路由的思路。
better-scroll与vue的最佳实践
之前在一篇文章上看到betterscroll可能是目前最好用的移动端滚动插件,所以这次就想试试，滴滴开源的cube-ui组件库里面大多数用到的滑动组件都是基于better-scroll，体验了一下感觉还挺好。为什么没有用cube了？因为个人感觉主题颜色有点丑。所以自己就打算基于better-scroll封装一个vue版本的scroll组件。不说那么多了，立马上图：
想用better-scroll还有另外一个原因，我想自定义上下拉的动画。
想看demo及源码请点击这里。记得给个star哟
自定义指令 vue-finger
包括点击，长按，双击，拖拽移动，多点触控，滑动，旋转，缩放手势
这一块我这边是基于，在这些指令里面你可以做很多在移动端手势方面想做的事情。后续我会继续迭代这些指令，制定出体验接近原生的组件，大家要关注我的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里面scrollbehavior这个方法。
## 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: '/',
name: 'home',
component: _import_('home/home'),
meta: {
title: '首页',
keepalive: true
}
},
]
终于写完了，以上这些就是我在移动端体验优化的实战。希望能帮到大家。如果往后有什么好的优化方案我会继续更新。谢谢大家的观看。觉得好的点个赞
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持移动技术网。
如对本文有疑问，请在下面进行留言讨论，广大热心网友会与你互动！！ 点击进行留言回复
详解element上传组件before-remove钩子问题解决
vue.js中使用微信扫一扫解决invalid signature问题(完美解决)
网友评论