微信小程序之tab标题组件封装

最新推荐文章于 2025-01-22 22:46:08 发布

gyuei

最新推荐文章于 2025-01-22 22:46:08 发布

阅读量966

点赞数

分类专栏：小程序

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

版权

小程序专栏收录该内容

67 篇文章

订阅专栏

本文详细介绍了一个自定义的WeChat小程序Tab组件的创建过程，包括组件的结构、样式、逻辑及如何在页面中使用。组件支持动态切换Tab并显示相应内容。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在components文件夹下新建一个名称为tabNormal的文件夹，结构如图：
tabNormal组件的index.wxml代码如下：

<view class="tab" style="position:fixed;left:0;top:{{positionTop}}">
	<view wx:for="{{tabTitle}}" wx:key="{{index}}" class="wehx-tabItem {{current==index?'active':''}}" bindtap='toggle' data-index="{{index}}">{{item}}</view>
</view>
<view class="tab-content" style="padding-top:{{paddingTop}}">
	<view wx:for="{{tabTitle}}" class="{{current==index?'show':'hidden'}}">
		<slot name="{{index}}"></slot>
	</view>
</view>

tabNormal组件的index.wxss代码如下：

.tab {
  display: flex;
  width: 100%;
  height: 70rpx;
  padding-bottom: 18rpx;
  background-color: #2ea7e0;
}

.wehx-tabItem {
  flex: 1;
  line-height: 70rpx;
  text-align: center;
  font-size: 30rpx;
  color: #96D3EF;
}

.wehx-tabItem.active {
  color: #ffffff;
  position: relative;
}

.active::after {
  content: "";
  display: block;
  height: 8rpx;
  width: 52rpx;
  background: #ffffff;
  position: absolute;
  bottom: 0;
  left: 0rpx;
  right: 0;
  margin: auto;
  border-radius: 7rpx;
}

.show {
  display: block;
}

.hidden {
  display: none;
}

tabNormal组件的index.js代码如下：

Component({
  /**
 1. 组件的属性列表
   */
  options: {
    multipleSlots: true //在组件定义时的选项中启用多slot支持
  },
  properties: {
    tabTitle: {
      type: Array,
      value: []
    },
    positionTop: {
      type: String,
      value: "0"
    },
    paddingTop: {
      type: String,
      value: "80rpx"
    }
  },

  /**
 2. 组件的初始数据
   */
  data: {
    current: 0
  },

  lifetimes: {
    attached() {}
  },

  /**
 3. 组件的方法列表
   */
  methods: {
    toggle(e) {
      let that = this
      if (this.data.current == e.currentTarget.dataset.index) {
        return false;
      } else {
        this.setData({
          current: e.currentTarget.dataset.index
        })
      }
    }
  }
})

tabNormal组件的index.json代码如下：

{
  "component": true,
  "usingComponents": {}
}

如果需要在test.wxml的页面中使用tab组件，需要在test文件夹中的test.json里面引入，如下：

"usingComponents": {
    "mp-tabNormal":"../../components/tabNormal/index"
  }

在test.wxml中使用自定义的mp-tabNormal的元素名

<mp-tabNormal tabTitle="{{tabTitle}}" positionTop="0px" paddingTop="自定义大小，也可以不写，根据自己实际情况">
	<view slot="0">
		tab1的内容
	</view>
	<view slot="1">
		tab2的内容
	</view>
</mp-tabNormal>

在test.js中写如下代码

  Page({
    data:{
        tabTitle:['tab1','tab2'] //这个tab标题可以写成死的数据，也可以接收后台返回的，写成动态的
    }
  })

最终效果如图所示：

微信小程序 之tab标题组件封装

微信小程序之tab标题组件封装