赞
踩
"tabBar": { "custom": true, "list":[ { "pagePath": "pages/aboutFind/find/find", "text": "发现", "iconPath": "/public/image/icon_find2.png", "selectedIconPath": "/public/image/icon_find1.png" }, { "pagePath": "pages/index/index", "text": "通行", "iconPath": "/public/image/icon_go2.png", "selectedIconPath": "/public/image/icon_go1.png" }, { "pagePath": "pages/aboutMe/myInfo/myInfo", "text": "我的", "iconPath": "/public/image/icon_set2.png", "selectedIconPath": "/public/image/icon_set1.png" } ] },
注意添加: "custom": true
注意点:
文件夹要在根目录下,名字为custom-tab-bar
,并且里面的每个文件名为index
(1)index.wxml
<view class="tabBar">
<view class="cont">
<block wx:for="{{list}}" wx:key="index" class="cont-item">
<view data-path="{{item.pagePath}}" data-index="{{item.pagePath}}" bindtap="switchTab" class="{{item.search?'search':'item'}} {{selected === index ? 'on' : 'off'}}">
<image src="{{selected === index ? item.selectedIconPath : item.iconPath}}"></image>
<view class="txt {{selected === index ? 'selectedColor' : ''}}">{{item.text}}</view>
</view>
</block>
</view>
</view>
(2)index.js
Component({ /** * 组件的属性列表 */ properties: { }, /** * 组件的初始数据 */ data: { selected: 0, color: "#fff", selectedColor: "#6777FD", list: [ { pagePath: "/pages/aboutFind/find/find", text: "发现", iconPath: "/public/image/icon_find2.png", selectedIconPath: "/public/image/icon_find1.png" }, { pagePath: "/pages/index/index", text: "通行", iconPath: "/public/image/icon_go2.png", selectedIconPath: "/public/image/icon_go1.png", search: true }, { pagePath: "/pages/aboutMe/myInfo/myInfo", text: "我的", iconPath: "/public/image/icon_set2.png", selectedIconPath: "/public/image/icon_set1.png" } ] }, /** * 组件的方法列表 */ methods: { switchTab(e) { const data = e.currentTarget.dataset const url = data.path wx.switchTab({ url }) } } })
(3)index.json
{
"component": true,
"usingComponents": {}
}
(4)index.wxss
.tabBar { z-index: 100; width: 100%; position: fixed; bottom: 0; font-size: 28rpx; background-color: #fff; color: #636363; border-radius: 50rpx 50rpx 0px 0px; } .cont { z-index: 0; height: calc(100rpx + env(safe-area-inset-bottom) / 2); padding-bottom: calc(env(safe-area-inset-bottom) / 2); padding-bottom: 30rpx; display: flex; justify-content: space-around; } .cont .item { font-size: 24rpx; position: relative; width: 15%; text-align: center; padding: 0; display: block; height: auto; line-height: 1; margin: 0; background-color: inherit; overflow: initial; justify-content: center; align-items: center; padding-top: 20rpx; } .cont .item:first-child { right: 45rpx; } .cont .item:last-child { left: 45rpx; } .cont .item image:first-child { width: 43rpx !important; height: 43rpx !important; margin: auto } .cont .item image:last-child { width: 41rpx !important; height: 43rpx !important; margin: auto } .cont .txt { margin-top: 20rpx; } .cont .on { position: relative; } .cont .on:not(:nth-child(2)):before { content: ""; display: block; position: absolute; top: 0; width: 100%; height: 6rpx; background-color: #17C2D8; border-radius:120rpx !important; } .cont .search { position: absolute; left: 50%; transform: translate(-50%,0); top: -50rpx; display: flex; flex-direction: column; justify-content: center; align-items: center; } .cont .search image { width: 100rpx !important; height: 100rpx !important; z-index: 2; border-radius: 100%; } .cont .search .txt { margin-top: 26rpx; } .cont .selectedColor { color: #17C2D8; }
注意:
如需实现 tab 选中态,要在当前页面下,通过 getTabBar 接口获取组件实例,并调用 setData 更新选中态
(1)find 自定义tabbar
onShow() {
if (typeof this.getTabBar === 'function' && this.getTabBar()) {
this.getTabBar().setData({
selected: 0
})
}
}
(2)index 自定义tabbar
onShow() {
if (typeof this.getTabBar === 'function' && this.getTabBar()) {
this.getTabBar().setData({
selected: 1
})
}
}
(3)myInfo 自定义tabbar
onShow() {
if (typeof this.getTabBar === 'function' && this.getTabBar()) {
this.getTabBar().setData({
selected: 2
})
}
}
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。