| | |
| | | <template> |
| | | <view> |
| | | <u-tabbar class="custom-tabbar" zIndex="100" :value="currentTab" :fixed="true" :active-color="activeColor" |
| | | :inactive-color="inactiveColor" @change='change'> |
| | | <u-tabbar-item v-for="(item,index) in curTabList" :icon="item.icon" :key="index" :text="item.name"> |
| | | <u-tabbar class="custom-tabbar" zIndex="9999" :value="current" :fixed="true" :active-color="activeColor" |
| | | :inactive-color="inactiveColor"> |
| | | <u-tabbar-item :text="item.name" @click="changeTabbar(item.url,index,item.name)" |
| | | v-for="(item,index) in tabbarList" :key="index"> |
| | | <image class="tabbar-icon" slot="active-icon" :src="item.iconPathSelected"></image> |
| | | <image class="tabbar-icon" slot="inactive-icon" :src="item.iconPath"></image> |
| | | </u-tabbar-item> |
| | | </u-tabbar> |
| | | </view> |
| | |
| | | <script> |
| | | export default { |
| | | props: { |
| | | currentTab: {}, |
| | | current: Number, |
| | | list: { |
| | | type: Array, |
| | | default: () => [] |
| | | } |
| | | }, |
| | | data() { |
| | | return { |
| | | inactiveColor: '#909399', |
| | | activeColor: '#328CFA', |
| | | |
| | | |
| | | curTabList: [{ |
| | | name: '首页', |
| | | iconPathSelected: '', |
| | | iconPath: '', |
| | | icon: "home", |
| | | url: '/pages/home/index' |
| | | }, |
| | | { |
| | | name: '个人中心', |
| | | iconPathSelected: '', |
| | | iconPath: '', |
| | | icon: "account-fill", |
| | | url: '/pages/user/center' |
| | | } |
| | | ] |
| | | tabbarList: [], |
| | | inactiveColor: '#C7CED7', |
| | | activeColor: '#017BFC', |
| | | // activeColor: '#003399' |
| | | } |
| | | }, |
| | | watch: { |
| | | tabList: { |
| | | list: { |
| | | handler(newVal) { |
| | | if (newVal && newVal.length > 0) { |
| | | this.tabList = newVal |
| | | this.tabbarList = newVal; |
| | | if (uni.getStorageSync("activeRole").roleName == "民警") { |
| | | this.inactiveColor = "#AFB8C3"; |
| | | this.activeColor = "#003399"; |
| | | } else { |
| | | this.inactiveColor = "#C7CED7" |
| | | this.activeColor = "#017BFC"; |
| | | } |
| | | } |
| | | }, |
| | | deep: true, |
| | | immediate: true |
| | | }, |
| | | currentTab: { |
| | | handler(newVal) { |
| | | this.currentTab = newVal |
| | | }, |
| | | deep: true, |
| | | immediate: true |
| | | }, |
| | | } |
| | | }, |
| | | mounted() { |
| | | // this.getMessage() |
| | | }, |
| | | destroyed() { |
| | | |
| | | }, |
| | | methods: { |
| | | change(e) { |
| | | this.$emit("change", this.curTabList[e].url) |
| | | }, |
| | | |
| | | changeTabbar(url, index) { |
| | | if (this.current == index) return |
| | | uni.switchTab({ |
| | | url |
| | | }) |
| | | this.$emit("change", index) |
| | | } |
| | | } |
| | | } |
| | | </script> |
| | | |
| | | <style lang="scss" scoped> |
| | | .u-page_item_slot_icon { |
| | | width: 40rpx; |
| | | height: 40rpx; |
| | | .tabbar-icon { |
| | | width: 56rpx; |
| | | height: 56rpx; |
| | | } |
| | | |
| | | /deep/.u-tabbar { |
| | | box-shadow: 0rpx 0rpx 14rpx 0rpx rgba(107, 134, 159, 0.2); |
| | | } |
| | | </style> |