推广系统建站_公司宣传折页模板_sem和seo是什么职业岗位_营销案例100例小故事

第一步：配置好需要作为tabbar页面的路径，并将custom属性设置为true，

第二部：tabbar组件的封装

<template>

<view class="tabbar">

<view class="item" v-for="(item,index) in list" :key="index" @click="goNav(item.pagePath,index)">
                <view class="flex h-column h-center">
                    <image :src="current==index?item.selectedIconPath:item.iconPath"></image>
                    <view class="name" :class="current==index?'name-select':''">
                        {{item.text}}
                    </view>
                </view>

            </view>

</view>

</template>

<script>

export default{

props: ['current'],

data(){

return{

list: [{
                        iconPath: "../../../static/meijia/icon_navhome.png",
                        selectedIconPath: "../../../static/meijia/icon_navh_home.png",
                        text: '首页',
                        pagePath: '/pages/index/index',
                    },
                    {
                        iconPath: "../../../static/meijia/icon_navmy.png",
                        selectedIconPath: "../../../static/meijia/icon_navh_my.png",
                        text: '我的',
                        pagePath: '/pages/my/index',
                    },
                ]

}

},

methods:{

goNav(url,index) {
                uni.switchTab({
                    url: url
                })
            }

}

}

</script>

<style lang="scss" scoped>

.tabbar {
        position: fixed;
        left: 0;
        bottom: 0;
        width: 100%;
        background-color: rgb(255, 255, 255);
        // border-top: 2rpx solid rgb(213, 215, 214);
        padding: 20rpx 50rpx;
        display: flex;
        justify-content: space-between;

        .item {
            display: flex;
            align-items: center;
            padding-bottom: 20rpx;

            image {
                width: 54rpx;
                height: 54rpx;

            }

            .name {
                color: rgb(151, 152, 154);
                font-size: 24rpx;
            }

            .name-select {
                color: #333;
                font-weight: bold;
            }
        }
    }

</style>

第三步：在组件中使用，current的值即当前页面在tabbar页面数组中的索引

<tabbar :current="0" ></tabbar>