小程序之旅(9) 自定义底部导航栏

1.WXML

<template name="nav">

<view class="tab" bindtap="{{style == '2'? 'goto':''}}">

<image src="/images/menu.png" wx:if="{{style == '0'? false:true}}"></image>

<image src="/images/menuT.png" wx:else></image>

<view class="{{style == '0'? 'active':''}}">设备</view>

</view>

<view class="tab" bindtap='Ewn'>

<view class="btn">

<image src="/images/code.png"></image>

<view>扫码</view>

</view>

</view>

<view class="tab" bindtap="{{style == '0'? 'user':''}}">

<image src="/images/user.png" wx:if="{{style == '2'? false:true}}"></image>

<image src="/images/userT.png" wx:else></image>

<view class="{{style == '2'? 'active':''}}">我的</view>

</view>

</template>

 

2.WXSS

page {

padding-bottom: 98rpx;

}

.tabbar {

width: 100%;

height: 98rpx;

position: fixed;

bottom: 0;

right: 0;

left: 0;

display: flex;

justify-content:space-around;

align-items: center;

color: #000;

background: rgba(255, 255, 255, 0.8);

box-shadow: 0px -1px 2px -2px #ccc;

}

.tab image {

width: 40rpx;

height: 40rpx;

}

.tab {

height: 98rpx;

line-height: 98rpx;

text-align: center;

}

.active {

color: #da5d34;

}

.tab:nth-child(1) {

display: flex;

align-items: center;

width: 150rpx;

justify-content: center;

flex-direction: column;

}

.tab:nth-child(1) view {

height: 34rpx;

line-height: 42rpx;

font-size: 20rpx;

}

.tab:nth-child(3) {

display: flex;

align-items: center;

width: 150rpx;

justify-content: center;

flex-direction: column;

}

.tab:nth-child(3) view {

height: 34rpx;

line-height: 42rpx;

font-size: 20rpx;

}

.tab:nth-child(2) {

display: flex;

align-items: center;

height: 98rpx;

line-height: 98rpx;

width: 444rpx;

}

.tab:nth-child(2) image {

width: 43rpx;

height: 43rpx;

}

.btn {

width: 100%;

height: 78rpx;

line-height: 78rpx;

display: flex;

justify-content: center;

align-items: center;

color: #fff;

border-top-right-radius: 160rpx;

border-top-left-radius: 160rpx;

border-bottom-right-radius: 160rpx;

border-bottom-left-radius: 160rpx;

background: #da5d34;

box-shadow: 0px 0px 4px 0px #da5d34;

}

.btn view {

margin-left: 10rpx;

height: 40rpx;

line-height: 40rpx;

font-size: 32rpx;

}

3.JS

const method = {

Ewn() { //扫码

wx.scanCode({

onlyFromCamera: true,

success: (res) => {

console.log(res)

}

})

},

}

export default method;

 

如果有不足之处，请留言！！！