使用vue2.0 vue-router vuex 類比ios7操作

標籤：data   ejs   使用   bounce   htm   tps   push   mock   document   

其實你也可以，甚至做得更好...

首先看一下效果：用vue2.0實現SPA：類比ios7操作 與 通訊錄實現

　　

　　github地址是：https://github.com/QRL909109/ios7 如果您覺得可以，麻煩給一個star，支援我一下。

　　之前接觸過Angular1.0，React，都只是學點入門，但對於Vue卻覺得很容易上手，不止入門簡單，外掛程式也是很豐富的，腳手架也是便利的很...

項目分析：

1.首屏滑動解鎖，並能移動小圓點

2.主畫面  長按表徵圖抖動，刪除表徵圖，點擊小圓點的主畫面 抖動停止

3.點擊電話表徵圖，進入電話模組

4.進入個人中心：點擊編輯，移入刪除表徵圖，滑動出現刪除；點擊完成，刪除表徵圖消失

5.進入通訊錄：右側固定欄滑動 列表滑動到相應位置（使用better-scroll 外掛程式）

6.進入撥號：撥號與刪除

外掛程式介紹：

vue-router： vue路由外掛程式  vue-router 2.0 中文文檔

vuex： vue狀態管理 vuex 1.0 中文文檔 方便組件共用狀態 

better-scroll： 最佳化滑動效能的外掛程式

lib-flexible： 手淘移動端H5 終端適配

moment： 時間格式化外掛程式

項目布局：

採用手淘的flexible   這裡有學習資源  使用Flexible實現手淘H5頁面的終端適配

要點：

1.根據手機dpr設定不同的scale，font-size (注意ios的dpr會適應變化，而Android的dpr一直為1)

2.整個螢幕寬度預設為10rem，採用750設計稿上下相容，1rem = 75px

3.文字用px寫，分別寫出相容

div{  font-size:12px; }[data-dpr="2"]{  font-size:24px;  }[data-dpr="3"]{  font-size:36px;  }

4.採用flex彈性布局(注意相容高低版本)

 

開始：（挑有用重點講）

1、修改webpack.base.conf.js

利用webpack alias定義別名，方便輸入路徑，根據完整絕對位址

例如：

resolve: {    extensions: [‘‘, ‘.js‘, ‘.vue‘],    fallback: [path.join(__dirname, ‘../node_modules‘)],    alias: {      ‘vue$‘: ‘vue/dist/vue‘,      ‘src‘: path.resolve(__dirname, ‘../src‘),      ‘assets‘: path.resolve(__dirname, ‘../src/assets‘),      ‘components‘: path.resolve(__dirname, ‘../src/components‘),      ‘store‘:path.resolve(__dirname,‘../src/vuex/store‘),      ‘getters‘:path.resolve(__dirname,‘../src/vuex/getters‘),      ‘actions‘:path.resolve(__dirname,‘../src/vuex/actions‘),      ‘mock‘:path.resolve(__dirname,‘../src/mock‘)    }  },

這樣只要在任意位置使用 import ... from actions

webpack將會自動匹配actions的位置，不用再去計算檔案位置，寫出‘../../../actions‘。

 

2、配置路由：在src目錄下建立 route-config.js 

const routes=[   {        path: ‘/main‘,        name: ‘main‘,        meta: {            title: ‘首頁面‘        },        component: resolve => {            require([‘./views/main.vue‘], resolve)        },        children: [            {                path: ‘‘,                name: ‘personal‘,                meta: {                    title: ‘個人收藏‘                },                component: resolve => {                    require([‘./views/phone/personal.vue‘], resolve)                },                children:[                    phone_detail                ]            }         ]    },{       ....     },{       path: ‘*‘,        redirect: {            name: ‘main‘        }    }   ];export default routes 

這裡採用非同步裝置，按需載入，使用webpack的代碼分割功能。

路由機制是採用匹配規則，根據path匹配URL的路徑，從而載入對應的組件。

這裡稍微提一下vue-router 1.0 和 vue-router 2.0 寫法的區別

vue-router1.0 

　　傳遞vue-router執行個體，通過map進行定義路由映射

