(导航条)购物商城Tabbar导航条的实现

一、样式
1.创建项目完毕后删除默认文件
2.assets文件里创建img和css文件夹
3.css里创建base.css,创建默认样式,并在app.vue中引用,@import "..."
4.写tabbar样式
  
 (1)开启flex布局disp
 (2)子元素:flex:1   均等分
            text-align: center  子元素内部文字居中
            height:49px 移动端底部导航栏一般高度都是49px
            box-shadow: 0 -1px 1px rgba(100,100, 100, .2)  设置导航栏上面一条线的阴影
 (3)开启定位,底部导航栏,设置背景颜色#f6f6f6

           因为是底部导航栏,所以用fixd
     position:fixd
     left:0
     right:0
     bottom:0
     
     
二、封装上面的样式
1.compents文件夹里创建tabbar文件夹,创建TarBar文件
2.剪切放到template里面

<div id="tar-bar">
     <div class="tab-bar-item">首页</div>
     <div class="tab-bar-item">分类</div>
     <div class="tab-bar-item">购物车</div>
     <div class="tab-bar-item">我的</div>
   </div>


3.剪切放到style里面,注意:  @import不能剪掉,因为子组件里面不能用,会报错

#tar-bar{
   display: flex;
   background-color: #f6f6f6;
   position: fixed;
   left: 0;
   right: 0;
   bottom: 0;
   box-shadow: 0 -1px 1px rgba(100,100, 100, .2);
 }
 .tab-bar-item{
   flex:1;
   text-align: center;
   height: 49px;
 }


4.引入TarBar到App.vue里面

import TabBar from './components/tabbar/TabBar.vue'


  导入组件还要在components里面注册
 

components:{
      TarBar
  }


  然后就可以在div里面使用了  注意:html里忽略大小写,不能用驼峰,所以只能用-
     

<tab-bar></tab-bar>

三、导入图片,这个简单,div里写img就行,然后style设置下样式即可

.tab-bar-item img{
     width: 24px;
     height: 24px;
 }


 四、重点,将Tarbar父元素里的div里的所有子组件封装,同时整个插槽,再创建子组件文件用tabbaritem
 先在tarbar中加入插槽,再再tabbaritem中放入具名插槽,再app.vue文件中使用插槽,得用四次,相当于用四次这个组件,别忘了注册,不难理解
 代码如下
 App.vue:
 

<tab-bar>
     <tab-bar-item>
       <img slot="item-icon" src="./assets/img/tabbar/home.png" alt="">
       <div slot="item-text">首页</div>
       </tab-bar-item>
     <tab-bar-item>
       <img slot="item-icon" src="./assets/img/tabbar/categories.png" alt="">
       <div slot="item-text">分类</div>
     </tab-bar-item>
     <tab-bar-item>
       <img slot="item-icon" src="./assets/img/tabbar/shopcart.png" alt="">
       <div slot="item-text">购物车</div>
     </tab-bar-item>
     <tab-bar-item>
       <img slot="item-icon" src="./assets/img/tabbar/profile.png" alt="">
       <div slot="item-text">我的</div>
     </tab-bar-item>
    </tab-bar>


    TabBarItem:

    

<slot name ="item-icon"></slot>
           <slot name ="item-text"></slot>


     TarBar:
    

<slot></slot>


五、添加动态图标,即home_active等
   1.在tabbaritem里添加新插槽,并在app文件中引用
   

<img slot="item-icon-active" src="./assets/img/tabbar/shopcart_active.png" alt="">


   2.将tabbaritem中三个插槽同时用div包裹起来,再用v-if来判断并展示是否活跃时的图片
     

<div v-if="!isActive"> <slot  name ="item-icon"></slot></div>
          <div v-else><slot  name ="item-icon-active"></slot></div> 


这是文字是否变红,动态绑个class
         
   3.别忘了在data中添加isA

 <div :class="{active:isActive}"><slot name ="item-text"></slot></div>

ctive变量
六、改写vue-router

本来是这样:

export default new Router({
    routers:[
        
    ]
})


改写:

const routers = [
    {
        path:
    redirect:
    
    },
    {
        path:
        component:
    }
    
]
const router = new Routers({
    routers,
})
export default router

七、创建新文件夹views,视图,放的就是一系列子组件,注意不是导航栏子组件,区分开来
 一个视图单独弄一个文件夹,文件夹里放子组件,比如/views/home/Home.vue

