詳解vue 在移動(dòng)端體驗(yàn)上的優(yōu)化解決方案

去年年底自己搭了一個(gè)vue在移動(dòng)端的開(kāi)發(fā)框架，感覺(jué)體驗(yàn)不是很好。上個(gè)星期又要做移動(dòng)端的項(xiàng)目了。所以我花了兩天時(shí)間對(duì)之前的那個(gè)開(kāi)發(fā)框架做了以下優(yōu)化

• 自定義vuex-plugins-loading
• 路由切換動(dòng)畫 + keep alive 動(dòng)態(tài)管理緩存組件
• better-scroll與vue的最佳實(shí)踐(better-scroll的vue化)
• 自定義指令（vue-finger:包括點(diǎn)擊，長(zhǎng)按，雙擊，拖拽移動(dòng)，多點(diǎn)觸控，滑動(dòng)，旋轉(zhuǎn)，縮放手勢(shì)）
• 移動(dòng)端適配方案
• 如何分情況處理頁(yè)面置頂
• 路由懶加載

自定義 vuex-plugins-loading

如果每個(gè)頁(yè)面在數(shù)據(jù)加載完成前，展示loading。你首先想到的是每個(gè)頁(yè)面設(shè)置狀態(tài)，show和hide狀態(tài)。但是這樣冗余代碼太多了，而且自己寫的都煩。我之前的react的項(xiàng)目中用到了dva，其中有dva-loading庫(kù)，之前就有研究過(guò)，所以我就用他的思想，自己寫一個(gè)vuex-loading。

實(shí)現(xiàn)思路：vuex中注冊(cè)一個(gè)管理loading的module,通過(guò)綁定異步的action，將每個(gè)action的loading存在vuex中，這樣我在每個(gè)頁(yè)面只需要在vuex的store中拿相對(duì)應(yīng)的action loading就能達(dá)到此目的

 ## 核心代碼
  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

想安裝此插件，請(qǐng)點(diǎn)擊這里，記得給個(gè)star喲

注意: 使用上述代碼,vuex必需為3.1.0版本。因?yàn)閟ubscribeAction在3.1.0才新增的

路由切換動(dòng)畫 + keep alive 動(dòng)態(tài)管理緩存組件

之前采用的是全局設(shè)置路由切換動(dòng)畫，但是體驗(yàn)效果不是很好，特別是返回列表頁(yè)，頁(yè)面會(huì)引起回彈，頁(yè)面切換時(shí)會(huì)有暫時(shí)的空白。

未改造前的，也是參考別人的做法

