第一步:路由文件的配置(对你所需要的vue文件进行保存缓存标志的添加)
import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import Message from '@/components/Message'
import Search from '@/components/Search'
import Home from '@/components/bottomBar/Home'
import Person from '@/components/bottomBar/Person'
import Release from '@/components/bottomBar/Release'
import Collection from '@/components/bottomBar/Collection'
Vue.use(Router);
const routes =[
{
path: '/',
name: 'HelloWorld',
component: HelloWorld,
children: [
{
path:'home',
component:Home,
meta: {
title: 'home',
keepAlive: true
}
},
{
path:'person',
component:Person
},
{
path:'release',
component:Release
},
{
path:'collection',
component:Collection
}
]
},
{
path:"/message",
component:Message
},
{
path:"/search",
component:Search
}
];
const router = new Router({
routes,
});
export default router
第二步:router-view的设置
<template>
<div id="index">
<keep-alive >
<router-view v-if="$route.meta.keepAlive"></router-view>
</keep-alive>
<router-view v-if="!$route.meta.keepAlive"></router-view>
<van-tabbar v-model="active">
<van-tabbar-item icon="home" to="/home">首页</van-tabbar-item>
<van-tabbar-item icon="records" to="/release">发布</van-tabbar-item>
<van-tabbar-item icon="idcard" to="/collection">收藏</van-tabbar-item>
<van-tabbar-item icon="contact" to="/person" :dot="true">个人中心</van-tabbar-item>
</van-tabbar>
</div>
</template>
<script>
export default {
data () {
return {
value:"",
active:0
}
},
mounted(){
this.$router.push("/home")
},
methods:{
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less">
#index{
.van-tabbar{
height: 1.1rem;
border-top: 1px solid #eee;
.van-tabbar-item--active{
color: orange;
}
.van-tabbar-item__icon{
font-size: 0.5rem;
.van-info{
padding: 0.05rem 0.1rem;
line-height: 0.3rem;
right:-0.1rem;
}
}
}
}
</style>
第三步:在你需要保存位置的vue文件里面进行操作
<template>
<div class="htmlGlobal">
<div id="home">
<van-row>
<van-col span="2" id="message" @click.native="goToMessageHtml">
<van-icon name="chat" :class="{'dot':true}"/>
</van-col>
<van-col span="20" id="search">
<van-search
placeholder="搜你感兴趣的"
v-model="value"
background="orange"
@focus="goToSearchHtml"
/>
</van-col>
<van-col span="2"></van-col>
</van-row>
</div>
<div id="noticeBar">
<van-notice-bar mode="closeable"
:text=noticeValue
left-icon="http://img.yzcdn.cn/vant/volume.png"
/>
</div>
<div id="vanSwipe">
<van-swipe :autoplay="3000" indicator-color="orange">
<van-swipe-item>1</van-swipe-item>
<van-swipe-item>2</van-swipe-item>
<van-swipe-item>3</van-swipe-item>
<van-swipe-item>4</van-swipe-item>
</van-swipe>
</div>
<div id="vanTabs" >
<van-tabs swipeable v-model="tabActive" :class="{'fixed':fixed}">
<van-tab v-for="(item,index) in tabsArr" :title="item.name" :key="index">
</van-tab>
</van-tabs>
<ShopList :index="tabActive"></ShopList>
</div>
</div>
</template>
<script>
import ShopList from '../ShopList'
export default {
beforeRouteLeave(to, from, next){
this.$store.commit("set_scrollTop",this.scroll);
next();
},
activated () {
this.$nextTick(function(){
let position = this.$store.state.scrollTop; //返回页面取出来
window.scrollTo(0, position);
})
},
components:{
ShopList
},
data(){
return{
scroll:0,
fixed:false,
value:'',
//二手物品的分类信息
tabsArr:[
{
name:"书籍",
requestCode:"0",
},
{
name:"生活百货",
requestCode:"1",
},
{
name:"乐器",
requestCode:"2",
},
{
name:"数码",
requestCode:"3",
},
{
name:"服饰鞋包",
requestCode:"4",
},
{
name:"美妆捡漏",
requestCode:"5",
},
{
name:"运动户外",
requestCode:"6",
},
{
name:"健身器材",
requestCode:7,
}
],
noticeValue:"足协杯战线连续第2年上演广州德比战",
tabActive:1
}
},
methods:{
goToMessageHtml(){
this.$router.push("/message");
},
goToSearchHtml(){
this.$router.push("/search");
},
handleScroll(){
if(document.getElementById('vanTabs')){
this.scroll = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
var offsetTop = document.getElementById('vanTabs').offsetTop;
if (this.scroll > offsetTop) {
this.fixed = true;
} else {
this.fixed = false
}
}
}
},
destroyed () {
window.removeEventListener('scroll', this.handleScroll)
},
mounted(){
this.$nextTick(()=>{
window.addEventListener('scroll', this.handleScroll)
})
}
}
</script>
<style lang="less">
.fixed{
position: fixed !important;
top: 0;
left: 0;
}
.htmlGlobal{
background-color: #ccc;
box-sizing: border-box;
}
#home{
background-color:orange;
height: 1rem;
box-sizing: border-box;
padding: .1rem;
.van-row{
height: 100%;
#message{
height: 100%;
.van-icon{
font-size: .5rem;
top: -.4rem;
left: .13rem;
color: #fff;
.van-info{
padding: .05rem .1rem;
line-height: .3rem;
right:-.05rem;
}
}
}
#search{
.van-search{
padding: 0;
padding-top: .1rem;
.van-cell{
border-radius: 20px;
height: .6rem;
.van-cell__left-icon{
font-size: .4rem;
position: absolute;
top: .15rem;
bottom: .1rem;
}
.van-field__body{
position: absolute;
left: .5rem;
top: .05rem;
bottom: .1rem;
right: 0;
input{
font-size: .3rem;
}
}
}
}
}
}
}
#noticeBar{
.van-notice-bar{
height: .8rem;
.van-notice-bar__left-icon {
height: 100%;
line-height: .8rem;
img{
width: .4rem;
height: .4rem;
vertical-align: middle;
}
}
.van-notice-bar__wrap{
height: 100%;
line-height: .8rem;
.van-notice-bar__content{
font-size: .3rem;
}
}
.van-icon.van-icon-close.van-notice-bar__right-icon{
font-size: .35rem;
right: .1rem;
top: .22rem;
}
}
}
#vanSwipe{
.van-swipe{
/*margin: 0 .3rem;*/
height:3rem;
.van-swipe-item{
background-color: deepskyblue;
border-radius: 5px;
}
}
}
#vanTabs{
.van-tabs{
}
}
</style>