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

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>

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

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

Node.js+MySQL开发的B2C商城系统源码+数据库（微信小程序端+服务端），界面高仿网易严选商城
下载地址:Node.js+MySQL开发的B2C商城系统源码+数据库(微信小程序端+服务端) NideShop商城(微信小程序端) 界面高仿网易严选商城(主要是2016年wap版) 测试数据采集自网易 ...
Capacitor+Vue+Vant移动端打包总结
Capacitor+Vue+Vant移动端打包总结本笔记为打包Vue移动端Android Apk 打包步骤 Capacitor与Vue项目结合基本配置自行百度/谷歌,这里是已集成配置好的项目. 1. ...
html5地区级联选择,【JS】vue+vant移动端地区级联选择组件
首页专栏 javascript 文章详情 0 vue+vant移动端地区级联选择组件 quanta发布于今天 08:25 写在开头:项目的框架是vue+vant,业务需求一个级联的地区选择,写完才 ...
小程序 node.js mysql_基于Node.js+MySQL开发的开源微信小程序B2C商城（页面高仿网易严选）...
高仿网易严选的微信小程序商城(微信小程序客户端) 界面高仿网易严选商城(主要是2016年wap版) 测试数据采集自网易严选商城功能和数据库参考ecshop 服务端api基于Node.js+Think ...
node 小程序 php,基于Node.js+MySQL开发的开源微信小程序B2C商城（页面高仿网易严选）...
高仿网易严选的微信小程序商城(微信小程序客户端) 界面高仿网易严选商城(主要是2016年wap版) 测试数据采集自网易严选商城功能和数据库参考ecshop 服务端api基于Node.js+Think ...
基于Node.js+MySQL开发的开源微信小程序B2C商城（页面高仿网易严选）
高仿网易严选的微信小程序商城(微信小程序客户端) 界面高仿网易严选商城(主要是2016年wap版) 测试数据采集自网易严选商城功能和数据库参考ecshop 服务端api基于Node.js+Think ...
基于Node.js+MySQL开发的开源微信小程序B2C商城（页面高仿网易严选） 1
高仿网易严选的微信小程序商城(微信小程序客户端) 界面高仿网易严选商城(主要是2016年wap版) 测试数据采集自网易严选商城功能和数据库参考ecshop 服务端api基于Node.js+Think ...
07 仿网易严选微信小程序商城
仿网易严选微信小程序商城一.代码一.代码 github,国外最大的开源项目中心,https://www.oschina.net/ 码云,https://gitee.com/?from=osc-in ...
网易严选php版本小程序,Thinkphp5.0内核开发仿网易严选微信小程序商城源码电商小程序源码...
仿网易严选微信小程序商城源码电商小程序源码安装环境:php5.3及以上+mysql,开启https Thinkphp5.0内核开发的电商类小程序源码整站后端+前台仿网易严选商城化妆品电商小程序,完 ...
vue+vant 移动端H5 商城项目_04
文章目录一.专题页 1. 效果图 2. 专题api 2.Topic.vue 组件 3. 专题源码二.分类页 2.1. 效果图 2.2. 分类api 2.3. Category.vue 组件三.购 ...