项目github地址:https://github.com/ailan0601/weex/tree/dev
项目结构
入口文件app.js:
/* weex initialized here, please do not move this line */
//导入路由文件
// 导入一个跟组件
import foo from '@/router.vue'
const {
router
} = require('./router')
/* eslint-disable no-new */
new Vue(Vue.util.extend({
el: '#root',
router
}, foo))
//制定一个路由入口
router.push('index')
路由文件router.js
import Vue from 'vue'
/* global Vue */
// 导入路由模块
import Router from 'vue-router'
// 引入组件
import index from '@/components/index.vue'
import car from '@/components/car.vue'
import my from '@/components/my.vue'
//让vue使用router当做自己的路由
Vue.use(Router)
//创建一个路由对象并输出
export const router = new Router({
routes: [{
path: '/index',
name: 'index',
component: index
}, {
path: '/car',
name: '/car',
component: car
}, {
path: '/my',
name: 'my',
component: my
}]
})
主页router.vue
<template>
<div class="wrapper">
<div class="header">
<text class="headerword">{{header}}</text>
</div>
<div class="nav">
<text
@click="jump('index')"
:class="[selectpath==='index'?'nav-item-selected':'nav-item-normal']"
>主页</text>
<text
@click="jump('car')"
:class="[selectpath==='car'?'nav-item-selected':'nav-item-normal']"
>购物车</text>
<text @click="jump('my')" :class="[selectpath==='my'?'nav-item-selected':'nav-item-normal']">我的</text>
</div>
<router-view class="template"></router-view>
</div>
</template>
<script>
export default {
data () {
return {
header: '今日上新',
selectpath: 'index'
}
},
methods: {
jump (e) {
switch (e) {
case 'index': this.header = "今日上新"; break;
case 'car': this.header = "购物车"; break;
case 'my': this.header = "我的"; break;
}
this.selectpath = e;
this.$router.push(e);
}
}
}
</script>
<style scoped="scoped">
.wrapper {
width: 750px;
}
.header {
width: 750px;
height: 68px;
}
.headerword {
height: 68px;
font-size: 50px;
border-bottom: 1px solid black;
text-align: center;
}
.nav {
display: flex;
flex-direction: row;
justify-content: space-around;
width: 750px;
height: 88px;
position: fixed;
bottom: 0px;
z-index:99;
background: white;
}
.template {
height: 1134px;
top: 0px;
bottom: 88px;
left: 0px;
right: 0px;
}
.nav-item-selected {
width: 250px;
color: yellowgreen;
text-align: center;
height: 88px;
line-height: 88px;
font-size: 40px;
}
.nav-item-normal {
width: 250px;
color: black;
text-align: center;
height: 88px;
line-height: 88px;
font-size: 40px;
}
</style>
组件index.vue:
<template>
<div class="content">
<list class="list" @loadmore='fetch' >
<refresh class="refresh" @refresh="onrefresh" :display="refreshing?'show':'hide'">
<text class="indicator">下拉刷新</text>
</refresh>
<header>
<text class="header">标题</text>
</header>
<cell class="cell" v-for="n in lists" :key="n.index">
<image class="image" :src="n.images"></image>
<div class="panel">
<text class="text">{{n.index}}</text>
</div>
</cell>
</list>
<div class="loadMore" v-if="loadmore">
<text class="text">加载更多...</text>
</div>
</div>
</template>
<script>
export default {
data () {
return {
lists: [
{
index: 1,
images: 'img/1.jpg'
}, {
index: 2,
images: 'img/2.jpg'
}, {
index: 3,
images: 'img/3.jpg'
}, {
index: 4,
images: 'img/4.jpg'
}, {
index: 5,
images: 'img/5.jpg'
}
],
loadmore: false,
refreshing: false
}
},
methods: {
fetch(event) {
this.loadmore = true;
setTimeout(() => {
const length = this.lists.length;
for(let i = length; i < length + 4; i++) {
let a = i + 1;
this.lists.push({index: a + 1, images: 'img/' + a + '.jpg'})
}
this.loadmore = false;
}, 800)
},
onrefresh(event) {
console.log("下拉刷新");
}
}
}
</script>
<style scoped>
.header {
text-align: center;
color: black;
background-color: white;
font-size: 50px;
}
.list {
height: 1030px;
width: 750px;
}
.image{
height:300px;
width:710px;
position: absolute;
top:32px;
left:14px;
}
.panel {
width: 710px;
height: 300px;
margin-left: 16px;
margin-top: 35px;
margin-bottom: 20px;
flex-direction: column;
justify-content: center;
border-width: 2px;
border-style: solid;
border-color: rgb(162, 217, 192);
background-color: rgba(162, 217, 192, 0.2);
}
.text {
font-size: 40px;
text-align: center;
color: #41b883;
}
.loadMore {
height: 30px;
width: 750px;
line-height: 30px;
text-align: center;
}
</style>
组件car.vue
<template>
<div>
<text class="carword">您的购物车空空如也</text>
<text class="goShop" @click="jump">赶快去逛逛</text>
</div>
</template>
<script>
export default {
methods: {
jump() {
this.$router.push('index')
}
}
}
</script>
<style scoped>
.carword{
height:58px;
text-align: center;
}
.goShop{
text-align: center
}
</style>
组件my.vue
<template>
<div>
<div class="text"><text class="textword">个人信息展示</text></div>
<div class="text"><text class="textword">我的信息</text></div>
<div class="text"><text class="textword">我的购物车</text></div>
<div class="text"><text class="textword">我的收货地址</text></div>
<div class="text"><text class="textword">待支付</text></div>
<div class="text"><text class="textword">我的优惠券</text></div>
</div>
</template>
<script>
export default {
methods: {
jump() {
this.$router.push('index')
}
}
}
</script>
<style scoped>
.text{
height:100px;
width:650px;
line-height:100px;
text-align:left;
padding-left:40px;
}
</style>
效果图