vue-router2.0

    使用router 構造配置 routes

 

tips: 設定標題列的title

通過vue-router執行個體後的afterEach，to能擷取每個路由的狀態，這時候便能使用document.title = to.meta.title (前提是router-config 裡面有設定meta對象)

 

3、APP.vue結構

考慮到小圓點是所有頁面都存在的，所以結構為router-view載入路由匹配頁面，另外載入小圓點組件。

<template>    <div class="_full">        <!-- app router -->        <transition name="bounce">            <keep-alive>              <router-view></router-view>            </keep-alive>        </transition>        <!--小圓點-->        <topPoint></topPoint>    </div></template>

或許你有疑惑 keep-alive 加在這有什麼用？

keep-alive 會緩衝不活動的組件執行個體，而不是銷毀它們。主要用於保留組件狀態或避免重新渲染

在做“個人收藏”模組遇到很詭異的bug （沒加 keep-alive）

剛開始能刪除資料，但跳轉到其他頁面重新回來後，就不能執行刪除了。

後面一分析才知道，在從其他頁面跳回來後，組件重新渲染，再次請求了列表資料，而頁面的資料卻緩衝著，導致資料不一致。加入keep-alive就能保留組件狀態

 

4、v-touch不相容vue2.0解決方案

本以為應該會有外掛程式支援的，結果沒法找到，只能自己寫簡單指令識別下。(只支援長按 press，向上 swipeup，向下 swipedown，向左swipeleft，向右 swiperight)

使用 v-touch:swiperight="methodFunc"

vue指令 touch 使用bind，

• 　　binding.arg 獲得傳入模式
• 　　el 監聽綁定的事件
• 　　binding.value 獲得傳入的事件

通過對touchstart touchmove touchend 的判斷，執行對應的事件。

 

5、引入better-scroll外掛程式

功能：最佳化滾動，能模仿像原生彈性的效果

使用：需要在外部包含固定高度的容器

 

 

<div ref="scrollWrapper">   <ul>       <li v-for="item in List" class="commit-hook"></li>

   </ul>    </div><script>  import BScroll from ‘better-scroll‘export default{     created(){            this.$nextTick(() => {  //這裡需要非同步                this._initScroll();           })        },    methods: {          _initScroll(){                this.containerScroll = new BScroll(this.$refs.scrollWrapper,{                    click:true   //可點擊                });            }   }}</script>

 

這樣將會添加translate,使用貝茲路徑，達到原生效果。

 

 如果需要即時知道滾動的地區，可以這麼配置：

created(){    this.$nextTick(() => {                this._initScroll();                this._calculateHeight()       })},methods:{   _initScroll(){           this.containerScroll = new BScroll(this.$refs.scrollWrapper, {                probeType: 3            });            this.containerScroll.on(‘scroll‘, (pos)=> {                  this.scrollY = Math.abs(Math.round(pos.y)); //即時擷取Y軸的數值            }) }   _calculateHeight(){                let commitList = this.$refs.commitBox.getElementsByClassName(‘commit-hook‘); //擷取對應的DOM元素                let height = 0;                this.listHeight.push(height)                for (let i = 0; i < commitList.length; i++) {                    let item = commitList[i]                    height += item.clientHeight;                    this.listHeight.push(height)                }      }}computed: {            currentIndex(){                  //即時獲得當前的地區                for (let i = 0; i < this.listHeight.length; i++) {                    let height1 = this.listHeight[i];                    let height2 = this.listHeight[i + 1];                    if (!height2 || (this.scrollY >= height1 && this.scrollY < height2)) {                        return i;                    }                }                return 0;            }}

 

 通過對比 v-for的  index 與 currentIndex 就能即時知道位置了。

 

6、組件間的通訊

可以看看我的另一篇文章 vue2.0--組件通訊(非vuex法) 

主要用到父子 子父 通訊方法，但為了方便項目使用 vuex狀態管理。

 

以上的項目很基礎，練習一遍，便能比我做的更好... 如有缺漏，做不好的地方，歡迎大家指正討論。

如果您覺得有協助，請star一下，給予我更好的支援。

如需轉載，請註明出處。

使用vue2.0 vue-router vuex 類比ios7操作