1.吸顶--粘性布局sticky
使用vant框架的sticky组件
引用:
import Vue from 'vue';
import { Sticky } from 'vant';
Vue.use(Sticky);
使用方法:
基础用法
将内容包裹在 Sticky 组件内即可。
<van-sticky>
<van-button type="primary">基础用法</van-button>
</van-sticky>
<van-sticky>
<!--header -->
<van-row style='background:#fff;'>
<van-col >
<img class="logo" src="../assets/wangyiyanxuan.png">
</van-col>
<van-col >
<van-search class="index_header_search" v-model="serach_value" placeholder="请输入搜索关键词" />
</van-col>
<van-col >
<div class='loginBtn'>登录</div>
</van-col>
</van-row>
<!--滑动标签 -->
<van-tabs>
<van-tab v-for="(n,inx) in tabBtnList" :title="n" :key="inx">
内容 {{ n }}
</van-tab>
</van-tabs>
</van-sticky>
实现了浮顶
2.Tabber 标签栏,页面跳转
创建新页面(cateList.vue)
<template>
<div>
<h1>这是分类的页面</h1>
<!--吸底-->
<footer_bar></footer_bar>
</div>
</template>
<script>
import footer_bar from './footer_bar'
export default{
name:'cateList',
data(){
return{}
},components:{footer_bar}
}
</script>
并设置它的路由在
router文件中的index.js中修改添加
import Vue from 'vue'
import Router from 'vue-router'
import app_index from '@/components/app_index'
//添加
import cateList from '@/components/cateList'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/app_index',
name: 'app_index',
component: app_index
},
//添加
{
path: '/cateList',
name: 'cateList',
component: cateList
}
]
})
to中加入要跳转的路由
<!--浮底-->
<van-tabbar v-model="footer_active">
<van-tabbar-item icon="home-o" to="/app_index">首页</van-tabbar-item>
<van-tabbar-item icon="search" to="/cateList">分类</van-tabbar-item>
<van-tabbar-item icon="friends-o">识物</van-tabbar-item>
<van-tabbar-item icon="setting-o">购物车</van-tabbar-item>
<van-tabbar-item icon="setting-o">个人</van-tabbar-item>
</van-tabbar>
点击分类实现跳转
3.footer 标签栏--抽取为单独文件
把原来app_index.vue的footer标签组件,剪切到新建footer_bar.vue文件中去
footer_bar.vue文件代码(注意footer_active主要定义值在return中,不然网页会报错)
<template>
<div>
<!--浮底-->
<van-tabbar v-model="footer_active">
<van-tabbar-item icon="home-o" to="/app_index">首页</van-tabbar-item>
<van-tabbar-item icon="search" to="/cateList">分类</van-tabbar-item>
<van-tabbar-item icon="friends-o">识物</van-tabbar-item>
<van-tabbar-item icon="setting-o">购物车</van-tabbar-item>
<van-tabbar-item icon="setting-o">个人</van-tabbar-item>
</van-tabbar>
</div>
</template>
<script>
export default{
name:'footer_bar',
data(){
return{
footer_active:0
}
}
}
</script>
4.运行footer_bar单独文件实现footer-bar的不同页面切换
在app_index.vue中
<!--吸底-->
<footer_bar></footer_bar>
<script>
import axios from 'axios'
//添加
import footer_bar from './footer_bar'
export default {
name: 'app_index',
data () {
return {
//添加
components:{footer_bar}
}
}
</script>
在 cateList.vue中
<template>
<div>
<h1>这是分类的页面</h1>
<!--吸底-->
<footer_bar></footer_bar>//添加
</div>
</template>
<script>
//添加
import footer_bar from './footer_bar'
export default{
name:'cateList',
data(){
return{}
},components:{footer_bar}//添加
}
</script>
实现了两个页面的跳转通过,底部的浮底