vue+vant移动端入门实现5（仿网易严选）

最新推荐文章于 2023-08-22 11:30:58 发布

兜里揣着星星

最新推荐文章于 2023-08-22 11:30:58 发布

阅读量1k

点赞数 3

文章标签： vue

本文链接：https://blog.csdn.net/MCCLS/article/details/117886990

版权

本文介绍了如何在Vue项目中利用vant框架的Sticky组件实现吸顶效果，并结合TabBar进行页面切换。内容包括基础用法、TabBar标签栏的创建和路由配置，以及如何将Footer抽离成独立组件，实现在不同页面间的动态切换。

摘要由CSDN通过智能技术生成

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>

实现了两个页面的跳转通过,底部的浮底