摘要：
前言：微信项目需要有二维码功能，显示时应突出显示。因此，它只能是定制的。让我们先看看我们想做什么，看看看到阴影时是否有点恐慌。不要害怕。这很简单。修改appJson文件，将tabBar更改为自定义选项卡，并保持列表不变。最多5个“tabBars”：｛“selectedColor”：“#FB7F32”，“borderStyle”：“white”，“custom”：true，//自定义选项卡
前言：
微信项目中需要做个二维码的功能，显示的时候要突出出来，So, 只能自定义了，先看一下我们要做成这个样子，看到这个阴影是不是有点恐慌，不要怕，很简单
一、修改 app.json 文件，将 tabBar修改为自定义tab，list 保持不变，最多5个
"tabBar": {
"selectedColor": "#FB7F32",
"borderStyle": "white",
"custom": true, // 自定义tab
"usingComponents": {},
"list": [
{
"pagePath": "pages/Home/index",
"iconPath": "image/home.png",
"selectedIconPath": "image/homeActive.png",
"text": "组件"
},
{
"pagePath": "pages/Message/index",
"iconPath": "image/message.png",
"selectedIconPath": "image/messageActive.png",
"text": "消息中心"
},
{
"pagePath": "pages/Home/index",
"iconPath": "image/qrCode.png",
"selectedIconPath": "image/qrCode.png",
"text": ""
},
{
"pagePath": "pages/Home/index",
"iconPath": "image/order.png",
"selectedIconPath": "image/orderActive.png",
"text": "订单"
},
{
"pagePath": "pages/Home/index",
"iconPath": "image/mine.png",
"selectedIconPath": "image/mineActive.png",
"text": "我的"
}
]
二、在项目的根目录新建 custom-tab-bar，这个文件就是微信已经帮我们定义好了，只需要新增文件，就可以微信自动读取
三、custom-tab-bar/index.wxml 写入，官网中提供，使用 cover-view 标签来操作，目前我这边是使用view，因为 cover-view 在向上滑动的时候，会带着tab 一起拖上去，不太好看，
<view style="background: url('{{background}}') no-repeat; background-size: 100% auto">
<view wx:for="{{list}}" wx:key="index" data-path="{{item.pagePath}}" data-index="{{index}}" bindtap="switchTab" >
<view >
<view wx:if="{{item.isSpecial}}">
<image src="http://t.zoukankan.com/image/qrCode.png" ></image>
</view>
<image src="http://t.zoukankan.com/{{selected === index ? item.selectedIconPath : item.iconPath}}" wx:else></image>
</view>
<view class="cover-text">{{item.text}}</view>
</view>
</view>
四、custom-tab-bar/index.js 写入
const app = getApp()
Component({
data: {
selected: 0, // 目前tab所在的index
color: "#999", // 未选中颜色
selectedColor: "#D0021B", // 选中颜色
// tab 自定义配置需与index.json 保持一致
list: [{
pagePath: "/pages/Home/index",
iconPath: "../image/home.png",
selectedIconPath: "../image/homeActive.png",
text: "首页",
isSpecial: false
}, {
pagePath: "/pages/Message/index",
iconPath: "../image/message.png",
selectedIconPath: "../image/messageActive.png",
text: "消息中心",
isSpecial: false
}, {
pagePath: "/pages/pay/index",
iconPath: "image/icon_API.png",
selectedIconPath: "image/icon_API_HL.png",
text: "",
isSpecial: true
}, {
pagePath: "/index/index2",
iconPath: "../image/order.png",
selectedIconPath: "../image/orderActive.png",
text: "历史订单",
isSpecial: false
}, {
pagePath: "/index/index2",
iconPath: "../image/mine.png",
selectedIconPath: "../image/mineActive.png",
text: "我的",
isSpecial: false
}],
},
methods: {
// 切换 tab 事件
switchTab(e) {
let that = this
const idx = e.currentTarget.dataset.index
const path = e.currentTarget.dataset.path
// 跳转页面
wx.switchTab({
url: path,
})
that.setData({
selected: idx
})
}
}
})
五、custom-tab-bar/index.wxss 写入
.tab-bar {
position: fixed;
bottom: 0;
left: 0;
right: 0;
height: 90rpx;
display: flex;
padding-bottom: env(safe-area-inset-bottom);
z-index: 99;
position: relative;
padding-top: 17rpx;
}
.tab-bar-item {
flex: 1;
text-align: center;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.tab-bar-item cover-image {
27px;
height: 27px;
}
.tab-bar-item .cover-text {
font-size: 10px;
}
.txt{
color: #aaaaaa;
}
.fontWeight{
font-weight: bold;
}
.bg_rec{
background: #ffd324;
80rpx;
min-height: auto;
height: 20rpx;
margin-top: -28rpx;
vertical-align: text-bottom;
border-radius: 0;
z-index: -10;
}
.center_img{
100rpx;
height: 100rpx;
transform: translate(-50%);
left: 50%;
bottom:0;
}
.center-has-noimg{
100%;
height: 100%;
}
.center-has-image{
35rpx;
height: 35rpx;
}
.center_part_code{
padding: 10rpx;
box-shadow: 0 0 0 #000;
/* 100rpx;
height: 100rpx; */
position: absolute;
top: -30px;
z-index: 10;
106rpx;
height: 106rpx;
transform: translate(-50%);
left: 50%;
}
六、查看效果
发现：view 一直定在下部，滑动的时候不太好看，我这边在 每个switchTab页面的json 中配置了，禁止滚动，在页面内给 父级设置 overflow： scroll，（ switchtab页面为tabBar 中list 配置的页面）
七、总结问题
1. 进入首页，点击其他tab，页面会刷新，tabindex 会再次回到首页
解决方案：在每个 switchtab页面 中写入以下 ，（ switchtab页面为tabBar 中list 配置的页面）
onShow:function (params) {
if (typeof this.getTabBar === 'function' && this.getTabBar()) {
this.getTabBar().setData({
selected: 0 // 数字是当前页面在tabbar的索引,如我的查询页索引是2，因此这边为2，同理首页就为0，消息中心页面为1
})
}
},