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

文章内容：	在wepy里，props 同 properties；
	1、将图片写在样式中进行判断
	2、将图片写在结构里再进行判断

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>
<navbar state="1"> </navbar>

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;
}

第二种是将image直接写在结构上，然后用三元运算符判断当前的index值，相互对应：

如：
{{ state == 0 ?“nav-main-img”:""}} —— 当state为0时，添加class

<view class='nav {{ state == 0 ?"nav-main":""}}'>
    <view class='nav-list'>
        <view class='nav-box {{ state == 0 ?"nav-main-img":""}}'   bindtap='navigatorUrl' data-url="/pages/index/index">
            <label class='img'>
                <image class='' mode='widthFix' src='/image/nav/icon-nav1.png'></image>
            </label>
            <label class='img'>
                <image class='' mode='widthFix' src='/image/nav/icon-nav-vist1.png'></image>
            </label>
            <text class='text'>首页</text>
        </view>
        <view class='nav-box {{ state == 1 ?"nav-main-img":""}}'   bindtap='navigatorUrl' data-url="/pages/product/course/index">
            <label class='img'>
                <image class='' mode='widthFix' src='/image/nav/icon-nav2.png'></image>
            </label>
            <label class='img'>
                <image class='' mode='widthFix' src='/image/nav/icon-nav-vist2.png'></image>
            </label>
            <text class='text'>课程</text>
        </view>
        <!-- data-url="/pages/artical/list/index"-->
        <view class='nav-box {{ state == 2 ?"nav-main-img":""}}'   bindtap='navigatorUrl' data-url="/pages/product/art/index">
            <label class='img'>
                <image class='' mode='widthFix' src='/image/nav/icon-nav3.png'></image>
            </label>
            <label class='img'>
                <image class='' mode='widthFix' src='/image/nav/icon-nav-vist3.png'></image>
            </label>
            <text class='text'>商品</text>
        </view>
        <view class='nav-box {{ state == 3 ?"nav-main-img":""}}'   bindtap='navigatorUrl' data-url="/pages/member/index/index">
            <label class='img'>
                <image class='' mode='widthFix' src='/image/nav/icon-nav4.png'></image>
            </label>
            <label class='img'>
                <image class='' mode='widthFix' src='/image/nav/icon-nav-vist4.png'></image>
            </label>
            <text class='text'>个人</text>
        </view>
    </view>
</view>