## app.vue
 <transition :name="transitionName"> 
  <keep-alive :include="data">
    <router-view></router-view>
  </keep-alive>
 </transition>
 
 computed: {
  // 數(shù)據(jù)存放在vuex里面
  ...mapState({
   data: state => {
    return state.global.data
   }
  })
 },
 methods: {
  // 設(shè)置Keep_alive路由
  setKeep_alive (to) {
   if (to.meta.keepAlive) {
    this.$store.dispatch({
     type: 'global/setData',
     payload: to.name
    })
   }
  }
 },
 watch: {
  '$route' (to, from) {
   // 此時(shí)從from頁(yè)面跳轉(zhuǎn)到to頁(yè)面
   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 返回緩存頁(yè)面后記錄瀏覽位置
  if (savedPosition && to.meta.keepAlive) {
   return savedPosition
  }
  // 異步滾動(dòng)操作
  return new Promise((resolve) => {
   setTimeout(() => {
    resolve({ x: 0, y: 1 })
   }, 0)
  })
 },

兩個(gè)問(wèn)題

列表頁(yè)滑動(dòng)到一定位置后跳轉(zhuǎn)到詳情頁(yè)，返回列表頁(yè)頁(yè)面回彈

原因：原生滾動(dòng)條的位置是不變的，使用scrollBehavior，根據(jù)上述代碼可知滾動(dòng)條會(huì)有一個(gè)閃爍的過(guò)程先置頂，然后滾動(dòng)到上次保留的位置。

頁(yè)面切換時(shí)會(huì)有暫時(shí)的空白,過(guò)渡不正常。

改造后

## app.vue
<keep-alive :include="data">
 <router-view></router-view>
</keep-alive>
computed: {
  // 數(shù)據(jù)存放在vuex里面
  ...mapState({
   data: state => {
    return state.global.data
   }
  })
 },
 methods: {
  // 設(shè)置Keep_alive路由
  setKeep_alive (to) {
   if (to.meta.keepAlive) {
    this.$store.dispatch({
     type: 'global/setData',
     payload: to.name
    })
   }
  }
 },
 watch: {
  '$route' (to, from) {
   // 此時(shí)從from頁(yè)面跳轉(zhuǎn)到to頁(yè)面
   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后,第一個(gè)問(wèn)題可以直接解決。而且不用設(shè)置scrollBehavior，不懂可以去看better-scroll

2.給頁(yè)面CSS添加設(shè)置“position:absolute;”，此時(shí)頁(yè)面脫離文檔流，不占空間，這樣就不會(huì)把下一頁(yè)擠下去，完成平滑過(guò)渡。使用better-scroll給頁(yè)面CSS添加設(shè)置“position:fixed;”。

如果頁(yè)面布局里面有用到flex布局，一定要給flex組件加一個(gè)position為absolute或者fixed的div。

上述代碼中已有keep alive 動(dòng)態(tài)管理緩存路由的思路。

better-scroll與vue的最佳實(shí)踐

之前在一篇文章上看到BetterScroll可能是目前最好用的移動(dòng)端滾動(dòng)插件,所以這次就想試試，滴滴開(kāi)源的cube-ui組件庫(kù)里面大多數(shù)用到的滑動(dòng)組件都是基于better-scroll，體驗(yàn)了一下感覺(jué)還挺好。為什么沒(méi)有用cube了？因?yàn)閭€(gè)人感覺(jué)主題顏色有點(diǎn)丑。所以自己就打算基于better-scroll封裝一個(gè)vue版本的scroll組件。不說(shuō)那么多了，立馬上圖：

想用better-scroll還有另外一個(gè)原因，我想自定義上下拉的動(dòng)畫。

想看demo及源碼請(qǐng)點(diǎn)擊這里。記得給個(gè)star喲

自定義指令 vue-finger

包括點(diǎn)擊，長(zhǎng)按，雙擊，拖拽移動(dòng)，多點(diǎn)觸控，滑動(dòng)，旋轉(zhuǎn)，縮放手勢(shì)

這一塊我這邊是基于別人的demo改造的，在這些指令里面你可以做很多在移動(dòng)端手勢(shì)方面想做的事情。后續(xù)我會(huì)繼續(xù)迭代這些指令，制定出體驗(yàn)接近原生的組件，大家要關(guān)注我的github喲

移動(dòng)端適配方案

## rem.js
const baseSize = 32
// 設(shè)置 rem 函數(shù)
function setRem () {
 // 當(dāng)前頁(yè)面寬度相對(duì)于 750 寬的縮放比例，可根據(jù)自己需要修改。
 const scale = document.documentElement.clientWidth / 750
 // 設(shè)置頁(yè)面根節(jié)點(diǎn)字體大小
 document.documentElement.style.fontSize = (baseSize * Math.min(scale, 2)) + 'px'
}
// 初始化
setRem()
// 改變窗口大小時(shí)重新設(shè)置 rem
window.onresize = function () {
 setRem()
}
## main.js
import './rem'

還有最后還有一步。對(duì)于經(jīng)常寫樣式的同學(xué)，px轉(zhuǎn)rem是不是感覺(jué)很煩。 我這邊處理的方式是，在項(xiàng)目根目錄新建一個(gè)postcss.config.js文件。這樣你只需按照設(shè)計(jì)稿的樣式，正常寫px就好。運(yùn)行項(xiàng)目時(shí)會(huì)自動(dòng)幫你轉(zhuǎn)成rem。

module.exports = {
 plugins: {
  'autoprefixer': {
   browsers: ['Android >= 4.0', 'iOS >= 7']
  },
  'postcss-pxtorem': {
   rootValue: 16,
   propList: ['*']
  }
 }
}

如何分情況處理頁(yè)面置頂

上文有講到vue-router里面scrollBehavior這個(gè)方法。

## router.js
scrollBehavior (to, from, savedPosition) {
  // keep-alive 返回緩存頁(yè)面后記錄瀏覽位置
  if (savedPosition && to.meta.keepAlive) {
   return savedPosition
  }
  // 異步滾動(dòng)操作
  return new Promise((resolve) => {
   setTimeout(() => {
    resolve({ x: 0, y: 1 })
   }, 0)
  })
 },

但是感覺(jué)添加頁(yè)面轉(zhuǎn)場(chǎng)動(dòng)畫后。頁(yè)面會(huì)有回彈。所以我就放棄它了。不添加動(dòng)畫的可以考慮。

我這邊用到了better-scroll后就不用擔(dān)心這個(gè)問(wèn)題?？赐阞etter-scroll文檔介紹，你就會(huì)發(fā)現(xiàn)better-scroll就是為移動(dòng)端運(yùn)用而生的。

路由懶加載

當(dāng)打包構(gòu)建應(yīng)用時(shí)，JavaScript 包會(huì)變得非常大，影響頁(yè)面加載。如果我們能把不同路由對(duì)應(yīng)的組件分割成不同的代碼塊，然后當(dāng)路由被訪問(wèn)的時(shí)候才加載對(duì)應(yīng)組件，這樣就更加高效了。 這是路由懶加載就很重要了?？催^(guò)官方文檔大家應(yīng)該都會(huì)用了，這里我就不介紹了。

// 路由懶加載
const _import_ = file => () => import('./views/' + file + '.vue')

routes: [
  {
   path: '/',
   name: 'home',
   component: _import_('Home/Home'),
   meta: {
    title: '首頁(yè)',
    keepAlive: true
   }
  },
]

終于寫完了，以上這些就是我在移動(dòng)端體驗(yàn)優(yōu)化的實(shí)戰(zhàn)。希望能幫到大家。如果往后有什么好的優(yōu)化方案我會(huì)繼續(xù)更新。謝謝大家的觀看。覺(jué)得好的點(diǎn)個(gè)贊

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持億速云。