TA入门笔记(十六)

JavaWeb-Ajax、JSON数据和文件上传

  返回  

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

2021/8/21 4:41:52 浏览:

一、样式
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} : {}  
}
},

联系我们

如果您对我们的服务有兴趣,请及时和我们联系!

服务热线:18288888888
座机:18288888888
传真:
邮箱:888888@qq.com
地址:郑州市文化路红专路93号