微信小程序 - 自定义tabbar(组件)

时间:2023-03-09 02:14:43
微信小程序 - 自定义tabbar(组件)

微信小程序 - 自定义tabbar(组件)

配置项(关于使用组件)

index.wxml

<!--
tabBar:tabBar配置
activeIndex: 激活页面下标
slots: 多插槽配置(需与页面一致)
--> <tabbar data="{{tabBar}}" activeIndex="0" solts="{{solts}}">
<view slot="index">index1...</view>
<view slot="other">other2...</view>
<view slot="my">my3....</view>
<view slot="hello">hello...4</view>
<view slot="bat">bat...5</view>
</tabbar>

index.js(data

  tabBar: {
"selectedColor": "#5DBCFF",
"normalColor": "#333",
"backgroundColor": "#fff",
"selectedBackgroundColor": "#fff",
"list": [{
"pagePath": "market/index/index",
"iconPath": "images/icon_home.png",
"selectedIconPath": "images/icon_home_selected.png",
"text": "首页"
}, {
"pagePath": "tools/index/index",
"iconPath": "images/icon_cate.png",
"selectedIconPath": "images/icon_cate_selected.png",
"text": "分类"
}, {
"pagePath": "viewing/index/index",
"iconPath": "images/icon_member.png",
"selectedIconPath": "images/icon_member_selected.png",
"text": "我"
}, {
"pagePath": "viewing/index/index",
"iconPath": "images/icon_member.png",
"selectedIconPath": "images/icon_member_selected.png",
"text": "Hello"
}, {
"pagePath": "viewing/index/index",
"iconPath": "images/icon_member.png",
"selectedIconPath": "images/icon_member_selected.png",
"text": "Bat"
}]
},
solts: [{
name: 'index'
}, {
name: 'other'
}, {
name: 'my'
}, {
name: 'hello'
}, {
name: 'bat'
}]

  

示例:点击下载