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;
如果有不足之处,请留言!!!