快捷導(dǎo)航

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

更新時間：2019年05月20日 11:28:32 作者：xiaotianyi

這篇文章主要介紹了vue 在移動端體驗(yàn)上的優(yōu)化解決方案,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

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

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

自定義 vuex-plugins-loading

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

實(shí)現(xiàn)思路：vuex中注冊一個管理loading的module,通過綁定異步的action，將每個action的loading存在vuex中，這樣我在每個頁面只需要在vuex的store中拿相對應(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

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

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

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

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

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

## 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) {
   // 此時從from頁面跳轉(zhuǎn)到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)
  })
 },

兩個問題

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

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

頁面切換時會有暫時的空白,過渡不正常。

改造后

## 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) {
   // 此時從from頁面跳轉(zhuǎn)到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后,第一個問題可以直接解決。而且不用設(shè)置scrollBehavior，不懂可以去看better-scroll

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

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

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

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

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

想用better-scroll還有另外一個原因，我想自定義上下拉的動畫。

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

自定義指令 vue-finger

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

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

移動端適配方案

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

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

但是感覺添加頁面轉(zhuǎn)場動畫后。頁面會有回彈。所以我就放棄它了。不添加動畫的可以考慮。

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

路由懶加載

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

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

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

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

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: