uniApp 实现商品底部导航栏

image.png

方法一：比较复杂，纯css设置

<template>

<view class="bar">

    <view class="bar_item">
        <uni-icons type="home" color="#000" size="20"></uni-icons>
        <text>首页</text>
    </view>

    <view class="bar_item">
        <uni-badge text="6" type="error" absolute="rightTop" size="small">
            <uni-icons type="chat" color="#000" size="20"></uni-icons>
        </uni-badge>
        <text>客服</text>
    </view>

    <view class="bar_item">
        <uni-badge text="6" type="error" absolute="rightTop" size="small">
            <uni-icons type="cart" color="#000" size="20"></uni-icons>
        </uni-badge>
        <text>购物车</text>
    </view>

    <view class="bar_item1" style="background-color: #FC8A05;">
        <text>加入购物车</text>
    </view>

    <view class="bar_item1" style="background-color: #DB0F0F;">
        <text>立即购买</text>
    </view>

</view>

</template>

<script>

</script>

<style lang="scss">

.bar {
    height: 50px;
    display: flex;

    .bar_item {
        width: 14%;
        padding: 8px 0px 12px;
        text-align: center;
        font-size: 10px;
        color: $uni-text-color-two;
        display: flex;
        flex-direction: column; //修改轴方向
        align-items: center; //上下居中

        image {
            width: 15px;
            height: 15px;
        }
    }

    .bar_item1 {
        width: 30%;
        font-size: 14px;
        color: $uni-bg-color;
        text-align: center;
        line-height: 50px;
    }

}

</style>

方法二简单，使用扩展组件uni-goods-nav

<template>

<view class="">
    <uni-goods-nav :fill="false" :options="options" :buttonGroup="buttonGroup" @click="onClick"
        @buttonClick="buttonClick" />
</view>

</template>

<script>

export default {

    data() {

        return {

            options: [{
                icon: 'home',
                text: '首页'
            }, {
                icon: 'chat',
                text: '客服',
                info: 2,
                infoBackgroundColor: '#DB0F0F',
                // infoColor: "red"
            }, {
                icon: 'cart',
                text: '购物车',
                info: 2,
                infoBackgroundColor: '#DB0F0F',
            }],
            buttonGroup: [{
                    text: '加入购物车',
                    backgroundColor: '#FC8A05',
                    color: '#fff'
                },
                {
                    text: '立即购买',
                    backgroundColor: '#DB0F0F',
                    color: '#fff'
                }
            ]
        }
    }
},

methods: {
    onClick(e) {
        uni.showToast({
            title: `点击${e.content.text}`,
            icon: 'none'
        })
    },
    buttonClick(e) {
        console.log(e)
        this.options[2].info++
    }
}

}

</script>

<style>

</style>