八、配置映射关系,别忘了router-view
在第六步的基础上使用懒加载引用,比如:
const Home =()=>import('...')

九、写入监听点击函数
注意:要在TabBarItem里面监听
<div class="tab-bar-item" @click="itemClick">
用props是因为父传子,父组件app的数据传给子组件TabBarItem,在子组件里写props

App.vue里面:比如:

<tab-bar-item path="/home">

TabBarItem里:

props:{
path: String
},
methods:{
    itemClick(){
        this.$router.replace(this.path).catch(err=>err)
    }
}


最后改下哈希值

十、动态绑定字体颜色
在app中的tabbaritem标签添加  activeColor = "blue"
然后通过props传过去

props:{
activeColor:{
    type:String,
    default:'red'
}
},


但是传过去要去使用,如下v-bind:style...

<div :style="activeStyle"><slot name ="item-text"></slot></div>


在计算属性中添加activeStyle


    下面是用来判断tabbaritem中的四个组件是否活跃
 

isActive(){
    return this.$route.path.includes(this.path) == this.$route.path

也就是index.js里的path,this.path是tabbaritem中由app传过来的动态的path,如果相同那就是处于活跃,就返回true
},

activeStyle(){
    return this.isActive ? {color:this.activeColor} : {}  
}
},

热门文章

暂无图片
编程学习 ·

C语言二分查找详解

二分查找是一种知名度很高的查找算法&#xff0c;在对有序数列进行查找时效率远高于传统的顺序查找。 下面这张动图对比了二者的效率差距。 二分查找的基本思想就是通过把目标数和当前数列的中间数进行比较&#xff0c;从而确定目标数是在中间数的左边还是右边&#xff0c;将查…
暂无图片
编程学习 ·

GMX 命令分类列表

建模和计算操作命令&#xff1a; 1.1 . 创建拓扑与坐标文件 gmx editconf - 编辑模拟盒子以及写入子组(subgroups) gmx protonate - 结构质子化 gmx x2top - 根据坐标生成原始拓扑文件 gmx solvate - 体系溶剂化 gmx insert-molecules - 将分子插入已有空位 gmx genconf - 增加…
暂无图片
编程学习 ·

一文高效回顾研究生课程《数值分析》重点

数值分析这门课的本质就是用离散的已知点去估计整体&#xff0c;就是由黑盒子产生的结果去估计这个黑盒子。在数学里这个黑盒子就是一个函数嘛&#xff0c;这门课会介绍许多方法去利用离散点最大化地逼近这个函数&#xff0c;甚至它的导数、积分&#xff0c;甚至微分方程的解。…
暂无图片
编程学习 ·

在职阿里5年,一个28岁女软测工程师的心声

简单的先说一下&#xff0c;坐标杭州&#xff0c;14届本科毕业&#xff0c;算上年前在阿里巴巴的面试&#xff0c;一共有面试了有6家公司&#xff08;因为不想请假&#xff0c;因此只是每个晚上去其他公司面试&#xff0c;所以面试的公司比较少&#xff09; ​ 编辑切换为居中…
暂无图片
编程学习 ·

字符串左旋c语言

目录 题目&#xff1a; 解题思路&#xff1a; 第一步&#xff1a; 第二步&#xff1a; 第三步&#xff1a; 总代码&#xff1a; 题目&#xff1a; 实现一个函数&#xff0c;可以左旋字符串中的k个字符。 例如&#xff1a; ABCD左旋一个字符得到BCDA ABCD左旋两个字符…
暂无图片
编程学习 ·

设计模式--观察者模式笔记

模式的定义与特点 观察者&#xff08;Observer&#xff09;模式的定义&#xff1a;指多个对象间存在一对多的依赖关系&#xff0c;当一个对象的状态发生改变时&#xff0c;所有依赖于它的对象都得到通知并被自动更新。这种模式有时又称作发布-订阅模式、模型-视图模式&#xf…
暂无图片
编程学习 ·

睡觉突然身体动不了,什么是睡眠痽痪症

很多朋友可能有这样的体验&#xff0c;睡觉过程中突然意识清醒&#xff0c;身体却动弹不了。这时候感觉非常恐怖&#xff0c;希望旁边有一个人推自己一下。阳光以前也经常会碰到这样的情况&#xff0c;一年有一百多次&#xff0c;那时候很害怕晚上到来&#xff0c;睡觉了就会出…
暂无图片
编程学习 ·

