| | |
| | | <!-- components/custom-tabbar.vue --> |
| | | <template> |
| | | <view class="custom-tabbar" :style="{backgroundColor: bgColor}"> |
| | | <view |
| | | v-for="(item, index) in list" |
| | | :key="index" |
| | | class="tabbar-item" |
| | | @click="switchTab(item)" |
| | | > |
| | | <image |
| | | :src="selected === item.key ? item.selectedIconPath : item.iconPath" |
| | | :class="{'tabbar-icon': true, 'video-add': item.key == 'video'}" |
| | | /> |
| | | <text class="tabbar-text" v-if="item.text" :style="{color: selected === item.key ? selectedTextColor : color}"> |
| | | <view class="custom-tabbar" :style="{backgroundColor: bgColor, marginBottom: marginBottom + 'px'}"> |
| | | <view v-for="(item, index) in list" :key="index" class="tabbar-item" @click="switchTab(item)"> |
| | | <image :src="selected === item.key ? item.selectedIconPath : item.iconPath" |
| | | :class="{'tabbar-icon': true, 'video-add': item.key == 'video'}" /> |
| | | <text class="tabbar-text" v-if="item.text" |
| | | :style="{color: selected === item.key ? selectedTextColor : color}"> |
| | | {{item.text}} |
| | | </text> |
| | | </view> |
| | |
| | | data() { |
| | | return { |
| | | color: '#999999', |
| | | list: [ |
| | | { |
| | | marginBottom: 0, |
| | | list: [{ |
| | | "pagePath": "/pages/tabbar/index/home", |
| | | "iconPath": "/static/tabbar/home.png", |
| | | "selectedIconPath": "/static/tabbar/home-s.png", |
| | |
| | | ] |
| | | } |
| | | }, |
| | | created() { |
| | | console.log("底部安全区域", uni.getSystemInfoSync().safeAreaInsets); |
| | | this.marginBottom = uni.getSystemInfoSync().safeAreaInsets.bottom |
| | | }, |
| | | methods: { |
| | | switchTab(item) { |
| | | console.log("执行力", item); |
| | |
| | | align-items: center; |
| | | justify-content: center; |
| | | } |
| | | |
| | | .video-add { |
| | | width: 30px !important; |
| | | height: 30px !important; |
| | | } |
| | | |
| | | .tabbar-icon { |
| | | width: 24px; |
| | | height: 24px; |