1. .nav-box 控制未點選時的效果
2. .nav-box-son 控制點選後的效果
   

wxml:
<view class="navbar">
    <block wx:for="{{navBarMian}}" wx:for-item="navItem" wx:key=" ">
        <view class="nav-box {{state == index ? "nav-box-son":""}}" 
            bindtap="navigatorUrl" data-index="{{index}}" data-url="{{navItem.url
 
}}">
            <view class="form-box">
                <button class="form-btn">{{navItem.name}}</button>
                <view class="posit">
                    <label class="oval"></laber>
                    <label class="img {{navItem.icon}}"></laber
 
>
                    <text class="text text-color">{{navItem.name}}</text>
                </view>
            </view>
        </view>
    </block>
</view>

js:
const app = getApp();
var navBarMian = [
    {
        name: "搶爆款",
        url: "/pages/index/index"
 
,
        icon: "img1"
    },
    {
        name: "挑實惠",
        url: "/pages/marketing/index",
        icon: "img4"
    },
    {
        name: "我的",
        url: "/pages/member/index/index",
        icon: "img3"
    },
]
Component({
    properties: {
        actionId: String,
        state: String,
    },
    //響應點選導航欄
    attached: function() {
        var that = this
        that.setData({
            "navBarMian" : navBarMian
        })
    },
    // 元件的屬性列表
    methods: {
        navigatorUrl: function (e) {
          var url = e.currentTarget.dataset.url;
          if(url){
            wx.navigateTo({
              url: url
            })
          }
        }
    },

})

.nav {
    position: fixed;
    bottom: 0;
    right: 0;
    left: 0;
    display: flex;
    background: #fff;
    height: 100rpx;
    z-index: 99999;
    border-top: #eee 2rpx solid;
}

.nav .nav-box {
    flex: 1;
    text-align: center;
    padding: 10rpx 0;
    line-height: 0;
    color: #333;
}

/* 執行 .nav-box 預設圖片樣式    */
.nav .nav-box .img1 {
    background: url("http://img.ittgc.com/images/global/nav/icon-nav-shop01.png") center no-repeat;
}

/* .nav .nav-box .img2 {
    background: url("http://img.ittgc.com/images/global/nav/icon-nav-shop02.png") center no-repeat;
} */

.nav .nav-box .img3 {
    background: url("http://img.ittgc.com/images/global/nav/icon-nav-shop03.png") center no-repeat;
}

.nav .nav-box .img4 {
    background: url("http://img.ittgc.com/images/global/nav/icon-nav-shop04.png") center no-repeat;
}

/* 執行 .nav-box-son 滑鼠切換圖片樣式    */
.nav .nav-box.nav-box-son .img1 {
    background: url("http://img.ittgc.com/images/global/nav/icon-nav-shop-open01.png") center no-repeat;
}

/* .nav .nav-box.nav-box-son .img2 {
    background: url("http://img.ittgc.com/images/global/nav/icon-nav-shop-open02.png") center no-repeat;
} */

.nav .nav-box.nav-box-son .img3 {
    background: url("http://img.ittgc.com/images/global/nav/icon-nav-shop-open03.png") center no-repeat;
}

.nav .nav-box.nav-box-son .img4 {
    background: url("http://img.ittgc.com/images/global/nav/icon-nav-shop-open04.png") center no-repeat;
}
// 圖片設定
.nav .nav-box .img {
    display: inline-block;
    width: 50rpx;
    height: 50rpx;
    margin-bottom: 5rpx;
    background-size: 100% !important;
}
// 字型設定
.nav .nav-box .text {
    display: block;
    line-height: 26rpx;
    font-size: 24rpx;
    color: #333;
}
// 新增.text-color，滑鼠點選後的樣式
.nav .nav-box.nav-box-son .text.text-color {
    color: #fece00;
}

.nav .nav-box-son {
    position: relative;
}

.nav .nav-box-son .img, .text {
    position: relative;
}

/* button樣式  */
.form-box {
    position: relative;
}
.form-box > .form-btn {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    opacity: 0;
    z-index: 9996;
}