快应用 底部导航栏 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 小队!!