图片服务器过期了。
我写了95%的代码，剩下5%的代码你们随机应变。
微信小程序自定义底部切换栏
index.wxml
<!--custom-tab-bar/index.wxml-->
<view class="tab-bar" wx:if="{
{show}}">
<view wx:for="{
{list}}" wx:key="index" class="tab-bar-item {
{item.bulge?'bulge':''}}"
data-path="{
{item.pagePath}}" data-index="{
{index}}" bindtap="switchTab">
<view wx:if="item.bulge" class="tab-bar-bulge"></view>
<image class="image" src="{
{selected === index ? item.selectedIconPath : item.iconPath}}"></image>
<view class="tab-bar-view" style="color: {
{selected === index ? selectedColor : color}}">{
{item.text}}</view>
</view>
</view>
<!--
使用带有 cover 的标签 开启页面的下拉刷新时在安卓手机可以固定 tabbar
-->
<!-- <cover-view class="tab-bar">
<cover-view wx:for="{
{list}}" wx:key="index" class="tab-bar-item {
{item.bulge?'bulge':''}}" data-path="{
{item.pagePath}}" data-index="{
{index}}" bindtap="switchTab">
<cover-view wx:if="item.bulge" class="tab-bar-bulge"></cover-view>
<cover-image class="image" src="{
{selected === index ? item.selectedIconPath : item.iconPath}}"></cover-image>
<cover-view class="tab-bar-view" style="color: {
{selected === index ? selectedColor : color}}">{
{item.text}}</cover-view>
</cover-view>
</cover-view> -->
index.js
// custom-tab-bar/index.js
Component({
data: {
color: "#999999",
selectedColor: "#ff1a2c ",
backgroundColor: "#ffffff",
show: true,
list: [{
pagePath: "/page/index/index",
text: "首页",
iconPath: "http://img.xxx.cn/xcx/home2.png",
selectedIconPath: "http://img.xxx.cn/xcx/home.png"
},
{
pagePath: "/page/search/search",
text: "展商查询",
iconPath: "http://img.xxx.cn/xcx/select.png",
selectedIconPath: "http://img.xxx.cn/xcx/select2.png"
},
{
pagePath: "/page/visitinfo/visitinfo",
bulge: true,
text: "",
iconPath: "http://img.xxx.cn/xcx/visRegis.png",
selectedIconPath: "http://img.xxx.cn/xcx/visRegis.png"
},
{
pagePath: "/page/zaixian/index",
text: "数字工博",
iconPath: "http://img.xxx.cn/xcx/metting.png",
selectedIconPath: "http://img.xxx.cn/xcx/metting1.png"
},
{
pagePath: "/page/My/My",
text: "我的",
iconPath: "http://img.xxx.cn/xcx/people.png",
selectedIconPath: "http://img.xxx.cn/xcx/people2.png"
},
]
},
attached() {},
methods: {
switchTab(e) {
const data = e.currentTarget.dataset
const url = data.path
console.log("url", url)
if (url == '/page/zaixian/index') {
wx.navigateTo({
url
})
} else {
wx.switchTab({
url
})
}
}
}
})
index.wxss
.tab-bar {
position: fixed;
bottom: 0;
left: 0;
right: 0;
height: 135rpx;
background: #071320;
display: flex;
/* padding-bottom: env(safe-area-inset-bottom); */
border-top: 1px solid #071320;
z-index: 9999;
}
.tab-bar-item {
flex: 1;
text-align: center;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.tab-bar-item .image {
width: 40rpx;
height: 40rpx;
margin-bottom: 16rpx;
}
.bulge {
background-color: #071320;
}
.bulge .tab-bar-bulge{
position: absolute;
z-index: -1;
width: 130rpx;
height: 130rpx;
top: -26rpx;
border-radius: 50%;
border-top: 1px solid #071320;
background-color: #071320;
}
.bulge .image{
position: absolute;
width: 122rpx;
height: 122rpx;
top: -25rpx;
}
.bulge .tab-bar-view{
position: relative;
bottom: -14px;
}
.tab-bar-item .tab-bar-view {
font-size: 24rpx;
font-family: SourceHanSansSC, SourceHanSansSC-Regular;
font-weight: 400;
text-align: center;
color: #999999;
letter-spacing: 2.26rpx;
}
app.json
"tabBar": {
"custom": true,
"color": "#999",
"position": "bottom",
"selectedColor": "#343673",
"list": [{
"pagePath": "page/index/index",
"text": "首页",
"iconPath": "images/btn/home.png",
"selectedIconPath": "images/btn/home2.png"
},
{
"pagePath": "page/visitinfo/visitinfo",
"text": "观众证",
"iconPath": "images/btn/book.png",
"selectedIconPath": "images/btn/book2.png"
},
{
"pagePath": "page/search/search",
"text": "展商查询",
"iconPath": "images/btn/search.png",
"selectedIconPath": "images/btn/search2.png"
},
{
"pagePath": "page/My/My",
"text": "我的",
"iconPath": "images/btn/my.png",
"selectedIconPath": "images/btn/my2.png"
}
]
},