Simulating IOS7 operations with vue2.0 Vue-router Vuex

actually you can, even do better ...

First look at the effect: using vue2.0 to achieve spa: simulated iOS7 operation and address Book implementation

　　

The GitHub address is: HTTPS://GITHUB.COM/QRL909109/IOS7 If you feel you can, please give me a star to support.

Before contact Angular1.0,react, all just learn to get started, but for Vue but feel very easy to get started, not only easy to get started, plugins are also very rich, scaffolding is also very convenient ...

Project Analysis:

1. Slide the first screen to unlock, and can move small dots

2. The main screen long press the icon jitter, delete the icon, click on the small dots of the main screen jitter stop

3. Tap the phone icon to enter the phone module

4. Enter the Personal center: Click Edit, move to delete icon, swipe to delete, click Done, delete icon disappears

5. Go to Address Book: Right-hand fixed-bar slide list slide to the appropriate location (using the Better-scroll plugin)

6. Incoming dialing: dialing and deleting

Plugin Introduction:

Vue-router:vue routing Plug-in Vue-router 2.0 Chinese documents

Vuex:vue State Management Vuex 1.0 Chinese documents convenient component sharing status

Better-scroll: Plug-in for optimized sliding performance

Lib-flexible: H5 terminal adapter for mobile end of hand

Moment: Time Format plugin

Project layout:

With the flexible of the hand, there are learning resources to use flexible to achieve the end of H5 page adaptation

Points:

1. Set different scale,font-size according to the phone DPR (note that iOS DPR will adapt to change, while Android DPR has been 1)

2. The entire screen width defaults to 10rem, with 750 design is up and down compatible, 1rem = 75px

3. Write the text with PX and write the compatibility separately

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

4. Flexible layout with flex (note compatibility with high and low versions)

Start: (pick a useful point to talk about)

1, Modify the Webpack.base.conf.js

Use Webpack alias to define aliases to facilitate input paths, based on full absolute address

For example:

Resolve: {    extensions: [', '. js ', '. Vue '],    '. /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 ':p ath.resolve (__dirname, ' ... /src/vuex/store '),      ' getters ':p ath.resolve (__dirname, '. /src/vuex/getters '),      ' actions ':p ath.resolve (__dirname, ' ... /src/vuex/actions '),      ' mock ':p ath.resolve (__dirname, ' ... /src/mock ')    }  ,

So as long as you use the import in any location ... from actions

Webpack will automatically match the position of the actions, no need to calculate the file location, write '. /.. /.. /actions '.

2. Configure routing: Create a new route-config.js in the SRC directory

Const routes=[{path:'/main ', Name:' Main ', Meta: {title:' Main Page '}, Component:resolve={require (['./views/main.vue '], resolve)}, children: [{path:‘‘, Name:' Personal ', Meta: {title:' Personal collection '}, Component:resolve={require (['./views/phone/personal.vue '], resolve)}, children:[Phone_detail]} ]},{....},{Path:‘*‘, redirect: {name:' Main '}}];exportdefaultRoutes

This takes the async component, loads on demand, and uses the Webpack code-splitting feature.

The routing mechanism uses a matching rule to load the corresponding component according to the path of the URL that the path matches.

Here's a little mention of the difference between Vue-router 1.0 and Vue-router 2.0.

vue-router1.0

Passing Vue-router instances, defining route mappings through Map

vue-router2.0

Configuring routes with router constructs

tips: Setting the title of the caption bar

By Vue-router instance aftereach,to can get the status of each route, this time can use Document.title = To.meta.title (if Router-config has set meta object)

3. App.vue structure

Considering that the dots are all on the page, the structure loads the route matching page for Router-view and loads the small dot component in addition.

<template>    <div class= "_full" >        <!--app router---        <transition name= "Bounce" >            <keep-alive>              <router-view></router-view>            </keep-alive>        </transition>        <!--small Dots---        <topPoint></topPoint>     </div></template>

Maybe you have doubts. What's the use of keep-alive?

Keep-alive caches inactive component instances, rather than destroying them. Primarily used to preserve component state or avoid re-rendering

In the "personal collection" module encountered a very strange bug (no add keep-alive)

You can delete data at first, but when you go back to another page, you won't be able to delete it.

The latter analysis only knows that after jumping back from another page, the component re-renders, requests the list data again, and the page's data is cached, resulting in inconsistent data. Add keep-alive to preserve component state

4,v-touch incompatible vue2.0 Solution

I thought there should be plug-in support, the results can not be found, only to write their own simple instructions to identify. (Long press only supported, up swipeup, down Swipedown, left Swipeleft, right swiperight)

Use v-touch:swiperight= "Methodfunc"

Vue command touch uses bind,

• Binding.arg getting incoming Mode
• El Listener-bound events
• Binding.value getting an incoming event

The corresponding event is executed by judging the Touchstart touchmove touchend.

5. Introduction of Better-scroll plug-in

Function: Optimize the scrolling, can imitate the effect like the native elasticity

Use: containers that require a fixed height on the outside

<ref= "Scrollwrapper">   <ul>       <v-for= "item in List" class= "Commit-hook"> </li>

   </ul>    </Div><Script>Import Bscroll from'Better-scroll'Exportdefault{created () { This. $nextTick (()= {  //This requires an asynchronous                 This. _initscroll (); })}, methods: {_initscroll () { This. Containerscroll= NewBscroll ( This. $refs. scrollwrapper,{click:true   //can be clicked                }); }   }}</Script>

This will add translate, using Bezier curves, to achieve a native effect.

If you need to know the area of scrolling in real time, you can configure this:

created () { This. $nextTick (() = {                 This. _initscroll ();  This. _calculateheight ()})},methods:{_initscroll () { This. Containerscroll =NewBscroll ( This. $refs. Scrollwrapper, {probetype:3            });  This. Containerscroll.on (' Scroll ', (pos) = = {                   This. scrolly = Math.Abs (Math.Round (POS.Y));//get the value of the y-axis in real time})} _calculateheight () {Let commitlist= This. $refs. Commitbox.getelementsbyclassname (' Commit-hook ');//get the corresponding DOM elementLet 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 () {//get the current region in real time                 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)) {                        returni; }                }                return0; }}

By comparing the index and currentindex of v-for, we can know the position in real time.

6. Communication between components

Can look at my other article vue2.0--component Communication (non-Vuex method)

The main use of parent-child communication methods, but in order to facilitate the project using VUEX State management.

The above project is very basic, practice once, then can do better than I do ... If there are gaps, do not make the place, welcome to correct the discussion.

If you feel the Help, please star, give me better support.

If you want to reprint, please indicate the source.

Simulating IOS7 operations with vue2.0 Vue-router Vuex