uniapp 小程序實現自定義底部導航欄（tarbar）

在小程序開發中，默認底部導航欄很難知足實際需求，好在官方給出了自定義形式，效果以下：vue

話很少說，直接上代碼web

1.組件小程序

custom-tarbar.vue文件ide

<template>
    <view class="tarbar">
        <view class=".tarbar-list" :style="{ background: tabBar.backgroundColor, color: tabBar.color, 'border-top': tabBar.position == 'bottom' ? '1rpx solid ' + tabBar.borderStyle : 0, 'border-bottom': tabBar.position == 'top' ? '1rpx solid ' + tabBar.borderStyle : 0 }"
        >
            <view class="tarbar-list-ul">
                <view class="tarbar-list-li" :class="index == 2 ? 'tarbar-list-li-center' : ''" v-for="(item, index) in tabBar.list" :key="index" @click.top="setSelected(index)">
                    <block v-if="index != 2">
                        <view class="tarbar-list-li-icon"><image :src="selected == index ? item.selectedIconPath : item.iconPath" mode=""></image></view>
                        <view class="tarbar-list-li-name">{{ item.text }}</view>
                    </block>
                    <block v-else>
                        <view class="tarbar-list-li-icon"><image :src="item.selectedIconPath" mode=""></image></view>
                    </block>
                </view>
            </view>
        </view>
        <block v-if="isShowMask"><release-popup @close-mask="closeMask"></release-popup></block>
    </view>
</template>

<script> import releasePopup from './release-popup.vue'; export default { components: { 'release-popup': releasePopup }, props: ['selected'], data() { return { tabBar: { color: '#ccc', selectedColor: '#E84351', borderStyle: '#ccc', backgroundColor: '#fff', position: 'bottom', list: [ { pagePath: '/pages/index/index', iconPath: '/static/tarbar/home1.png', selectedIconPath: '/static/tarbar/home2.png', text: '首頁' }, { pagePath: '/pages/foodie/foodie', iconPath: '/static/tarbar/foodie1.png', selectedIconPath: '/static/tarbar/foodie2.png', text: '吃什麼' }, { pagePath: '/pages/releaseBtn/releaseBtn', iconPath: '', selectedIconPath: '/static/tarbar/release.png' }, { pagePath: '/pages/discover/discover', iconPath: '/static/tarbar/discover1.png', selectedIconPath: '/static/tarbar/discover2.png', text: '發現' }, { pagePath: '/pages/personal/personal', iconPath: '/static/tarbar/personal1.png', selectedIconPath: '/static/tarbar/personal2.png', text: '個人' } ] }, oldSelected: 0, // 記錄以前訪問的索引; 值爲2的時候顯示遮罩
            isShowMask: false }; }, onLoad() {}, methods: { setSelected(index) { console.log(index); if (index != 2) { uni.switchTab({ url: this.tabBar.list[index].pagePath }); } else { this.isShowMask = true; } this.$forceUpdate(); }, closeMask() { this.isShowMask = false; } } }; </script>

