在git上放了一个修改后的项目
POST : https://github.com/canwhite/mpvue
用了mpvue之后发现vue-router不能用了
页面的跳转需要借助a标签
<a href="/pages/hellovue/main" class="hello">hello vue test</a>
页面需要跳转前需要先在app.json中注册
{
"pages": [
"pages/index/main",
"pages/logs/main",
"pages/counter/main",
"pages/hellovue/main"
],
"window": {
"backgroundTextStyle": "light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "WeChat",
"navigationBarTextStyle": "black"
}
}
感觉这样写详情页很方便,但是解决嵌套问题会很奇怪
所有就想着能不能实现像有vue-router的时候那样实现并行结构
自己想和看了一些别人的思路,可能小范围内的变化比较好的情况就是使用v-if,和通过设置page值判断跳转了
毕竟是小程序
<template>
<div class="container" @click="clickHandle('test click', $event)">
<div v-if="page==0">
<div class="usermotto">
<div class="user-motto">
<card :text="motto"></card>
</div>
</div>
<form class="form-container">
<input type="text" class="form-control" v-model="motto" placeholder="v-model" />
<input type="text" class="form-control" v-model.lazy="motto" placeholder="v-model.lazy" />
</form>
<a href="/pages/counter/main" class="counter">去往Vuex示例页面</a>
<a href="/pages/hellovue/main" class="hello">hello vue test</a>
</div>
<div v-if="page==1">
<count></count>
</div>
<div v-if="page==2">
<mine></mine>
</div>
<div class="tabs">
<ul>
<li @click="goPage(0)">
<div><img style="width:20px;height:20px;" src='../../../static/images/nav_manage.png'></div>
<div>首页</div>
</li>
<li @click="goPage(1)">
<div><img style="width:20px;height:20px;" src='../../../static/images/nav_manage.png'></div>
<div>计数</div>
</li>
<li @click="goPage(2)">
<div><img style="width:20px;height:20px;" src='../../../static/images/nav_manage.png'></div>
<div>我的</div>
</li>
</ul>
</div>
</div>
</template>
<script>
import card from '@/components/card'
import count from '@/components/MyCount'
import mine from '@/components/AboutMe'
export default {
data () {
return {
motto: 'Hello World',
page:0,
userInfo: {},
}
},
components: {
card,
count,
mine
},
methods: {
bindViewTap () {
const url = '../logs/main'
wx.navigateTo({ url })
},
goPage(i){
this.page = i
console.log(this.page)
},
clickHandle (msg, ev) {
console.log('clickHandle:', msg, ev)
},
},
}
</script>
<style scoped>
.usermotto {
margin-top: 50px;
}
.form-control {
display: block;
padding: 0 12px;
margin-bottom: 5px;
border: 1px solid #ccc;
}
.counter {
display: inline-block;
margin: 10px auto;
padding: 5px 10px;
color: blue;
border: 1px solid blue;
}
.hello {
border:1px solid blue;
margin:10 px auto;
padding:5px 10px;
color:blue;
}
.tabs{
position:fixed;
bottom:0;
left:0;
background-color:#fff;
box-shadow: 0 2px 4px #000;
width: 100%;
}
ul{
display: table;
width: 100%;
}
ul>li{
text-align: center;
font-size: 10px;
display: table-cell;
padding: 8px 12px;
}
</style>
最后的实现效果是这样的