深入理解C++智能指针——浅析MSVC源码

文章目录unique_ptrshared_ptr 与 weak_ptrstd::bad_weak_ptr 异常std::enable_shared_from_thisunique_ptr unique_ptr 是一个只移型别&#xff08;move-only type&#xff0c;只移型别还有std::mutex等&#xff09;。 结合一下工厂模式&#xff0c;看看其基本用法&#xff…
暂无图片
编程学习 ·

@TableField(exist = false)

TableField(exist false) //申明此字段不在数据库存在&#xff0c;但代码中需要用到它&#xff0c;通知Mybatis-plus在做写库操作是忽略它。,.
暂无图片
编程学习 ·

Java Web day15

第十二章文件上传和下载 一、如何实现文件上传 要实现Web开发中的文件上传功能&#xff0c;通常需要完成两步操作&#xff1a;一.是在Web页面中添加上传输入项&#xff1b;二是在Servlet中读取上传文件的数据&#xff0c;并保存到本地硬盘中。 需要使用一个Apache组织提供一个…
暂无图片
编程学习 ·

【51nod 2478】【单调栈】【前缀和】小b接水

小b接水题目解题思路Code51nod 2478 小b接水 题目 输入样例 12 0 1 0 2 1 0 1 3 2 1 2 1输出样例 6解题思路 可以发现最后能拦住水的都是向两边递减高度&#xff08;&#xff1f;&#xff09; 不管两个高积木之间的的积木是怎样乱七八糟的高度&#xff0c;最后能用来装水的…
暂无图片
编程学习 ·

花了大半天写了一个UVC扩展单元调试工具

基于DIRECTSHOW 实现的&#xff0c;用的是MFC VS2019. 详见&#xff1a;http://www.usbzh.com/article/detail-761.html 获取方法 加QQ群:952873936&#xff0c;然后在群文件\USB调试工具&测试软件\UVCXU-V1.0(UVC扩展单元调试工具-USB中文网官方版).exe USB中文网 USB中文…
暂无图片
编程学习 ·

贪心(一):区间问题、Huffman树

区间问题 例题一&#xff1a;区间选点 给定 N 个闭区间 [ai,bi]请你在数轴上选择尽量少的点&#xff0c;使得每个区间内至少包含一个选出的点。 输出选择的点的最小数量。 位于区间端点上的点也算作区间内。 输入格式 第一行包含整数 N&#xff0c;表示区间数。 接下来 …
暂无图片
编程学习 ·

C语言练习实例——费氏数列

目录 题目 解法 输出结果 题目 Fibonacci为1200年代的欧洲数学家&#xff0c;在他的着作中曾经提到&#xff1a;「若有一只免子每个月生一只小免子&#xff0c;一个月后小免子也开始生产。起初只有一只免子&#xff0c;一个月后就有两只免子&#xff0c;二个月后有三只免子…
暂无图片
编程学习 ·

Android开发(2): Android 资源

个人笔记整理 Android 资源 Android中的资源&#xff0c;一般分为两类&#xff1a; 系统内置资源&#xff1a;Android SDK中所提供的已经定义好的资源&#xff0c;用户可以直接拿来使用。 用户自定义资源&#xff1a;用户自己定义或引入的&#xff0c;只适用于当前应用的资源…
暂无图片
编程学习 ·

零基础如何在短时间内拿到算法offer

​算法工程师是利用算法处理事物的职业 算法&#xff08;Algorithm&#xff09;是一系列解决问题的清晰指令&#xff0c;也就是说&#xff0c;能够对一定规范的输入&#xff0c;在有限时间内获得所要求的输出。 如果一个算法有缺陷&#xff0c;或不适合于某个问题&#xff0c;执…
暂无图片
编程学习 ·

人工智能:知识图谱实战总结

人工智能python&#xff0c;NLP&#xff0c;知识图谱&#xff0c;机器学习&#xff0c;深度学习人工智能&#xff1a;知识图谱实战前言一、实体建模工具Protegepython&#xff0c;NLP&#xff0c;知识图谱&#xff0c;机器学习&#xff0c;深度学习 人工智能&#xff1a;知识图…
暂无图片
编程学习 ·

【无标题】

这里写自定义目录标题欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题&#xff0c;有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注…