小程序之自定义tabBar组件封装

最新推荐文章于 2025-01-28 18:31:32 发布

gyuei

最新推荐文章于 2025-01-28 18:31:32 发布

阅读量712

点赞数

分类专栏：小程序

本文链接：https://blog.youkuaiyun.com/gyueh/article/details/107483938

版权

新建组件：在component下新建一个tabBar
组件的index.wxml结构如下：

<cover-view class="tab-bar">
	<cover-view class="tab-bar-border"></cover-view>
	<cover-view wx:for="{
  {list}}" wx:key="index" class="tab-bar-item" data-path="{
  {item.pagePath}}" data-index="{
  {index}}" bindtap="tabChange">
		<cover-image src="{
  {tabbarIndex === index ? item.selectedIconPath : item.iconPath}}"></cover-image>
		<cover-view style="color: {
  {tabbarIndex === index ? selectedColor : color}}">{
  {item.text}}</cover-view>
	</cover-view>
</cover-view>