<style> .tarbar { width: 100%; z-index: 9999; position: fixed; } .tarbar-list { width: 100%; height: 120upx; background: #4d586f; position: fixed; left: 0; bottom: 0; } .tarbar-list-ul { width: 100%; height: 100%; padding: 20upx 50upx; display: flex; justify-content: space-between; box-sizing: border-box; } .tarbar-list-li { width: 80upx; height: 80upx; } .tarbar-list-li-icon { width: 50upx; height: 50upx; margin: 0 auto; } .tarbar-list-li-icon image { width: 50upx; height: 50upx; } .tarbar-list-li-name { width: 100%; text-align: center; line-height: 30upx; font-size: 20upx; height: 30upx; } .tarbar-list-li-center { width: 100upx; } .tarbar-list-li-center .tarbar-list-li-icon, .tarbar-list-li-center .tarbar-list-li-icon image { width: 90upx; height: 60upx; } </style>

custom-tarbar.vue

release-popup.vue文件（彈窗）flex

<template>
    <view class="mask">
        <view class="mask-top">
            <view class="mask-title">惟美食與愛不可辜負</view>
            <view class="mask-desc">對於美食的熱愛，若是用一句話來形容，那就是：惟美食與愛不可辜負。</view>
            <view class="mask-btn">
                <view class="mask-btn-list" v-for="(item, index) in btnList" :key="index" @click.stop="toRelease(index)">
                    <view class="mask-btn-list-icon iconfont" :class="item.icon"></view>
                    <view class="mask-btn-list-name">{{ item.name }}</view>
                </view>
            </view>
        </view>
        <view class="mask-close iconfont iconfabu-guanbi" @click.stop="closeMask"></view>
    </view>
</template>

<script> export default { data() { return { btnList: [ { icon: 'iconfabu-fashipin', name: '發視頻' }, { icon: 'iconfabu-facaipu', name: '髮菜譜' }, { icon: 'iconfabu-shaimeishi', name: '曬美食' }, { icon: 'iconfabu-caogaoxiang', name: '草稿箱' } ] }; }, methods: { closeMask() { this.$emit('close-mask'); }, toRelease(index) { let url = ''; if (index == 1) { url = ''; } else if (index == 2) { url = '/pages/release/release'; } else if (index == 3) { url = ''; } else { url = ''; } if (!url) { this.getMessage('敬請期待', 0); return; } uni.navigateTo({ url: url }); }, getMessage(title, icon = 0, duration = 2000, mask = true) { icon = icon == 1 ? 'success' : icon == 2 ? 'loading' : 'none'; uni.showToast({ title: title, icon: icon, duration: duration, mask: mask }); } } }; </script>

<style> .mask { padding: 100upx 80upx 0; width: 100%; height: 100vh; background: #f6f7f7; position: relative; box-sizing: border-box; /* left: 0; top: 0; */ } .mask-top { width: 100%; color: #595656; } .mask-title { height: 100upx; line-height: 100upx; font-size: 50upx; } .mask-desc { width: 100%; height: 260upx; line-height: 50upx; font-size: 30upx; } .mask-btn { width: 100%; height: 560upx; padding: 0 10upx; display: flex; flex-wrap: wrap; justify-content: space-between; align-content: space-between; box-sizing: border-box; } .mask-btn-list { width: 260upx; height: 260upx; border-radius: 20upx; background: #007aff; padding: 70upx; box-sizing: border-box; } .mask-btn-list:nth-child(1) { background: -webkit-linear-gradient(30deg, #fadde9, #eb68a3); /* Safari 5.1 - 6.0 */ background: -o-linear-gradient(30deg, #fadde9, #eb68a3); /* Opera 11.1 - 12.0 */ background: -moz-linear-gradient(30deg, #fadde9, #eb68a3); /* Firefox 3.6 - 15 */ background: linear-gradient(30deg, #fadde9, #eb68a3); /* 標準的語法（必須放在最後） */ color: #5d163a; } .mask-btn-list:nth-child(2) { background: -webkit-linear-gradient(30deg, #d7e378, #1eb7b6); /* Safari 5.1 - 6.0 */ background: -o-linear-gradient(30deg, #d7e378, #1eb7b6); /* Opera 11.1 - 12.0 */ background: -moz-linear-gradient(30deg, #d7e378, #1eb7b6); /* Firefox 3.6 - 15 */ background: linear-gradient(30deg, #d7e378, #1eb7b6); /* 標準的語法（必須放在最後） */ color: #113d41; } .mask-btn-list:nth-child(3) { background: -webkit-linear-gradient(30deg, #a7daf6, #7b4d9b); /* Safari 5.1 - 6.0 */ background: -o-linear-gradient(30deg, #a7daf6, #7b4d9b); /* Opera 11.1 - 12.0 */ background: -moz-linear-gradient(30deg, #a7daf6, #7b4d9b); /* Firefox 3.6 - 15 */ background: linear-gradient(30deg, #a7daf6, #7b4d9b); /* 標準的語法（必須放在最後） */ color: #2a274c; } .mask-btn-list:nth-child(4) { background: -webkit-linear-gradient(30deg, #ffef01, #ee7437); /* Safari 5.1 - 6.0 */ background: -o-linear-gradient(30deg, #ffef01, #ee7437); /* Opera 11.1 - 12.0 */ background: -moz-linear-gradient(30deg, #ffef01, #ee7437); /* Firefox 3.6 - 15 */ background: linear-gradient(30deg, #ffef01, #ee7437); /* 標準的語法（必須放在最後） */ color: #562f15; } .mask-btn-list-icon { width: 100%; height: 70upx; line-height: 70upx; text-align: center; font-size: 50upx; } .mask-btn-list-name { width: 100%; height: 50upx; line-height: 50upx; text-align: center; font-size: 30upx; } .mask-close { width: 80upx; height: 80upx; position: absolute; left: 50%; margin-left: -40upx; bottom: 40upx; font-size: 50upx; line-height: 80upx; text-align: center; color: #595656; } </style>

release-popup.vue

2.調用this

<template>
    <view class="content">
        <custom-tarbar :selected="0"></custom-tarbar>
        <view class="home"> home </view>
    </view>
</template>

<script> import customTarbar from '@/wxcomponents/custom-tarbar/custom-tarbar.vue'; export default { components: { 'custom-tarbar': customTarbar } }; </script>

<style> .content { width: 100%; } </style>

View Code

注意：組件傳值（selected）索引對應默認從0開始url