【小程序】tab 选项卡的实现

最新推荐文章于 2024-07-04 08:59:32 发布

cdgogo

最新推荐文章于 2024-07-04 08:59:32 发布

阅读量317

点赞数

分类专栏：微信小程序

本文链接：https://blog.csdn.net/cdgogo/article/details/108838375

版权

本文介绍了两种在小程序中实现Tab选项卡的方法：一种是通过第三个值判断，另一种是通过组件封装，包括父传子（传参）和子传父（自定义事件）。同时，还讲解了如何利用slot插槽进行自定义内容展示。

摘要由CSDN通过智能技术生成

方法一

在这里插入图片描述

<view class="tabs_title">
	<!-- <view class="title_item active">首页</view>
	<view class="title_item">原创</view>
	<view class="title_item">分类</view>
	<view class="title_item">关于</view> -->
	<view class="title_item {
    {item.isActive ? 'active':''}}"
	 wx:for="{
    {tabs}}" 
	 wx:key="{
    {index}}"
	 data-index="{
    {index}}"
	 catchtap="tabClick"
	 >{
  {item.name}}</view>
</view>

.tabs_title{
   
    display: flex;
}
.title_item{
   
    flex: 1;
    text-align: center;
}
.active{
   
    color: #f00;
    border-bottom: 5rpx solid #f00;
    padding-bottom: 5rpx;
}

  data: {
   
    tabs:[
      {
   
        id:0,
        name:'首页',
        isActive:true
      },
      {
   
        id:1,
        name:'原创',
        isActive:false
      },
      {
   
        id:2,
        name:'分类',
        isActive: