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

 

1.吸顶--粘性布局sticky

使用vant框架的sticky组件

引用：

import Vue from 'vue';
import { Sticky } from 'vant';

Vue.use(Sticky);

 使用方法：

基础用法
将内容包裹在 Sticky 组件内即可。


  基础用法

      
          
        
          
          
          
          
          
          
          
          
登录
          
        

          
        
          
            内容 {
    { n }}
          
        
      

实现了浮顶

2.Tabber 标签栏,页面跳转

创建新页面（cateList.vue）

并设置它的路由在

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中加入要跳转的路由

      
        首页
        分类
        识物
        购物车
        个人
      

点击分类实现跳转

3.footer 标签栏--抽取为单独文件

把原来app_index.vue的footer标签组件,剪切到新建footer_bar.vue文件中去

footer_bar.vue文件代码（注意footer_active主要定义值在return中,不然网页会报错）

 

4.运行footer_bar单独文件实现footer-bar的不同页面切换

在app_index.vue中

在 cateList.vue中

 

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

 

​​​​​​​