<template> <view class="tabBar"> <view v-for="(item,index) in tabBar12" :key="index" class="tabbar_item" :class="{'active':index == pagenum}" @click="navTo(item,index)"> <image v-if="index == pagenum" :src="item.imgClick" mode=""></image> <image v-else :src="item.imgNormal" mode=""></image> <view class="text">{{item.text}}</view> </view> </view> </template>

<script> export default { props:[ "pagenum" ], data() { return { // pagenum: "0", tabBar12: [ { "url": "index", "text": "前言", "imgNormal": "./../../static/icon/11.png", "imgClick": "./../../static/icon/12.png" }, { "url": "show", "text": "数据展示", "imgNormal": "./../../static/icon/21.png", "imgClick": "./../../static/icon/22.png" }, { "url": "zongshu", "text": "综述", "imgNormal": "./../../static/icon/31.png", "imgClick": "./../../static/icon/32.png" }, { "url": "dynamic", "text": "扶贫动态", "imgNormal": "./../../static/icon/41.png", "imgClick": "./../../static/icon/42.png" }, { "url": "typical", "text": "先进典型", "imgNormal": "./../../static/icon/51.png", "imgClick": "./../../static/icon/52.png" }, { "url": "extension", "text": "助农推广", "imgNormal": "./../../static/icon/61.png", "imgClick": "./../../static/icon/62.png" } ], level: '' }; }, mounted() { }, created() { uni.hideTabBar({}) }, computed: { }, methods: { navTo(item, index) { let _this = this; if (index !== _this.pagenum) { var isUrl = `../${item.url}/${item.url}` const that = this console.log(isUrl) uni.redirectTo({ url: isUrl }); } else { } } } } </script>

<style lang="scss" scoped> //导航栏设置 $isRadius:20upx; //左上右上圆角 $isWidth:100vw; //导航栏宽度 $isBorder:1px solid #eeeeee; //边框 不需要则设为0px $isBg:white; //背景 // 选中设置 $chooseTextColor:#1b60ac; //选中时字体颜色 $chooseBgColor:white; //选中时背景颜色 transparent为透明 //未选中设置 $normalTextColor:#999; //未选中颜色 .tabBar { width: $isWidth; height: 100upx; position: fixed; bottom: 0; left: 0; right: 0; margin: 0 auto; z-index: 998; background-color: $isBg; color: $normalTextColor; border-left: $isBorder; border-top: $isBorder; border-right: $isBorder; display: flex; justify-content: space-around; border-top-right-radius: $isRadius; border-top-left-radius: $isRadius; box-sizing: border-box; overflow: hidden; .tabbar_item { width: 25%; font-size: 12px; display: flex; flex-direction: column; justify-content: center; align-items: center; &.active { /* border-left: $isBorder; border-top: $isBorder; */ background: $chooseBgColor; color: $chooseTextColor; } } image { width: 36upx; height: 36upx; margin-left: 5upx; } } </style>