快应用 底部导航栏 Tabs 封装

快应用 底部导航栏 Tabs 封装

提示：好了 先说说 为什么 发出来 这个文章吧！ 先有的 快应用UI组件 目前就一个 APEX -ui 但是 好多 东西 感觉 不能够更改 没办法 实现 日常开发的需求！我个人 有比较怕麻烦去看 官方 自带的 tabs 组件 索性 一劳永逸 自己写一个 ！ 方便后期 CV

---

提示：本次记录纯属个人对于 快应用开发中的分享。

---

提示：以下内容仅供参考，有不足之处感觉点评

一、好了话不多说 分享一下

效果图：（示例）：

子组件html部分（示例）：

<template>
  <div class="wrapper">
    <div class="cen">
      <div class="Box" for="(i,t) in clickTable" @click="go_Index(i)">
        <image
          class="Box_img"
          src="{{tabIndex===i?t.actImage:t.overImage}}"
        ></image>
        <text class="Box_text" style="{{tabIndex===i?activeStyls:styleStr}}">{{
          t.title
        }}</text>
      </div>
    </div>
  </div>
</template>

子组件js部分（示例）：

<script>
import router from '@system.router'
export default {
  props: {
    tabIndex:0,// index key 值
    styleStr: {  // 未选中  背景色
      type: String,
      default: `color: #a8a8a8;`
    },
    activeStyls: {    // 选中  背景色
      type: String,
      default: `color:#E85D87`
    },
    clickTable: {
      type: Array,
      default: [
        {
          actImage: '/assets/images/Taber/home1.png',  // Index 选中默认  图 
          overImage: '/assets/images/Taber/home.png',  // 未选中 图
          title: '首页'
        },
        {
          actImage: '/assets/images/Taber/jl1.png',
          overImage: '/assets/images/Taber/jl.png',
          title: '历史'
        },
        {
          actImage: '/assets/images/Taber/me1.png',
          overImage: '/assets/images/Taber/me.png',
          title: '我的'
        }
      ]
    }
  },
 

  onInit() {  },
  go_Index(i) {
    this.$emit('type', i)
  }
}
</script>

子组件css部分（示例）：

<style lang="less">
.wrapper {
  flex-direction: column;
  width: 750px;
  height: 115px;
  background-color: #000;
  .cen {
    width: 750px;
    height: 105px;
    display: flex;
    justify-content: space-between;

    padding: 0 104px;
    .Box {
      width: 70px;
      height: 105px;
      flex-direction: column;
      .Box_img {
        width: 53px;
        height: 50px;
        margin-top: 17px;
        margin: auto;
      }
      .Box_text {
        font-size: 32px;
        text-align: center;
        line-height: 32px;
      }
    }
  }
}
</style>

2.父组件的引用

代码如下（示例）：

<import name="my-TabBar" src="../components/TabBar/index.ux"></import> // 根据个人 位置选择


<div class="Tabar">
   <my-TabBar
     ontype="go_index" // 点击 事件
     tab-index="{{index}}" //  index 索引 
     click-table="{{tabList}}"  // 渲染数据
   ></my-TabBar>
</div>


// js
import router from '@system.router'

 data() {
    return {
      index:0,
      tabList: [
        {
          actImage: '/assets/images/Taber/home1.png',
          overImage: '/assets/images/Taber/home.png',
          title: '首页',
          
        },
        {
          actImage: '/assets/images/Taber/jl1.png',
          overImage: '/assets/images/Taber/jl.png',
          title: '历史',
          
        },
        {
          actImage: '/assets/images/Taber/me1.png',
          overImage: '/assets/images/Taber/me.png',
          title: '我的',
        
        }
      ],
    }
  },

	go_index(e) {
	    this.index = e.detail
	    console.log(e.detail);
	     if (this.index == 0) {
	      router.push({
	        uri: ''
	      })
	    } else if(this.index == 2) {
	       router.push({
	        uri: ''
	      })
	    }
	  }
	  // js

		//css
		.Tabar {
		  width: 750px;
		
		  position: fixed;
		  bottom: 0;
		}

---

总结

快应用 方面个人 也是 刚刚接触 很多地方 还需 学习 后期 可能会封装一些 更多的小东西！方便 日常 在项目开发中 能给 更快的CV 可能会 继续分享 欢迎 加入 我的cv 小队！！