webapp引导页 html,轻松为 webApp 实现引导页功能 (vue-router + vueg + vue-touch)

使用 vue + vue-router + vueg + vue-touch 轻松实现app引导页的DEMO、教程，本例程也适用于轻松实现轮播图

先来看看最终效果图(live demo)：

一、下载模板和依赖项

$ vue init webpack vue-guide-demo //使用vue-cli下载webpack模板

cli的提示中只安装vue-router就够了： Install vue-router? Yes

Use ESLint to lint your code? No

Setup unit tests with Karma + Mocha? No

Setup e2e tests with Nightwatch? N复制代码

$ cd vue-guide-demo //进入项目目录

$ npm install //安装依赖项

$ npm install vue-touch@next vueg --save //安装vue-touch、vueg，vue-touch@next和vue-touch的区别是前者支持vue2.x

$ npm run dev //运行

二、开始编辑项目文件：

1、编辑src/router/index.js

为了方便管理，导航页采用嵌入路由的方式，即每一个导航页作为path:'/guide'的子路由，我们新建四个页面组件，添加到router中： import Vue from 'vue'

import Router from 'vue-router'

import guide from '@/components/guide'

import guide1 from '@/components/guide1'

import guide2 from '@/components/guide2'

import guide3 from '@/components/guide3'

import guide4 from '@/components/guide4'

Vue.use(Router)

export default new Router({

routes: [{

path: '/guide',

name: 'guide',

component: guide,

children: [{

name:'default',

path:'',

component:guide1

},{

name:'page1',

path: '1',

component: guide1

}, {

name:'page2',

path: '2',

component: guide2

}, {

name:'page3',

path: '3',

component: guide3

}, {

name:'page4',

path: '4',

component: guide4

}]

}]

})复制代码

2、编辑src/main.js

照着vue-touch和vueg的文档做，在头部的import语句后跟上以下的代码： import VueTouch from 'vue-touch'

import vueg from 'vueg'

import 'vueg/css/transition-min.css'

Vue.use(vueg, router,{

tabs:[{ //由于底部的圆点导航类似于tab导航，都是水平转场效果，所以填入这个配置项，可以参考vueg配置项

name:'page1'

},{

name:'page2'

},{

name:'page3'

},{

name:'page4'

}]

})

Vue.use(VueTouch, { name: 'v-touch' })复制代码

3、编辑组件

修改App.vue

export default {

methods: {

onSwipeLeft() {

// router转场后会自动触发vueg的转场特效

switch (this.$route.name) {

case 'default':

case 'page1':

this.$router.push({

name: 'page2'

})

break

case 'page2':

this.$router.push({

name: 'page3'

})

break

case 'page3':

this.$router.push({

name: 'page4'

})

break

}

},

onSwipeRight() {

this.$router.back()

}

}

}

html,

body {

margin: 0;

height: 100%;

}

#app {

font-family: 'Avenir', Helvetica, Arial, sans-serif;

-webkit-font-smoothing: antialiased;

-moz-osx-font-smoothing: grayscale;

color: #2c3e50;

height: inherit;

}

#app>div {

height: inherit;

}

.circle-nav {

position: fixed;

bottom: 10px;

width: 100%;

max-width: inherit;

text-align: center;

padding: 0;

opacity: 0.75;

}

.circle-nav li {

display: inline-block;

width: 7px;

height: 7px;

border: 1px solid #f44336;

border-radius: 50%;

margin: 5px;

}

.nav-current {

background-color: #f44336;

}

复制代码

guide.vue内容：

.view {

min-height: 100%;

text-align: center;

line-height: 100px;

color: rgba(0,0,0,0.5);

}

复制代码

guide(1|2|3|4).vue的内容：

引导页1

export default{

data(){

return {

//由于vueg的嵌套路由默认不启动转场动画，需要在其匹配组件中设置为启用

vuegConfig:{

disable:false

}

}

}

}

div {

background: linear-gradient(to bottom, #c9d6ff, #e2e2e2);

}

复制代码

最后在index.html的head中添加不缩放的配置： 复制代码

到此，我们做了配置路由、编写组件和样式、给vueg做了简单的配置，使用了vue-touch的滑动事件指令，一个引导页功能就完成了。