更新记录
1.1.3(2021-07-17) 下载此版本
上传演示项目
1.1.2(2021-07-17) 下载此版本
1、把演示数据从组件里提出来,写到readme里了,供测试参考; 2、增加了@tabBarCreateEvent事件,即tabBar组件创建时触发的事件; 3、修改了@tabBarChangeEvent事件的返回参数形式。
1.1.1(2021-07-17) 下载此版本
修改readme.md文件
查看更多平台兼容性
Vue2 | Vue3 |
---|---|
√ | × |
App | 快应用 | 微信小程序 | 支付宝小程序 | 百度小程序 | 字节小程序 | QQ小程序 |
---|---|---|---|---|---|---|
HBuilderX 3.1.0 | × | √ | × | × | × | × |
钉钉小程序 | 快手小程序 | 飞书小程序 | 京东小程序 |
---|---|---|---|
× | × | × | × |
H5-Safari | Android Browser | 微信浏览器(Android) | QQ浏览器(Android) | Chrome | IE | Edge | Firefox | PC-Safari |
---|---|---|---|---|---|---|---|---|
× | × | × | × | × | × | × | × | × |
tbs-tabBarInPage 自定义tabBar组件
组件名:tbs-tabBarInPage
自定义tabBar组件
说明
在页面中生成tabBar的组件,该tabBar完全自定义,不受小程序2~5个tab的限制。
安装方式
本组件符合easycom规范,HBuilderX 2.5.5
起,只需将本组件导入项目,在页面template
中即可直接使用,无需在页面中import
和注册components
。
API
tbs-tabBarInPage Props
属性名 | 类型 | 默认值 | 说明 |
---|---|---|---|
tabBar | Object | 传递给组件的tabBar数据 |
属性说明:
tabBar里面的数据结构需要有一定的格式要求,示例:
{ //此处为tabBar属性的demo演示数据
selected: 0, // 当前选择的tab的index序号
color: "#7A7E83", // 非选择项的字体颜色
selectedColor: "#3cc51f", // 选择项的字体颜色
list: [{ // tabBar 里的item项目列表
// 此处图标icon的路径可以有两种表示方式,一种是图片路径格式,另一种是采用base64格式
// 图片路径格式必须要保证路径下的文件是存在的,演示如下:
// selectIconPath: "/static/images/tabbar/home-a.png",
// iconPath: "/static/images/tabbar/home.png",
// 下面是demo数据,为了便于使用测试,使用base64格式加载icon
selectIconPath: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAADIUlEQVRoQ+2ZO2gTcRzHP7+r+Nh8DA4macVFVFRU3IRuLlYXnaSL+ChtbS7BQRSxQqFDtblWW/G16CK6iDrpIIh2URcfoHTyLkUcShfBpbmfJK01bdPcI7mYQm4L93t8P7/f//6vCMv8kWWunwZAqQ4mLD2EcBplP0IOeIfLgJ2St9XueHU70KtGYh0WytmSQpWUnRKrmhBVA2i5qlvdFeTFHSwrULjt5jCzafldDZCqAMQtPSwwBLT4FPVGXVJOWt77tF/SrGKA5oyeU2EghJBJhJSdlAchfOdcQgPEBnWNYRSqfqoSAQj9dlIuhI0RCmDTNd3VZHAd4UDYxMV+Ak9yLt3ZtEwEjRcYIGHpMeAmsCFoMg/7b2rQ4/TIiyBxAwHEM3pRhL4gCYLaKqQdUzJ+/XwBtGR0rWtwA+W438CV2Cncc5KcQkS94ngCxAZ1v2FwC9jtFazK78dcl45sWj6Vi1sWIDGk7Sh3gZVVFuc33JQKnU5SHi7lsCRAwtJ+4LzfTFHaKfQ5plwqlWMRwGZLN+aUOwhtUYoKGjs/1U6v4OREt0wumIL//WzJaKsrhSGzJWiCGtmPK5x0THn9N99cB+KWdgqM1EhIRWkUuhxTRvNBCgCxjLYawquKotbeuc025XkBIJHRdoT7sxoeA/nVtv4e4Rk6+20KZ+yk3C4eQiMifAXWo/TWn/rCeJnRpUzZpgzPDaFisYkhvVzPAHZSriw5CxWGUwMgwsEn9DY6EGF9vUM3OuBdo78WvxReipIVYVohVthbKav9hyhhWaMOjIly9HtKfsybnod1Gy6PgO2hIWoA8MU2ZUc5gQlL83dBe0NBRA2gMOqY0lVOXHxI74lyoi4B8kv9wnl6odCKFsqoO9AA8BpXjQ6EqFDjG5i/d454M1cXs9DM5W1+xQz+RA1Q4i+qRfdCm4Y11uTiBFdfdOTzcg55ZFU44pjytOyJrHAqq6NbuSKxH2xT9i2sjdfVYgpY5VXQGrz/qUqHk5InvgHyhs0Z3ePCTjForoHIkikExnPK56wpH0sZeF6v/y/hfvM2APxWKiq7Zd+BP2J+ZUCnohS9AAAAAElFTkSuQmCC",
iconPath: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAERElEQVRoQ+2ZTYhbVRTH/+cmDriRUheCCgoiOLpwBCm6ENwUF1rLMMm9L4QsNG1n7Fhm1Cp+gRGUilq02kH7IZR2SO694xBR6UZQV4robFqRYEVFF+LGCDLqzCTvyBuScJuPSV7mOWQgdxXeO/ec/++ce99974SwzQdtc/0YArSr4MLCwgO+7x8AsAtAFcCSEOJkMpn8OOqKR1qBXC4nRkdH3wRwqJ1QZj5eKpVmcrmcHxVIZAD5fP6WWCwWiL+vi7hPiGhWSvldFBCRABQKhQeFEMcA3OiIOkVEAdAqMz8FYL9z75caRHGzEJsGMMYcBvBak5DDSqmj7jWt9ZNE9Kp7jYiekVK+shmIvgGstVcyc5D1RmaJ6Eff92c8z2u7WbXWewEcI6Ib6qKJ6Ey5XJ6enJz8ux+QvgC01rcDeJuI7nGCnq9UKrPpdPrSRkJqe+UtALsduy8rlcqhdDq9FBYiNIDWOklE7wC42gn2hlLq8TDBjTHHAUw7c/4AMKOUmg/jJxSA1vo5InrJDcDMU57nnQgTtG6rtZ6pbfTGdCJ6WUr5fK/+egIoFos7VldXg4ylnbVbqlarj6RSqc97DdbOzlq72/f9OSK62fH9/tra2oF0Ol3u5rsrgLV2FzMHGR5zAhRXVlamM5nMb90C9HLfWnsdgBPMfL9jf1EIMZVMJr/YyMeGANbaDDOfBjDiODmilHq2F2FhbYwxrwN4wpm3SkQHpZTvdfLVEcBae4SZn65PZOY1IURWSnkurLAw9saYhwG8C+AKZ95RpVRw3rSMFoB8Pn9NLBY7BWCPI/5CPB7PJhKJb8KI6ddWa30XgNNEdJvj43w8Ht83MTFx2bK9DKBQKNwrhAiWzE2OeLO8vLw/m83+1a+gfubNz89fFY/HA4ikM/8nItonpfy0sR/rP7TWB4lorilYTin1Yj8CoppjjHkBQK7J36NKqXWt6xWoZf6zNkEHFQBCiD3B90UdICOEOLtORLTAzPWyDSwAEU1KKU829oAxZo6ZS0S00ynZoAHUl1JZKRW8T7V+EzetuYEDaN6TLY/RIUBUj5+an24JHVYg4oS3uBtWoN+T2Fp7K4C7fd//F8DXnud930+1trwCTleu8TJYE/5RP925LQWw1u5k5osAru2Q7Z9HRkbuGB8f/7PXamwpgNbaI6JC402R6Jzv+/8QUdAnXR++7z+USqXODCRAp2x1y+JGMN3mRnoODAHalGJYgTDnwHAJDZcQgFrz1tY+L7+SUgYtjp7G/7GErLVnmTkTCGDmxzzPC/40aYyWx+ji4uL1lUrlV8fmBwBhOsb1z77mTkKn692S0/BDRHullB9uCBDcNMYEbe+gmTtIY0kpdWezoI6tRa31LBEFPZkdA0DxO4AppdQHPQMEhtbasWq1OiaEaPwltNUwRHRJCPFtIpG40C521/b6VgsOG28IEDZjUdtv+wr8B8kwYU+OeseKAAAAAElFTkSuQmCC",
text: "首页"
}, {
selectIconPath: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAACmUlEQVRoQ+2YP2hTURSHv18yCQ5FtIK2zxZnF3EUsZPUinSpIEVqUcHF5mZwE2wHJ6V9HRwUxU5FdHCoWnCq1FV0qEK3vBdpBRHcBJEciVJJY5q+JC+SCw28JZxz+b537r93hOc/ec7PjkC9CvaHtr9kXDBxG7GGsQ4sZ4ypQl7f0qh+WysQhLYMHK8B+h64Fju9aVWibQJBaFeA+3UAv8sYifJ60YpEWwT23bXdu36ygnGoHpzBfNFptOMEekM7IXidBCxj9BfyKiSJrRXTlgoEs5bDCJNAmTFezGsuSez/FJjDGEsEJSbjnKYSxdYISr8CTywbrLEKHE4E1WkCvTM2LPEsEXw5qOMEQnsguOSlQN+MdZVgFdHtpUAwazcxJhPDl2eQuB7ldKeRnMrY1BZxENoZYKFREMtwqjihV43mbcSnItA7YxclHjUDETu1xNBSchkcMSY42Qw88DV22ttk7u+0TQJ/53DV1tbM3G4FqkbuW8RCrQNvs0BotpFcWdqg4v+UwRod7mnsdG7LRVwJ2qEC5V1rNMppvuYi9kHAYLHodNpbgTJ45ezwbQ2U+QuxU7+3FTBYKjoNeCsAzMVO4/4KVJ1R3q2B6k9Q7wRKxsCnvJa8nULVXQzvKlB9e/VNYNMZ8O9ttMMvc9VngHcCEreinG54exuVGIpyeumtwI8M3Z8n9MVXgZXY6Uj1F5BPu9C92OmqtwKCy5HTQ38FMhyNJvTOV4H12OlArQ6AH20VYyHO6+y2Ao32OILQRoCNp9H05PF1WvAtdeY2CHqm7WA2y3DJGBIMJifbPlLwOHI6v1VkKgKVg/dM256sGDRxTNBn0Mefp2t7XDAoH1QfgI+Cxdjpeb281AWSQKYZsyOQ5ttsZqxfr75fQF7akegAAAAASUVORK5CYII=",
iconPath: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAEPUlEQVRoQ+2ZXWhcRRTH/+dukieFIlJBBBuq+KC24kNBFLEI1i/EJeScexNjLVX0weqTiqjYPlgUffADpRbFILI7ZwLGULFWfYhEBAWxYC0KRdcXi4RC9cUQkjsycTbcbHez3eyG3AsdWFju3Z35/+acM2fmDKHgjQquHxcAVrNgpVK5rFQqjQF4FcCfAE4DmBkYGDhQLpfP9sL662oBVZ0BcEsToceJaB8zf9MtxLoBqOojAA6vIvDfKIp4eHj4024g1gXAWnsRgBPOuSuDuHeI6IU0TR8kohcBbArPj4jIfbkDUNVbAXwdhM329fVtHxoa8v6/1FT1DIBL/HciupaZT64VYr0s8KRz7nUvyjl3OI7jR7MCrbXWOTccAB5m5vdzBaCq4wB2B1FjIvJRVqCqejfaH57tF5EDuQGw1pacc78C2OpFLSwsbBkdHf0jK9AYs4+I3swlgKreD2AyuM9MHMc+HlY0Y8woEdWtki8LGGPeI6K9QfFBEXmuCcBdRPRZ7iwwOTm5aX5+3rvP5iDuThE51ghgrR1zzn2YO4CG4DwlIlc3C05VPQSgvjI9JSKvbXgQT0xM3Jum6ZGMkLdE5IkWAD8BuC7Eya44jr/YUIBqtfpQFEUfZETUiOgGZv67UZiq3gxgeQ8kIl3loq7+7IWXSqXdzrnbskKJaBsz+1k+p6nqKwCe9i+I6AwzX7rW2V/qI/vnjA+vWNoafLvleEQ0XSqVRrLbhiYW+AXANR2K/gGA3zedk/AaAVy946xpVXX5eYuBawDGzyejqurvALZ0CLD0cyKaYGZeYe0GC3QK8L1z7u04jutLYltdIV78VmKtEKPMXKkP1LEFug26toTN42Z570RER5n57kIBeLFZN85OYiEsYK0ddM79Fma9JiKDhbJAtVq9PYqir0IgTzPzzkIBZM/XRDTOzHuKBnAQwLNB9IocVYgYMMYYIhIPkKbpniRJ/Inv/9zQaR7YoGX0OwA7AsDOJEmmiwYwC2Bpz5Sm6WCSJD7zF8MCU1NTF8/Nzf1TF9zoAbl3IWPMdiI63iwHFCIGjDExEVWb5YBCAKjqywCeCQAvMfPz2YUn9y6kqp8D2BVE3yMi9WpGMYJYVf+qVzmIaDMz+xVpueXaAsaYrUR0Kqg9ISLXZ8XnPgastWXn3MdB9Lsi8lihALJncSJqWsXu2IUaZwDAocXFxTdGRkb8Yb2nTVX97JdDBr4xSZIfu7bAKgp9te2YiHzSKwpV9f7v4+A0M1/erN+ellXCAGeJ6Ms0Tb8lIl/gqvX399fO91bSWutvbq5K03SMiB4Pfba8iuqqsGWt3euc85Xom3o16y36aVmC7wqgPpiq+iPeAwDuAHBFj2GMiCSt+uwJQLbzSqWyLYqiHf7yLtR+fP3Hf+o3k+34ZonoZ+fcySiKjra7hu05QDt1vX5/AaDXM9ppf/8BjdUzT5WdwHQAAAAASUVORK5CYII=",
text: "分类"
}, {
selectIconPath: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAACp0lEQVRoQ+2ZvWsUURDAf3Mn2okW2mj2sFFMQLS0sFAEbYQIWgrxCwQhu4d/gPEfMJvYiKgJljZRbEwhWgiWKn6BgnjvThAsFDvB25G95MJG924/E+8FF5Zt5s3M783szPsQLH/Ecv/5D9CN4LZp3b4uYBRhWMEhfIPOFyoYwAiYIOBVdT1zny7KlzKiXygCodPVNicQjgGHMjmkPBCY/1Xl/udxaWUaGxHOBVCb1N0qnBYYU9iS13g4TuCrwqwoM426vMuqKzOA4+t1YAzYkNVYgvxPYNZ4ciGL3kwAjq93gZNZDOSQfWo8OZB2XGqAmq8vFfakVVxETsE0Paml0ZEKwPFV0ygrW8Z4kuhfooDj62tgpGznUup7ZDw53E+2L8Aq5XxfFhGuNly51EuoJ4AzpZdRJlLOVLxYhZGgzdaK8LiQHmHCuHIlTkcsgDOtwwQ8AzbmNhwxWsJk/KDCfjMub//0JxZgyNebAmdzO7/QoZZmrQQAFG41PTmXCDDk6xGBh4WcXwGAUKXC0aYn81Hf/oqA4+sN4PxAAgi3m64sy4w4gHLKZskp1Amq8L7hyq6eEahd0x3a5mPh2V+hFArVBsLOlisfuj4ui4AzpadQ7gwygApnmq7MxAP4Ogl4gwwA+MaTeixAzdc5hdFBBhC41/DkeK8IPAf2JgJIug7d7Z6dPpDmSdf5XxhP9vUC+AZs6mcrUA626vIkjT9ZZRZXAG8Sxn03nmxeswB2p9Ba+IntLqPWNzLrlxJhaSptD/wvFnOLAHYvp63f0IRRsHpL2Ukj2zf1HQibj1W6CyWrD7YiEOXskbMuTRfkix0tRiDsPdztQlh9vL7K/8TKXHBEIOy9YlpKJ5sv+aLFxNpr1riKaOVFd77SXu6oxDuycs2Vr816gN/jFqRAWR1aBgAAAABJRU5ErkJggg==",
iconPath: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAADwUlEQVRoQ+2ZTWgdVRTHz5kJSLuQunAhhkqhVhulseiiQgtNGrALBSN558yECFo1SldKF62rtqtKF203QhvaRCQk996QJhIFA1a7KBRR6YdioZYuYgsFFy0uKiV5c8oNd2T6MpPMpAnNFQeG95g595z/b879vgieX+i5fvgfIM3g4OBgc1NT05sA0IKIawEgva3JlL1FxP7+GgTBGBHdWorsP1QGnOguRHwDANorCpoAgMnp6emvenp6blQs+6/5ogCUUhsB4F1EfAcAnlxscFfuLxH5AgAGoii6UtVXZQCl1HEn/LGcYD8BwDcics3eYRj+YW3q9fqziLje3R0isjWn7D0LEkXRR1UgKgEYY4yI1BoCTNg6PTMz810cx3+WCT46OvpUvV63INaXrX7Z6xwzbyvjx9qUBlBKXULETRnHVnhfrVb7umywPLuRkZHXkyTpbQCZYuZnyvgtBaC1lqwzRPyQiPrKBChro5Tah4iHsvbMvKC+BQ2MMb+JyAupY0R8hYh+KSusip3W2nbDY5lYZ4ioYz4f8wI01vkyX6SK4CLbbMZF5EgURXuKbAsBtNb7AeBApmAnM49XEWiM+cF2s0T0YsVyL4vIz5kyB5j5YJ6PXABjTIuInAeAx20hEfk0iqLPqoho+ACFAop8GmN6ReSEe/83Ir5KRL832ucCKKVOIuJ7zniMmd+qIt7aPiyA83EaADrdRzwVRdH7CwJorV8DgG8zDWkHEX3/KACMMe0iciYTeyczTz7QIzYK01rb7vED93yAmXdVFb9UGXB++u20xWnoZ+a0Zsw+mlOFst1mkiRb4jj+8VECKKW2IKJtj/a6yszPFWbAGLNORK7PkiFeJqLWxYhfygxYX8aYKyLyvP0fhuGGrq6u2TnWnAwYY94WkS/du8PMvHclAGitPweA3VZLEAS7arXaQC6A1vooAHxsXyZJ0hbH8dmVADA8PLw9CAI7ptjrGDN/UgRgh3E7nNspcGt3d/fllQAwNDS0KQzDS07LODPPdq1zqpDW+gIAvOTaQDMR3cwDcH18GbZ0JM+O6IXlikZbY8zTIpKu2i4y8+YigNsAsMYBrCaifxqjNU7uylCUtUHEs0TUlhNzlYjcdc/vMPMT/1kA76uQ943Y727U+4HM+6mE7Zq8nsxZAO+n094vaGwWvF5Sunbg96LetQV/t1XSiZLXG1sZCH+3FlMIrzd3Uwivt9eL2oR77scBRyYT/h4xZSD8PeTLrle9PWbNW6R7edBddrdhOe0WPCNbzuBL4dt7gPtaw9JPjVtHHQAAAABJRU5ErkJggg==",
text: "发布"
}, {
selectIconPath: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAELUlEQVRoQ+2ZT2gcdRTHP282UYslrf8CCbubhgaqraXiiuDNQKEeLOKhqVbxVNuDxuwkFbQnL+rBmN2NKDQ9Fiu1JxFFBLWiCIKNWkgUhSaZXbfEFlEMpEmz82QmyTabZHdnd2eSjeR3G+a97595b/783ggbfMkG18+mgfWu4GYFNkQFokl9HOUgQgyhBaUVyABp4HuUYVv5JNMrf3kxFB7QO0MGT6ryMMJeIAKEEbIoV4BvJMTHE93yZTm8ki0UTekxlGNArBwQMCLKmxOmvF8qti2hz6jwKrDHA+ZFhCGrR4aKxRY1EE3qh8AhDyTLQ07PzXEye0KuLT3R2q93NzTwBvB8FZhfWHHZv1reqgYiSf1T4J4qiNwUVX6WEEesl2TUOY4O6m7NcVaEfdViovxrmdK0PH+FgWhSfwHurZroZuIIBl3uoY1TTS8tU5JW4UI6Lp1LgwoMRBN6CnF73q81sgBUs/i8IGXIMuX44nHeQDSlMZQf/FIeKI7wkNUjFx2OmwYSmkToCZTYJ3BV3k2b8mKhgaSOATt84gga5g8rLuG8gXBCHzWEr4Jm9RPfVjozplxwWyiS0KdFOOsnQdBYqhxJm/LBvIGk9gn0B03qJ77CiXRc3t6wBkR5ecKUftdANKnPAmf8vEKBYynPWaacWazAAYHPAif1kUBtDqR75XPXwO7X9Jap7fwE3OcjR5BQM1tbaRrtktn8iyyS1JMCrwfJ6iP2OSsuTxW+yN7TO7jB16i7wajnNQPst+LybYEB92ZOaRfKuXpWr0pf2pSBRY0rP6dTehrlaJ2ayLdOUQPt/dqWa+BT596uMxMjEuLgRLc432z5teqOLDygew2D88CuejAhcElCHB7vll+X6ym6J96R0AdsOI/Qsa4mhB9tOJzpkd9X01FuKuFscpxKtK+TiWGUQ5Ypl4vxl53MtQ/qvpzyEUrbWppw20Z5YtyU8VK8ZQ24j9cB3YPhfmq4m4g1WKNzOR7L9okzOCu5PBlwENqTuiuHu+lpKQday3kRfrMNOtPdkvWC49mAAxYZ1J2S4zuEZi/gVcSMheCRsbhMes2tyIBbifn3hDMRuMsrice49NwWHsweL5zolcut2IBbiXe0VXI4M5/t5Qg8nr9i29zvdTi8FLMqAw7Azre0+UYjzrN5xbjPo+j5MOVawwwdl1+RfyrKWwiu2oCT74zJDQMLuL0acuDv6UYiV1+QqSrza/9H1jGoTbPKJMptFYqYsm2aM70yXWFeQXhNFVhECg/oFsPAaYFGT2KE61tb2ObsqDzFlwjyxYCDHzuljVenuQ4YZUTlrFZupUtytYp38n0zMH9DqkRSTBb9t+DO+NkGon6I99/Agqoif3eK/mWpxYy/FViixB3XQ0xtZlUYzsTlUi1Ci+UGZiAIsathbhpYqyv9v22h/wApaT5AcvyJYQAAAABJRU5ErkJggg==",
iconPath: "data:image/png;base64,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",
text: "收藏"
}, {
selectIconPath: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAADxklEQVRoQ+2ZXWgcVRTHf2e66ZOISh6k6U60D1asYEGxghQUA0WqKEIpUlTatxbNzgRsi4hWoWBFMpMoQfDNxg/8eBE/asmDqAVpH7RiwQep2dkUocUWRbGoO0c2IeJHd8+9M7MJhc7r+Z//Ob9z9947wwoX+SMXef9cAljuFax8BYZe0uuCP7k+UAYVBkXQXDkTBJxut/libkzOVgldCcCqF3SwNsCDqjwgcEevBhXeCJQPmrG8VgVIaYDhRHeosBtY69nQEYTJrCFveeb9S14YoDP1gRqvKNxfpgHg3ZUBO74blZ+L+BQCGJrUm1Yoh1CuLlL0fznCZ0HOw7OxzPr6eQOsHtehIGDOt5ClV+V4PsBdpx6VHy3tP+PeAGGqXwLrfYp4aF/OItnpofe7yMJED7CwYfv5PJJF8qprAecVCBO9HeFzV+OiOoGv2zm3zY3Jby4e7gCpvglsdTEtrRH2ZA153sXHCaCe6iaBQy6GFWlO1c6z7uRe+cnycwIYTnW/whOWWZVxETY3G/Kh5ekEECb6KcJGy6zKuAj7mw150vJ0A0hVLaOq4wqftCK50/I1AeZf1GqcsYz6EP8hi2SV5WsCXJvq2jZ8axn1I147zxXWRjYBlur8v9AA8pwNc2NytNdwbIBJvYGcE/2YsOUpf7Cm+bh8Xwpg9bheFQR4vWBZjTnGf80iuczSmivQMQhT7Vwol1tmFcePZZHcanm6AnwDrLPMKo5PZ5E8ZHm6AST6PsJmy6zSuLAva8gzlqcTQD3VrQKdl7mletrBCm6cfUzM49sJYH4fJHoM4ZalIFB4vRXJNpda7gCpjgITLqZlNQr3tSJ5z8XHHWBKr+R3jgN1F+MSGqfTZ9HfGaCTMJzoNhWmSzRnpZ5DuTeL5YglLATQSaonulOEKdcCXjplSxbLOz45XiuwaBxO6G6UAz6FTK0ymsXyoqn7j6AQwPxKpBoLPAuY173R1C8KT7UiSXyb7+gLA3SSr0l0fS48B2wqUhz4OFD2zsbyVcH8cgB//6QSjRD8JqjEWSxp0cYLb+JuBUPPz84sklKrXxogXLgXRhR2Wf8JdIPufPcKTLGSmWyXnCuyGl5TCBNdQ8AIygiwpUjBHjlvI8yQM5PFctLV2wmgPq4bg4DtCttdjUvphIPaZro1Joctn54Aw4nerTLfdNXTtvpaiAuHyZnOYjnYLaErQDihT6Psc6vUZ1WPb4PuAJ6nSp8R6HZq9QK4B+Hmfjfm4i85R5uxfHQhrdMmdimyXJpLAMs1+dI38XI3vlj/L/VgEEAZZtRVAAAAAElFTkSuQmCC",
iconPath: "data:image/png;base64,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",
text: "我的"
}]
}
tbs-tabBarInPage Events
事件称名 | 说明 | 返回参数 |
---|---|---|
@tabBarCreateEvent | 当tabBar对象创建时触发的事件 | {tabBarHeight:Number,pagesHeight:Number} |
@tabBarChangeEvent | 当tabBar切换时触发的事件 | {selected:当前选择的tab的index序号} |
属性说明: @tabBarCreateEvent事件的返回参数,tabBarHeight表示tabBar的高度(px),pagesHeight表示当tabBar在底边时,整个页面剩余部分的高度(px),也就是页面填充高度
基本用法
在调用组件的页面里编写如下代码:
在 template
中使用组件
<tbs-tabBarInPage :tabBar="tabBar" @tabBarChangeEvent="onTabBarChange" @tabBarCreateEvent="onTabBarCreate"></tbs-tabBarInPage>
在 script
的 data
中加入tabBar变量,表示当前页面传给组件的自定义tabBar数据
data(){
return{
selected: 0,
tabBar: { //此处为tabBar属性的demo演示数据,当然你可以根据需要进行修改
selected: 0, // 当前选择的tab的index序号
color: "#7A7E83", // 非选择项的字体颜色
selectedColor: "#3cc51f", // 选择项的字体颜色
list: [{ // tabBar 里的item项目列表
// 此处图标icon的路径可以有两种表示方式,一种是图片路径格式,另一种是采用base64格式
// 图片路径格式必须要保证路径下的文件是存在的,演示如下:
// selectIconPath: "/static/images/tabbar/home-a.png",
// iconPath: "/static/images/tabbar/home.png",
// 下面是demo数据,为了便于使用测试,使用base64格式加载icon
selectIconPath: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAADIUlEQVRoQ+2ZO2gTcRzHP7+r+Nh8DA4macVFVFRU3IRuLlYXnaSL+ChtbS7BQRSxQqFDtblWW/G16CK6iDrpIIh2URcfoHTyLkUcShfBpbmfJK01bdPcI7mYQm4L93t8P7/f//6vCMv8kWWunwZAqQ4mLD2EcBplP0IOeIfLgJ2St9XueHU70KtGYh0WytmSQpWUnRKrmhBVA2i5qlvdFeTFHSwrULjt5jCzafldDZCqAMQtPSwwBLT4FPVGXVJOWt77tF/SrGKA5oyeU2EghJBJhJSdlAchfOdcQgPEBnWNYRSqfqoSAQj9dlIuhI0RCmDTNd3VZHAd4UDYxMV+Ak9yLt3ZtEwEjRcYIGHpMeAmsCFoMg/7b2rQ4/TIiyBxAwHEM3pRhL4gCYLaKqQdUzJ+/XwBtGR0rWtwA+W438CV2Cncc5KcQkS94ngCxAZ1v2FwC9jtFazK78dcl45sWj6Vi1sWIDGk7Sh3gZVVFuc33JQKnU5SHi7lsCRAwtJ+4LzfTFHaKfQ5plwqlWMRwGZLN+aUOwhtUYoKGjs/1U6v4OREt0wumIL//WzJaKsrhSGzJWiCGtmPK5x0THn9N99cB+KWdgqM1EhIRWkUuhxTRvNBCgCxjLYawquKotbeuc025XkBIJHRdoT7sxoeA/nVtv4e4Rk6+20KZ+yk3C4eQiMifAXWo/TWn/rCeJnRpUzZpgzPDaFisYkhvVzPAHZSriw5CxWGUwMgwsEn9DY6EGF9vUM3OuBdo78WvxReipIVYVohVthbKav9hyhhWaMOjIly9HtKfsybnod1Gy6PgO2hIWoA8MU2ZUc5gQlL83dBe0NBRA2gMOqY0lVOXHxI74lyoi4B8kv9wnl6odCKFsqoO9AA8BpXjQ6EqFDjG5i/d454M1cXs9DM5W1+xQz+RA1Q4i+qRfdCm4Y11uTiBFdfdOTzcg55ZFU44pjytOyJrHAqq6NbuSKxH2xT9i2sjdfVYgpY5VXQGrz/qUqHk5InvgHyhs0Z3ePCTjForoHIkikExnPK56wpH0sZeF6v/y/hfvM2APxWKiq7Zd+BP2J+ZUCnohS9AAAAAElFTkSuQmCC",
iconPath: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAERElEQVRoQ+2ZTYhbVRTH/+cmDriRUheCCgoiOLpwBCm6ENwUF1rLMMm9L4QsNG1n7Fhm1Cp+gRGUilq02kH7IZR2SO694xBR6UZQV4robFqRYEVFF+LGCDLqzCTvyBuScJuPSV7mOWQgdxXeO/ec/++ce99974SwzQdtc/0YArSr4MLCwgO+7x8AsAtAFcCSEOJkMpn8OOqKR1qBXC4nRkdH3wRwqJ1QZj5eKpVmcrmcHxVIZAD5fP6WWCwWiL+vi7hPiGhWSvldFBCRABQKhQeFEMcA3OiIOkVEAdAqMz8FYL9z75caRHGzEJsGMMYcBvBak5DDSqmj7jWt9ZNE9Kp7jYiekVK+shmIvgGstVcyc5D1RmaJ6Eff92c8z2u7WbXWewEcI6Ib6qKJ6Ey5XJ6enJz8ux+QvgC01rcDeJuI7nGCnq9UKrPpdPrSRkJqe+UtALsduy8rlcqhdDq9FBYiNIDWOklE7wC42gn2hlLq8TDBjTHHAUw7c/4AMKOUmg/jJxSA1vo5InrJDcDMU57nnQgTtG6rtZ6pbfTGdCJ6WUr5fK/+egIoFos7VldXg4ylnbVbqlarj6RSqc97DdbOzlq72/f9OSK62fH9/tra2oF0Ol3u5rsrgLV2FzMHGR5zAhRXVlamM5nMb90C9HLfWnsdgBPMfL9jf1EIMZVMJr/YyMeGANbaDDOfBjDiODmilHq2F2FhbYwxrwN4wpm3SkQHpZTvdfLVEcBae4SZn65PZOY1IURWSnkurLAw9saYhwG8C+AKZ95RpVRw3rSMFoB8Pn9NLBY7BWCPI/5CPB7PJhKJb8KI6ddWa30XgNNEdJvj43w8Ht83MTFx2bK9DKBQKNwrhAiWzE2OeLO8vLw/m83+1a+gfubNz89fFY/HA4ikM/8nItonpfy0sR/rP7TWB4lorilYTin1Yj8CoppjjHkBQK7J36NKqXWt6xWoZf6zNkEHFQBCiD3B90UdICOEOLtORLTAzPWyDSwAEU1KKU829oAxZo6ZS0S00ynZoAHUl1JZKRW8T7V+EzetuYEDaN6TLY/RIUBUj5+an24JHVYg4oS3uBtWoN+T2Fp7K4C7fd//F8DXnud930+1trwCTleu8TJYE/5RP925LQWw1u5k5osAru2Q7Z9HRkbuGB8f/7PXamwpgNbaI6JC402R6Jzv+/8QUdAnXR++7z+USqXODCRAp2x1y+JGMN3mRnoODAHalGJYgTDnwHAJDZcQgFrz1tY+L7+SUgYtjp7G/7GErLVnmTkTCGDmxzzPC/40aYyWx+ji4uL1lUrlV8fmBwBhOsb1z77mTkKn692S0/BDRHullB9uCBDcNMYEbe+gmTtIY0kpdWezoI6tRa31LBEFPZkdA0DxO4AppdQHPQMEhtbasWq1OiaEaPwltNUwRHRJCPFtIpG40C521/b6VgsOG28IEDZjUdtv+wr8B8kwYU+OeseKAAAAAElFTkSuQmCC",
text: "首页"
}, {
selectIconPath: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAACmUlEQVRoQ+2YP2hTURSHv18yCQ5FtIK2zxZnF3EUsZPUinSpIEVqUcHF5mZwE2wHJ6V9HRwUxU5FdHCoWnCq1FV0qEK3vBdpBRHcBJEciVJJY5q+JC+SCw28JZxz+b537r93hOc/ec7PjkC9CvaHtr9kXDBxG7GGsQ4sZ4ypQl7f0qh+WysQhLYMHK8B+h64Fju9aVWibQJBaFeA+3UAv8sYifJ60YpEWwT23bXdu36ygnGoHpzBfNFptOMEekM7IXidBCxj9BfyKiSJrRXTlgoEs5bDCJNAmTFezGsuSez/FJjDGEsEJSbjnKYSxdYISr8CTywbrLEKHE4E1WkCvTM2LPEsEXw5qOMEQnsguOSlQN+MdZVgFdHtpUAwazcxJhPDl2eQuB7ldKeRnMrY1BZxENoZYKFREMtwqjihV43mbcSnItA7YxclHjUDETu1xNBSchkcMSY42Qw88DV22ttk7u+0TQJ/53DV1tbM3G4FqkbuW8RCrQNvs0BotpFcWdqg4v+UwRod7mnsdG7LRVwJ2qEC5V1rNMppvuYi9kHAYLHodNpbgTJ45ezwbQ2U+QuxU7+3FTBYKjoNeCsAzMVO4/4KVJ1R3q2B6k9Q7wRKxsCnvJa8nULVXQzvKlB9e/VNYNMZ8O9ttMMvc9VngHcCEreinG54exuVGIpyeumtwI8M3Z8n9MVXgZXY6Uj1F5BPu9C92OmqtwKCy5HTQ38FMhyNJvTOV4H12OlArQ6AH20VYyHO6+y2Ao32OILQRoCNp9H05PF1WvAtdeY2CHqm7WA2y3DJGBIMJifbPlLwOHI6v1VkKgKVg/dM256sGDRxTNBn0Mefp2t7XDAoH1QfgI+Cxdjpeb281AWSQKYZsyOQ5ttsZqxfr75fQF7akegAAAAASUVORK5CYII=",
iconPath: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAEPUlEQVRoQ+2ZXWhcRRTH/+dukieFIlJBBBuq+KC24kNBFLEI1i/EJeScexNjLVX0weqTiqjYPlgUffADpRbFILI7ZwLGULFWfYhEBAWxYC0KRdcXi4RC9cUQkjsycTbcbHez3eyG3AsdWFju3Z35/+acM2fmDKHgjQquHxcAVrNgpVK5rFQqjQF4FcCfAE4DmBkYGDhQLpfP9sL662oBVZ0BcEsToceJaB8zf9MtxLoBqOojAA6vIvDfKIp4eHj4024g1gXAWnsRgBPOuSuDuHeI6IU0TR8kohcBbArPj4jIfbkDUNVbAXwdhM329fVtHxoa8v6/1FT1DIBL/HciupaZT64VYr0s8KRz7nUvyjl3OI7jR7MCrbXWOTccAB5m5vdzBaCq4wB2B1FjIvJRVqCqejfaH57tF5EDuQGw1pacc78C2OpFLSwsbBkdHf0jK9AYs4+I3swlgKreD2AyuM9MHMc+HlY0Y8woEdWtki8LGGPeI6K9QfFBEXmuCcBdRPRZ7iwwOTm5aX5+3rvP5iDuThE51ghgrR1zzn2YO4CG4DwlIlc3C05VPQSgvjI9JSKvbXgQT0xM3Jum6ZGMkLdE5IkWAD8BuC7Eya44jr/YUIBqtfpQFEUfZETUiOgGZv67UZiq3gxgeQ8kIl3loq7+7IWXSqXdzrnbskKJaBsz+1k+p6nqKwCe9i+I6AwzX7rW2V/qI/vnjA+vWNoafLvleEQ0XSqVRrLbhiYW+AXANR2K/gGA3zedk/AaAVy946xpVXX5eYuBawDGzyejqurvALZ0CLD0cyKaYGZeYe0GC3QK8L1z7u04jutLYltdIV78VmKtEKPMXKkP1LEFug26toTN42Z570RER5n57kIBeLFZN85OYiEsYK0ddM79Fma9JiKDhbJAtVq9PYqir0IgTzPzzkIBZM/XRDTOzHuKBnAQwLNB9IocVYgYMMYYIhIPkKbpniRJ/Inv/9zQaR7YoGX0OwA7AsDOJEmmiwYwC2Bpz5Sm6WCSJD7zF8MCU1NTF8/Nzf1TF9zoAbl3IWPMdiI63iwHFCIGjDExEVWb5YBCAKjqywCeCQAvMfPz2YUn9y6kqp8D2BVE3yMi9WpGMYJYVf+qVzmIaDMz+xVpueXaAsaYrUR0Kqg9ISLXZ8XnPgastWXn3MdB9Lsi8lihALJncSJqWsXu2IUaZwDAocXFxTdGRkb8Yb2nTVX97JdDBr4xSZIfu7bAKgp9te2YiHzSKwpV9f7v4+A0M1/erN+ellXCAGeJ6Ms0Tb8lIl/gqvX399fO91bSWutvbq5K03SMiB4Pfba8iuqqsGWt3euc85Xom3o16y36aVmC7wqgPpiq+iPeAwDuAHBFj2GMiCSt+uwJQLbzSqWyLYqiHf7yLtR+fP3Hf+o3k+34ZonoZ+fcySiKjra7hu05QDt1vX5/AaDXM9ppf/8BjdUzT5WdwHQAAAAASUVORK5CYII=",
text: "分类"
}, {
selectIconPath: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAACp0lEQVRoQ+2ZvWsUURDAf3Mn2okW2mj2sFFMQLS0sFAEbYQIWgrxCwQhu4d/gPEfMJvYiKgJljZRbEwhWgiWKn6BgnjvThAsFDvB25G95MJG924/E+8FF5Zt5s3M783szPsQLH/Ecv/5D9CN4LZp3b4uYBRhWMEhfIPOFyoYwAiYIOBVdT1zny7KlzKiXygCodPVNicQjgGHMjmkPBCY/1Xl/udxaWUaGxHOBVCb1N0qnBYYU9iS13g4TuCrwqwoM426vMuqKzOA4+t1YAzYkNVYgvxPYNZ4ciGL3kwAjq93gZNZDOSQfWo8OZB2XGqAmq8vFfakVVxETsE0Paml0ZEKwPFV0ygrW8Z4kuhfooDj62tgpGznUup7ZDw53E+2L8Aq5XxfFhGuNly51EuoJ4AzpZdRJlLOVLxYhZGgzdaK8LiQHmHCuHIlTkcsgDOtwwQ8AzbmNhwxWsJk/KDCfjMub//0JxZgyNebAmdzO7/QoZZmrQQAFG41PTmXCDDk6xGBh4WcXwGAUKXC0aYn81Hf/oqA4+sN4PxAAgi3m64sy4w4gHLKZskp1Amq8L7hyq6eEahd0x3a5mPh2V+hFArVBsLOlisfuj4ui4AzpadQ7gwygApnmq7MxAP4Ogl4gwwA+MaTeixAzdc5hdFBBhC41/DkeK8IPAf2JgJIug7d7Z6dPpDmSdf5XxhP9vUC+AZs6mcrUA626vIkjT9ZZRZXAG8Sxn03nmxeswB2p9Ba+IntLqPWNzLrlxJhaSptD/wvFnOLAHYvp63f0IRRsHpL2Ukj2zf1HQibj1W6CyWrD7YiEOXskbMuTRfkix0tRiDsPdztQlh9vL7K/8TKXHBEIOy9YlpKJ5sv+aLFxNpr1riKaOVFd77SXu6oxDuycs2Vr816gN/jFqRAWR1aBgAAAABJRU5ErkJggg==",
iconPath: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAADwUlEQVRoQ+2ZTWgdVRTHz5kJSLuQunAhhkqhVhulseiiQgtNGrALBSN558yECFo1SldKF62rtqtKF203QhvaRCQk996QJhIFA1a7KBRR6YdioZYuYgsFFy0uKiV5c8oNd2T6MpPMpAnNFQeG95g595z/b879vgieX+i5fvgfIM3g4OBgc1NT05sA0IKIawEgva3JlL1FxP7+GgTBGBHdWorsP1QGnOguRHwDANorCpoAgMnp6emvenp6blQs+6/5ogCUUhsB4F1EfAcAnlxscFfuLxH5AgAGoii6UtVXZQCl1HEn/LGcYD8BwDcics3eYRj+YW3q9fqziLje3R0isjWn7D0LEkXRR1UgKgEYY4yI1BoCTNg6PTMz810cx3+WCT46OvpUvV63INaXrX7Z6xwzbyvjx9qUBlBKXULETRnHVnhfrVb7umywPLuRkZHXkyTpbQCZYuZnyvgtBaC1lqwzRPyQiPrKBChro5Tah4iHsvbMvKC+BQ2MMb+JyAupY0R8hYh+KSusip3W2nbDY5lYZ4ioYz4f8wI01vkyX6SK4CLbbMZF5EgURXuKbAsBtNb7AeBApmAnM49XEWiM+cF2s0T0YsVyL4vIz5kyB5j5YJ6PXABjTIuInAeAx20hEfk0iqLPqoho+ACFAop8GmN6ReSEe/83Ir5KRL832ucCKKVOIuJ7zniMmd+qIt7aPiyA83EaADrdRzwVRdH7CwJorV8DgG8zDWkHEX3/KACMMe0iciYTeyczTz7QIzYK01rb7vED93yAmXdVFb9UGXB++u20xWnoZ+a0Zsw+mlOFst1mkiRb4jj+8VECKKW2IKJtj/a6yszPFWbAGLNORK7PkiFeJqLWxYhfygxYX8aYKyLyvP0fhuGGrq6u2TnWnAwYY94WkS/du8PMvHclAGitPweA3VZLEAS7arXaQC6A1vooAHxsXyZJ0hbH8dmVADA8PLw9CAI7ptjrGDN/UgRgh3E7nNspcGt3d/fllQAwNDS0KQzDS07LODPPdq1zqpDW+gIAvOTaQDMR3cwDcH18GbZ0JM+O6IXlikZbY8zTIpKu2i4y8+YigNsAsMYBrCaifxqjNU7uylCUtUHEs0TUlhNzlYjcdc/vMPMT/1kA76uQ943Y727U+4HM+6mE7Zq8nsxZAO+n094vaGwWvF5Sunbg96LetQV/t1XSiZLXG1sZCH+3FlMIrzd3Uwivt9eL2oR77scBRyYT/h4xZSD8PeTLrle9PWbNW6R7edBddrdhOe0WPCNbzuBL4dt7gPtaw9JPjVtHHQAAAABJRU5ErkJggg==",
text: "发布"
}, {
selectIconPath: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAELUlEQVRoQ+2ZT2gcdRTHP282UYslrf8CCbubhgaqraXiiuDNQKEeLOKhqVbxVNuDxuwkFbQnL+rBmN2NKDQ9Fiu1JxFFBLWiCIKNWkgUhSaZXbfEFlEMpEmz82QmyTabZHdnd2eSjeR3G+a97595b/783ggbfMkG18+mgfWu4GYFNkQFokl9HOUgQgyhBaUVyABp4HuUYVv5JNMrf3kxFB7QO0MGT6ryMMJeIAKEEbIoV4BvJMTHE93yZTm8ki0UTekxlGNArBwQMCLKmxOmvF8qti2hz6jwKrDHA+ZFhCGrR4aKxRY1EE3qh8AhDyTLQ07PzXEye0KuLT3R2q93NzTwBvB8FZhfWHHZv1reqgYiSf1T4J4qiNwUVX6WEEesl2TUOY4O6m7NcVaEfdViovxrmdK0PH+FgWhSfwHurZroZuIIBl3uoY1TTS8tU5JW4UI6Lp1LgwoMRBN6CnF73q81sgBUs/i8IGXIMuX44nHeQDSlMZQf/FIeKI7wkNUjFx2OmwYSmkToCZTYJ3BV3k2b8mKhgaSOATt84gga5g8rLuG8gXBCHzWEr4Jm9RPfVjozplxwWyiS0KdFOOsnQdBYqhxJm/LBvIGk9gn0B03qJ77CiXRc3t6wBkR5ecKUftdANKnPAmf8vEKBYynPWaacWazAAYHPAif1kUBtDqR75XPXwO7X9Jap7fwE3OcjR5BQM1tbaRrtktn8iyyS1JMCrwfJ6iP2OSsuTxW+yN7TO7jB16i7wajnNQPst+LybYEB92ZOaRfKuXpWr0pf2pSBRY0rP6dTehrlaJ2ayLdOUQPt/dqWa+BT596uMxMjEuLgRLc432z5teqOLDygew2D88CuejAhcElCHB7vll+X6ym6J96R0AdsOI/Qsa4mhB9tOJzpkd9X01FuKuFscpxKtK+TiWGUQ5Ypl4vxl53MtQ/qvpzyEUrbWppw20Z5YtyU8VK8ZQ24j9cB3YPhfmq4m4g1WKNzOR7L9okzOCu5PBlwENqTuiuHu+lpKQday3kRfrMNOtPdkvWC49mAAxYZ1J2S4zuEZi/gVcSMheCRsbhMes2tyIBbifn3hDMRuMsrice49NwWHsweL5zolcut2IBbiXe0VXI4M5/t5Qg8nr9i29zvdTi8FLMqAw7Azre0+UYjzrN5xbjPo+j5MOVawwwdl1+RfyrKWwiu2oCT74zJDQMLuL0acuDv6UYiV1+QqSrza/9H1jGoTbPKJMptFYqYsm2aM70yXWFeQXhNFVhECg/oFsPAaYFGT2KE61tb2ObsqDzFlwjyxYCDHzuljVenuQ4YZUTlrFZupUtytYp38n0zMH9DqkRSTBb9t+DO+NkGon6I99/Agqoif3eK/mWpxYy/FViixB3XQ0xtZlUYzsTlUi1Ci+UGZiAIsathbhpYqyv9v22h/wApaT5AcvyJYQAAAABJRU5ErkJggg==",
iconPath: "data:image/png;base64,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",
text: "收藏"
}, {
selectIconPath: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAADxklEQVRoQ+2ZXWgcVRTHf2e66ZOISh6k6U60D1asYEGxghQUA0WqKEIpUlTatxbNzgRsi4hWoWBFMpMoQfDNxg/8eBE/asmDqAVpH7RiwQep2dkUocUWRbGoO0c2IeJHd8+9M7MJhc7r+Z//Ob9z9947wwoX+SMXef9cAljuFax8BYZe0uuCP7k+UAYVBkXQXDkTBJxut/libkzOVgldCcCqF3SwNsCDqjwgcEevBhXeCJQPmrG8VgVIaYDhRHeosBtY69nQEYTJrCFveeb9S14YoDP1gRqvKNxfpgHg3ZUBO74blZ+L+BQCGJrUm1Yoh1CuLlL0fznCZ0HOw7OxzPr6eQOsHtehIGDOt5ClV+V4PsBdpx6VHy3tP+PeAGGqXwLrfYp4aF/OItnpofe7yMJED7CwYfv5PJJF8qprAecVCBO9HeFzV+OiOoGv2zm3zY3Jby4e7gCpvglsdTEtrRH2ZA153sXHCaCe6iaBQy6GFWlO1c6z7uRe+cnycwIYTnW/whOWWZVxETY3G/Kh5ekEECb6KcJGy6zKuAj7mw150vJ0A0hVLaOq4wqftCK50/I1AeZf1GqcsYz6EP8hi2SV5WsCXJvq2jZ8axn1I147zxXWRjYBlur8v9AA8pwNc2NytNdwbIBJvYGcE/2YsOUpf7Cm+bh8Xwpg9bheFQR4vWBZjTnGf80iuczSmivQMQhT7Vwol1tmFcePZZHcanm6AnwDrLPMKo5PZ5E8ZHm6AST6PsJmy6zSuLAva8gzlqcTQD3VrQKdl7mletrBCm6cfUzM49sJYH4fJHoM4ZalIFB4vRXJNpda7gCpjgITLqZlNQr3tSJ5z8XHHWBKr+R3jgN1F+MSGqfTZ9HfGaCTMJzoNhWmSzRnpZ5DuTeL5YglLATQSaonulOEKdcCXjplSxbLOz45XiuwaBxO6G6UAz6FTK0ymsXyoqn7j6AQwPxKpBoLPAuY173R1C8KT7UiSXyb7+gLA3SSr0l0fS48B2wqUhz4OFD2zsbyVcH8cgB//6QSjRD8JqjEWSxp0cYLb+JuBUPPz84sklKrXxogXLgXRhR2Wf8JdIPufPcKTLGSmWyXnCuyGl5TCBNdQ8AIygiwpUjBHjlvI8yQM5PFctLV2wmgPq4bg4DtCttdjUvphIPaZro1Joctn54Aw4nerTLfdNXTtvpaiAuHyZnOYjnYLaErQDihT6Psc6vUZ1WPb4PuAJ6nSp8R6HZq9QK4B+Hmfjfm4i85R5uxfHQhrdMmdimyXJpLAMs1+dI38XI3vlj/L/VgEEAZZtRVAAAAAElFTkSuQmCC",
iconPath: "data:image/png;base64,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",
text: "我的"
}]
}
}
}
在 script
的 methods
中编写事件方法代码
methods: {
onTabBarChange(e) {
this.selected = e.selected
console.log('tab 改变了,当前 tab 的 index 为:', e.selected)
},
onTabBarCreate(e) {
console.log('create', e)
}
}