|
@@ -26,10 +26,25 @@
|
|
:offset="[-2, getOffsetRight(item.count, item.isDot)]"
|
|
:offset="[-2, getOffsetRight(item.count, item.isDot)]"
|
|
></u-badge>
|
|
></u-badge>
|
|
</view>
|
|
</view>
|
|
- <view class="u-tabbar__content__item__text" :style="{
|
|
|
|
|
|
+
|
|
|
|
+ <view class="u-tabbar__content__item__text" v-if="item.textImg" :style="{
|
|
|
|
+ backgroundImage: `url(${elIconPathBL(index)?item.text:item.text2})`,
|
|
|
|
+ backgroundRepeat: 'no-repeat',
|
|
|
|
+ backgroundPositionX: 'center',
|
|
|
|
+ backgroundPositionY: 'center',
|
|
|
|
+ fontSize: '36rpx',
|
|
|
|
+ lineHeight: '22px',
|
|
|
|
+ zIndex: '999'
|
|
|
|
+ }">
|
|
|
|
+
|
|
|
|
+
|
|
|
|
+ <text class="u-line-1" style="color: #fff;" >-</text>
|
|
|
|
+ </view>
|
|
|
|
+ <view class="u-tabbar__content__item__text" v-else :style="{
|
|
color: elColor(index)
|
|
color: elColor(index)
|
|
}">
|
|
}">
|
|
- <text class="u-line-1">{{item.text}}</text>
|
|
|
|
|
|
+
|
|
|
|
+ <text class="u-line-1" >{{item.text}}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view v-if="midButton" class="u-tabbar__content__circle__border" :class="{
|
|
<view v-if="midButton" class="u-tabbar__content__circle__border" :class="{
|
|
@@ -73,12 +88,12 @@
|
|
// 非凸起图标的大小,单位任意,数值默认rpx
|
|
// 非凸起图标的大小,单位任意,数值默认rpx
|
|
iconSize: {
|
|
iconSize: {
|
|
type: [String, Number],
|
|
type: [String, Number],
|
|
- default: 40
|
|
|
|
|
|
+ default: '20px'
|
|
},
|
|
},
|
|
// 凸起的图标的大小,单位任意,数值默认rpx
|
|
// 凸起的图标的大小,单位任意,数值默认rpx
|
|
midButtonSize: {
|
|
midButtonSize: {
|
|
type: [String, Number],
|
|
type: [String, Number],
|
|
- default: 90
|
|
|
|
|
|
+ default: '45px'
|
|
},
|
|
},
|
|
// 激活时的演示,包括字体图标,提示文字等的演示
|
|
// 激活时的演示,包括字体图标,提示文字等的演示
|
|
activeColor: {
|
|
activeColor: {
|
|
@@ -134,6 +149,26 @@
|
|
this.pageUrl = pages[pages.length - 1].route;
|
|
this.pageUrl = pages[pages.length - 1].route;
|
|
},
|
|
},
|
|
computed: {
|
|
computed: {
|
|
|
|
+ elIconPathBL(){
|
|
|
|
+ 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 true;
|
|
|
|
+ } else {
|
|
|
|
+ return false;
|
|
|
|
+ }
|
|
|
|
+ } else {
|
|
|
|
+ // 普通方案中,索引等于v-model值时,即为激活项
|
|
|
|
+ return index == this.value ? true :false
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ },
|
|
elIconPath() {
|
|
elIconPath() {
|
|
return (index) => {
|
|
return (index) => {
|
|
// 历遍u-tabbar的每一项item时,判断是否传入了pagePath参数,如果传入了
|
|
// 历遍u-tabbar的每一项item时,判断是否传入了pagePath参数,如果传入了
|
|
@@ -253,10 +288,11 @@
|
|
/* #endif */
|
|
/* #endif */
|
|
|
|
|
|
&__circle__border {
|
|
&__circle__border {
|
|
|
|
+ //display: none;
|
|
border-radius: 100%;
|
|
border-radius: 100%;
|
|
- width: 110rpx;
|
|
|
|
- height: 110rpx;
|
|
|
|
- top: -48rpx;
|
|
|
|
|
|
+ width: 90px;
|
|
|
|
+ height: 90px;
|
|
|
|
+ top: -20px;
|
|
position: absolute;
|
|
position: absolute;
|
|
z-index: 4;
|
|
z-index: 4;
|
|
background-color: #ffffff;
|
|
background-color: #ffffff;
|
|
@@ -290,7 +326,7 @@
|
|
&__text {
|
|
&__text {
|
|
color: $u-content-color;
|
|
color: $u-content-color;
|
|
font-size: 26rpx;
|
|
font-size: 26rpx;
|
|
- line-height: 28rpx;
|
|
|
|
|
|
+ //line-height: 28rpx;
|
|
position: absolute;
|
|
position: absolute;
|
|
bottom: 14rpx;
|
|
bottom: 14rpx;
|
|
left: 50%;
|
|
left: 50%;
|
|
@@ -305,21 +341,23 @@
|
|
@include vue-flex;
|
|
@include vue-flex;
|
|
flex-direction: column;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
justify-content: space-between;
|
|
|
|
+
|
|
z-index: 10;
|
|
z-index: 10;
|
|
/* #ifndef APP-NVUE */
|
|
/* #ifndef APP-NVUE */
|
|
height: calc(100% - 1px);
|
|
height: calc(100% - 1px);
|
|
/* #endif */
|
|
/* #endif */
|
|
|
|
|
|
&__button {
|
|
&__button {
|
|
- width: 90rpx;
|
|
|
|
- height: 90rpx;
|
|
|
|
|
|
+
|
|
|
|
+ width: 85px;
|
|
|
|
+ height: 65px;
|
|
border-radius: 100%;
|
|
border-radius: 100%;
|
|
@include vue-flex;
|
|
@include vue-flex;
|
|
justify-content: center;
|
|
justify-content: center;
|
|
align-items: center;
|
|
align-items: center;
|
|
position: absolute;
|
|
position: absolute;
|
|
- background-color: #ffffff;
|
|
|
|
- top: -40rpx;
|
|
|
|
|
|
+ //background-color: #ffffff;
|
|
|
|
+ top: -25px;
|
|
left: 50%;
|
|
left: 50%;
|
|
z-index: 6;
|
|
z-index: 6;
|
|
transform: translateX(-50%);
|
|
transform: translateX(-50%);
|