小程序 - 底部navbar导航栏效果

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 that = this
            var url = e.currentTarget.dataset.url;
            if (app.globalData.appID) {
                wx.navigateToMiniProgram({
                    appId: app.globalData.appID,
                    path: url,
                    success(res) {
                    }
                })
            } else {
                wx.redirectTo({
                    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;
    height: 100rpx;
}
.form-box>form {
    display: inline-block;
}
.form-btn {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    opacity: 0;
    z-index: 9996;
}