我这边使用的是uview组件库,进行开发的!
html
<template>
<view class="footer-bar">
<u-tabbar :value="select ? select : 0" @change="changeTab" :border="true" :fixed="true" :placeholder="true"
activeColor="#d81e06" :safeAreaInsetBottom="false">
<u-tabbar-item :text="item.title" v-for="(item, index) in footerBarList" :key="index">
<image class="u-page__item__slot-icon" slot="active-icon" :src="item.select_img"></image>
<image class="u-page__item__slot-icon" slot="inactive-icon" :src="item.img"></image>
</u-tabbar-item>
</u-tabbar>
</view>
</template>
<script>
export default {
name: "FooterBar",
data() {
return {
select: 0,
footerBarList: [
{
img: "/static/home.png",
select_img: "/static/home_select.png",
pagePath: "pages/home/home",
title: "首页",
},
{
img: "/static/dai_ban.png",
select_img: "/static/dai_ban_select.png",
pagePath: "pages/treatTackle/treatTackle",
title: "待办",
},
{
img: "/static/mine.png",
select_img: "/static/mine_select.png",
pagePath: "pages/mine/mine",
title: "我的",
},
],
};
},
methods: {
changeTab(index, name) {
console.log(index);
uni.switchTab({
url: "/" + this.footerBarList[index].pagePath,
});
},
},
};
</script>
<style lang="scss"></style>