(导航条)购物商城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} : {}  
}
},

热门文章

暂无图片
编程学习 ·

Java输出数组的内容

Java输出数组的内容_一万个小时-CSDN博客_java打印数组内容1. 输出内容最常见的方式// List<String>类型的列表List<String> list new ArrayList<String>();list.add("First");list.add("Second");list.add("Third");list.ad…
暂无图片
编程学习 ·

母螳螂的“魅惑之术”

在它们对大蝗虫发起进攻的时候&#xff0c;我认认真真地观察了一次&#xff0c;因为它们突然像触电一样浑身痉挛起来&#xff0c;警觉地面对限前这个大家伙&#xff0c;然后放下自己优雅的身段和祈祷的双手&#xff0c;摆出了一个可怕的姿势。我被眼前的一幕吓到了&#xff0c;…
暂无图片
编程学习 ·

疯狂填词 mad_libs 第9章9.9.2

#win7 python3.7.0 import os,reos.chdir(d:\documents\program_language) file1open(.\疯狂填词_d9z9d2_r.txt) file2open(.\疯狂填词_d9z9d2_w.txt,w) words[ADJECTIVE,NOUN,VERB,NOUN] str1file1.read()#方法1 for word in words :word_replaceinput(fEnter a {word} :)str1…
暂无图片
编程学习 ·

HBASE 高可用

为了保证HBASE是高可用的,所依赖的HDFS和zookeeper也要是高可用的. 通过参数hbase.rootdir指定了连接到Hadoop的地址,mycluster表示为Hadoop的集群. HBASE本身的高可用很简单,只要在一个健康的集群其他节点通过命令 hbase-daemon.sh start master启动一个Hmaster进程,这个Hmast…
暂无图片
编程学习 ·

js事件操作语法

一、事件的绑定语法 语法形式1 事件监听 标签对象.addEventListener(click,function(){}); 语法形式2 on语法绑定 标签对象.onclick function(){} on语法是通过 等于赋值绑定的事件处理函数 , 等于赋值本质上执行的是覆盖赋值,后赋值的数据会覆盖之前存储的数据,也就是on…
暂无图片
编程学习 ·

Photoshop插件--晕影动态--选区--脚本开发--PS插件

文章目录1.插件界面2.关键代码2.1 选区2.2 动态晕影3.作者寄语PS是一款栅格图像编辑软件&#xff0c;具有许多强大的功能&#xff0c;本文演示如何通过脚本实现晕影动态和选区相关功能&#xff0c;展示从互联网收集而来的一个小插件&#xff0c;供大家学习交流&#xff0c;请勿…
暂无图片
编程学习 ·

vs LNK1104 无法打开文件“xxx.obj”

写在前面&#xff1a; 向大家推荐两本新书&#xff0c;《深度学习计算机视觉实战》和《学习OpenCV4&#xff1a;基于Python的算法实战》。 《深度学习计算机视觉实战》讲了计算机视觉理论基础&#xff0c;讲了案例项目&#xff0c;讲了模型部署&#xff0c;这些项目学会之后可以…
暂无图片
编程学习 ·

工业元宇宙的定义与实施路线图

工业元宇宙的定义与实施路线图 李正海 1 工业元宇宙 给大家做一个关于工业元宇宙的定义。对于工业&#xff0c;从设计的角度来讲&#xff0c;现在的设计人员已经做到了普遍的三维设计&#xff0c;但是进入元宇宙时代&#xff0c;就不仅仅只是三维设计了&#xff0c;我们的目…
暂无图片
编程学习 ·

【leectode 2022.1.15】完成一半题目

有 N 位扣友参加了微软与力扣举办了「以扣会友」线下活动。主办方提供了 2*N 道题目&#xff0c;整型数组 questions 中每个数字对应了每道题目所涉及的知识点类型。 若每位扣友选择不同的一题&#xff0c;请返回被选的 N 道题目至少包含多少种知识点类型。 示例 1&#xff1a…
暂无图片
编程学习 ·

js 面试题总结

一、js原型与原型链 1. prototype 每个函数都有一个prototype属性&#xff0c;被称为显示原型 2._ _proto_ _ 每个实例对象都会有_ _proto_ _属性,其被称为隐式原型 每一个实例对象的隐式原型_ _proto_ _属性指向自身构造函数的显式原型prototype 3. constructor 每个prot…
暂无图片
编程学习 ·

java练习代码

打印自定义行数的空心菱形练习代码如下 import java.util.Scanner; public class daYinLengXing{public static void main(String[] args) {System.out.println("请输入行数");Scanner myScanner new Scanner(System.in);int g myScanner.nextInt();int num g%2;//…
暂无图片
编程学习 ·

RocketMQ-什么是死信队列?怎么解决

目录 什么是死信队列 死信队列的特征 死信消息的处理 什么是死信队列 当一条消息初次消费失败&#xff0c;消息队列会自动进行消费重试&#xff1b;达到最大重试次数后&#xff0c;若消费依然失败&#xff0c;则表明消费者在正常情况下无法正确地消费该消息&#xff0c;此时…
暂无图片
编程学习 ·

项目 cg day04

第4章 lua、Canal实现广告缓存 学习目标 Lua介绍 Lua语法 输出、变量定义、数据类型、流程控制(if..)、循环操作、函数、表(数组)、模块OpenResty介绍(理解配置) 封装了Nginx&#xff0c;并且提供了Lua扩展&#xff0c;大大提升了Nginx对并发处理的能&#xff0c;10K-1000K Lu…
暂无图片
编程学习 ·

输出三角形

#include <stdio.h> int main() { int i,j; for(i0;i<5;i) { for(j0;j<i;j) { printf("*"); } printf("\n"); } }
暂无图片
编程学习 ·

stm32的BOOTLOADER学习1

序言 最近计划学习stm32的BOOTLOADER学习,把学习过程记录下来 因为现在网上STM32C8T6还是比较贵的,根据我的需求flash空间小一些也可以,所以我决定使用stm32c6t6.这个芯片的空间是32kb的。 #熟悉芯片内部的空间地址 1、flash ROM&#xff1a; 大小32KB&#xff0c;范围&#xf…
暂无图片
编程学习 ·

通过awk和shell来限制IP多次访问之学不会你打死我

学不会你打死我 今天我们用shell脚本&#xff0c;awk工具来分析日志来判断是否存在扫描器来进行破解网站密码——限制访问次数过多的IP地址&#xff0c;通过Iptables来进行限制。代码在末尾 首先我们要先查看日志的格式&#xff0c;分析出我们需要筛选的内容&#xff0c;日志…
暂无图片
编程学习 ·

Python - 如何像程序员一样思考

在为计算机编写程序之前&#xff0c;您必须学会如何像程序员一样思考。学习像程序员一样思考对任何学生都很有价值。以下步骤可帮助任何人学习编码并了解计算机科学的价值——即使他们不打算成为计算机科学家。 顾名思义&#xff0c;Python经常被想要学习编程的人用作第一语言…
暂无图片
编程学习 ·

蓝桥杯python-数字三角形

问题描述 虽然我前后用了三种做法&#xff0c;但是我发现只有“优化思路_1”可以通过蓝桥杯官网中的测评&#xff0c;但是如果用c/c的话&#xff0c;每个都通得过&#xff0c;足以可见python的效率之低&#xff08;但耐不住人家好用啊&#xff08;哭笑&#xff09;&#xff09…