小程式 - 底部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>