You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

331 lines
12 KiB
Vue

This file contains ambiguous Unicode characters!

This file contains ambiguous Unicode characters that may be confused with others in your current locale. If your use case is intentional and legitimate, you can safely ignore this warning. Use the Escape button to highlight these characters.

<template>
<view v-if="show" class="u-tabbar" @touchmove.stop.prevent="() => {}">
<view class="u-tabbar__content safe-area-inset-bottom" :style="{
height: $u.addUnit(height),
backgroundColor: bgColor,
}" :class="{
'u-border-top': borderTop
}">
<view class="u-tabbar__content__item" v-for="(item, index) in list" :key="index" :class="{
'u-tabbar__content__circle': midButton &&item.midButton
}" @tap.stop="clickHandler(index)" :style="{
backgroundColor: bgColor
}">
<view :class="[
midButton && item.midButton ? 'u-tabbar__content__circle__button' : 'u-tabbar__content__item__button'
]">
<u-icon
:size="midButton && item.midButton ? midButtonSize : iconSize"
:name="elIconPath(index)"
img-mode="scaleToFill"
:color="elColor(index)"
:custom-prefix="item.customIcon ? 'custom-icon' : 'uicon'"
></u-icon>
<u-badge :count="item.count" :is-dot="item.isDot"
v-if="item.count"
:offset="[-2, getOffsetRight(item.count, item.isDot)]"
></u-badge>
</view>
<view class="u-tabbar__content__item__text" :style="{
color: elColor(index)
}">
<text class="u-line-1">{{item.text}}</text>
</view>
</view>
<view v-if="midButton" class="u-tabbar__content__circle__border" :class="{
'u-border': borderTop,
}" :style="{
backgroundColor: bgColor,
left: midButtonLeft
}">
</view>
</view>
<!-- 这里加上一个48rpx的高度,是为了增高有凸起按钮时的防塌陷高度(也即按钮凸出来部分的高度) -->
<view class="u-fixed-placeholder safe-area-inset-bottom" :style="{
height: `calc(${$u.addUnit(height)} + ${midButton ? 48 : 0}rpx)`,
}"></view>
</view>
</template>
<script>
export default {
props: {
// 显示与否
show: {
type: Boolean,
default: true
},
// 通过v-model绑定current值
value: {
type: [String, Number],
default: 0
},
// 整个tabbar的背景颜色
bgColor: {
type: String,
default: '#ffffff'
},
// tabbar的高度默认50px单位任意如果为数值则为rpx单位
height: {
type: [String, Number],
default: '50px'
},
// 非凸起图标的大小单位任意数值默认rpx
iconSize: {
type: [String, Number],
default: 40
},
// 凸起的图标的大小单位任意数值默认rpx
midButtonSize: {
type: [String, Number],
default: 90
},
// 激活时的演示,包括字体图标,提示文字等的演示
activeColor: {
type: String,
default: '#303133'
},
// 未激活时的颜色
inactiveColor: {
type: String,
default: '#606266'
},
// 是否显示中部的凸起按钮
midButton: {
type: Boolean,
default: false
},
// 配置参数
list: {
type: Array,
default () {
return []
}
},
// 切换前的回调
beforeSwitch: {
type: Function,
default: null
},
// 是否显示顶部的横线
borderTop: {
type: Boolean,
default: true
},
// 是否隐藏原生tabbar
hideTabBar: {
type: Boolean,
default: true
},
},
data() {
return {
// 由于安卓太菜了通过css居中凸起按钮的外层元素有误差故通过js计算将其居中
midButtonLeft: '50%',
pageUrl: '', // 当前页面URL
}
},
created() {
// 是否隐藏原生tabbar
if(this.hideTabBar) uni.hideTabBar();
// 获取引入了u-tabbar页面的路由地址该地址没有路径前面的"/"
let pages = getCurrentPages();
// 页面栈中的最后一个即为项为当前页面route属性为页面路径
this.pageUrl = pages[pages.length - 1].route;
},
computed: {
elIconPath() {
return (index) => {
// 历遍u-tabbar的每一项item时判断是否传入了pagePath参数如果传入了
// 和data中的pageUrl参数对比如果相等即可判断当前的item对应当前的tabbar页面设置高亮图标
// 采用这个方法可以无需使用v-model绑定的value值
let pagePath = this.list[index].pagePath;
// 如果定义了pagePath属性意味着使用系统自带tabbar方案否则使用一个页面用几个组件模拟tabbar页面的方案
// 这两个方案对处理tabbar item的激活与否方式不一样
if(pagePath) {
if(pagePath == this.pageUrl || pagePath == '/' + this.pageUrl) {
return this.list[index].selectedIconPath;
} else {
return this.list[index].iconPath;
}
} else {
// 普通方案中索引等于v-model值时即为激活项
return index == this.value ? this.list[index].selectedIconPath : this.list[index].iconPath
}
}
},
elColor() {
return (index) => {
// 判断方法同理于elIconPath
let pagePath = this.list[index].pagePath;
if(pagePath) {
if(pagePath == this.pageUrl || pagePath == '/' + this.pageUrl) return this.activeColor;
else return this.inactiveColor;
} else {
return index == this.value ? this.activeColor : this.inactiveColor;
}
}
}
},
mounted() {
this.midButton && this.getMidButtonLeft();
},
methods: {
async clickHandler(index) {
if(this.beforeSwitch && typeof(this.beforeSwitch) === 'function') {
// 执行回调,同时传入索引当作参数
// 在微信,支付宝等环境(H5正常)会导致父组件定义的customBack()函数体中的this变成子组件的this
// 通过bind()方法绑定父组件的this让this.customBack()的this为父组件的上下文
let beforeSwitch = this.beforeSwitch.bind(this.$u.$parent.call(this))(index);
// 判断是否返回了promise
if (!!beforeSwitch && typeof beforeSwitch.then === 'function') {
await beforeSwitch.then(res => {
// promise返回成功
this.switchTab(index);
}).catch(err => {
})
} else if(beforeSwitch === true) {
// 如果返回true
this.switchTab(index);
}
} else {
this.switchTab(index);
}
},
// 切换tab
switchTab(index) {
// 发出事件和修改v-model绑定的值
this.$emit('change', index);
// 如果有配置pagePath属性使用uni.switchTab进行跳转
if(this.list[index].pagePath) {
uni.switchTab({
url: this.list[index].pagePath
})
} else {
// 如果配置了papgePath属性将不会双向绑定v-model传入的value值
// 因为这个模式下不再需要v-model绑定的value值了而是通过getCurrentPages()适配
this.$emit('input', index);
}
},
// 计算角标的right值
getOffsetRight(count, isDot) {
// 点类型count大于9(两位数)分别设置不同的right值避免位置太挤
if(isDot) {
return -20;
} else if(count > 9) {
return -40;
} else {
return -30;
}
},
// 获取凸起按钮外层元素的left值让其水平居中
getMidButtonLeft() {
let windowWidth = this.$u.sys().windowWidth;
// 由于安卓中css计算left: 50%的结果不准确故用js计算
this.midButtonLeft = (windowWidth / 2) + 'px';
}
}
}
</script>
<style scoped lang="scss">
@import "../../libs/css/style.components.scss";
.u-fixed-placeholder {
/* #ifndef APP-NVUE */
box-sizing: content-box;
/* #endif */
}
.u-tabbar {
&__content {
@include vue-flex;
align-items: center;
position: relative;
position: fixed;
bottom: 0;
left: 0;
width: 100%;
z-index: 998;
/* #ifndef APP-NVUE */
box-sizing: content-box;
/* #endif */
&__circle__border {
border-radius: 100%;
width: 110rpx;
height: 110rpx;
top: -48rpx;
position: absolute;
z-index: 4;
background-color: #ffffff;
// 3tabbar itemcss
// 使jsjs
left: 50%;
transform: translateX(-50%);
&:after {
border-radius: 100px;
}
}
&__item {
flex: 1;
justify-content: center;
height: 100%;
padding: 12rpx 0;
@include vue-flex;
flex-direction: column;
align-items: center;
position: relative;
&__button {
position: absolute;
top: 14rpx;
left: 50%;
transform: translateX(-50%);
}
&__text {
color: $u-content-color;
font-size: 26rpx;
line-height: 28rpx;
position: absolute;
bottom: 14rpx;
left: 50%;
transform: translateX(-50%);
width: 100%;
text-align: center;
}
}
&__circle {
position: relative;
@include vue-flex;
flex-direction: column;
justify-content: space-between;
z-index: 10;
/* #ifndef APP-NVUE */
height: calc(100% - 1px);
/* #endif */
&__button {
width: 90rpx;
height: 90rpx;
border-radius: 100%;
@include vue-flex;
justify-content: center;
align-items: center;
position: absolute;
background-color: #ffffff;
top: -40rpx;
left: 50%;
z-index: 6;
transform: translateX(-50%);
}
}
}
}
</style>