微信小程序-tabs切换效果组件封装

DTcode7

已于 2024-04-12 09:39:28 修改

阅读量3.5k

点赞数 5

分类专栏：微信小程序相关文章标签：小程序微信

于 2021-09-23 16:16:10 首次发布

本文链接：https://blog.youkuaiyun.com/black_cat7/article/details/120436232

版权

微信小程序相关专栏收录该内容

171 篇文章

订阅专栏

效果展示（参考黑马商城教学，B站搜就有~）

父组件.wxml（要使用tabs组件的页面中，引入这个组件）

父组件.js

前言

微信小程序提供了Tabs组件来实现tabs切换效果。以下是一个简单的示例代码：

<view class="container">
  <tab-bar>
    <tab-item icon="icon1" selected-icon="selectedIcon1" bind:change="onTabChange">标签一</tab-item>
    <tab-item icon="icon2" selected-icon="selectedIcon2" bind:change="onTabChange">标签二</tab-item>
    <tab-item icon="icon3" selected-icon="selectedIcon3" bind:change="onTabChange">标签三</tab-item>
  </tab-bar>
</view>

在上述代码中，我们使用了TabBar和TabItem组件来创建了一个包含三个标签的tabs切换效果。每个TabItem都有一个icon属性和一个selected-icon属性，分别表示未选中和选中时的图标。同时，我们还绑定了bind:change事件，当用户点击不同的标签时，会触发onTabChange方法。

在onTabChange方法中，你可以根据当前选中的标签执行相应的逻辑操作。例如，你可以根据选中的标签显示不同的内容或执行其他操作。

需要注意的是，TabBar组件通常放置在页面的最底部，用于实现底部导航栏的效果。如果你需要在其他位置使用tabs切换效果，可以考虑使用其他组件或自定义实现。

进阶一点的封装tabs组件效果展示

（参考黑马商城教学，B站搜就有~）

先介绍一下组件代码

在微信小程序开发者工具里的components文件夹下创建Tabs组件

Tabs.js

// components/Tabs/Tabs.js
Component({
  /**
   * 组件的属性列表
    传入给组件的数据
   */
  properties: {
    tabs: {
      // 类型
      type: Array,
      // 默认值
      value: []
    }
  },

  /**
   * 组件的初始数据
   */
  data: {  },
  /**
   * 组件的方法列表
   */
  methods: {
    // 点击事件，点击tab栏不同项目时，触发
    handleItemTap (e) {
      // 1 获取点击的tab索引
      const { index } = e.currentTarget.dataset;
      // 2 触发 父组件中的事件，传递数据给父组件  把当前点击的index数据传给父组件
      this.triggerEvent("tabsItemChange", { index: index });
    }
  }
})

通过：this.triggerEvent("tabsItemChange", { index: index });将用户点击的tab栏的索引传给父组件，进行处理

Tabs.json

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

没有什么需要改的，就是开发者工具生成的，不用动，或者想要扩展其他组件进来可以改改

Tabs.wxml

 <!-- 顶部横向tabs切换栏目 -->
 <view class="tabs">
   <!-- 文字 -->
   <view class="tabs_title">
     <!-- {{item.isActive?'active':''}}  用于判断当前是否选中，添加active样式 -->
     <!--  data-index="{{index}}"  只有设置了这个，才能在绑定的事件中的参数里面的currentTarget==》dataset里找到设置的值 -->
     <view wx:for="{{tabs}}" wx:key="id" class="title_item  {{item.isActive?'active':''}} " bindtap="handleItemTap"
       data-index="{{index}}">
       {{item.value}}
     </view>
   </view>
   <!-- tabs下方内容区域 -->
   <view class="tabs_content">
     <slot></slot>
   </view>
 </view>

class="title_item {{item.isActive?'active':''}} 通过data中的源数据的isActive字段，来添加选中效果样式

Tabs.wxss

.tabs{
}
/* 文字横向 */
.tabs_title{
  display: flex;
}
/* 每个文字居中，且占1份 */
.title_item{
  display: flex;
  justify-content: center;
  align-items: center;
  flex: 1;
  padding: 15rpx 0;
}
/* 选中样式 */
.active{
  color:var(--themeColor);
  border-bottom: 5rpx solid currentColor;
}
.tabs_content{}

以上，就是Tabs这个小程序组件的内容

接下来，来说明一下如何使用这个组件，也就是父组件中如何配置这个tabs栏目

父组件.wxml（要使用tabs组件的页面中，引入这个组件）

<!-- bindtabsItemChange="getTabsItemChange"  获取子组件传回来的数据的方法 -->
<Tabs tabs="{{tabsList}}" bindtabsItemChange="getTabsItemChange">
  <!-- tab1 当tab1激活时显示出来，其他tab则隐藏-->
  <block wx:if="{{tabsList[0].isActive}}">1</block>
  <!-- tab2 -->
  <block wx:elif="{{tabsList[1].isActive}}">1</block>
  <!-- tab3 -->
  <block wx:elif="{{tabsList[2].isActive}}">2</block>
</Tabs>

tabs="{{tabsList}} 向组件传入数据（渲染tab栏目）

父组件.js

Page({
  data: {
    // 顶部横向tabs切换栏目
    tabsList: [
      {
        id: 0,
        value: "综合",
        isActive: true,
      },
      {
        id: 1,
        value: "销量",
        isActive: false,
      },
      {
        id: 2,
        value: "价格",
        isActive: false,
      },
    ],
  },
}),

  // 获取从子组件传回来的数据
  getTabsItemChange (e) {
    // 1 获取传过来的被点击的标题索引
    const { index } = e.detail;
    // 2 修改顶部横向tabs切换栏目 源数组
    // 拿到data中叫做 tabsList 数据，复制出一份用来修改
    let { tabsList } = this.data;
    // 通过循环，将当前传过来的index的tabs的isActive设置为true，就有选中的样式了
    tabsList.forEach((v, i) =>
      i === index ? (v.isActive = true) : (v.isActive = false)
    );
    // 3 赋值修改过后的数据到data中本来的tabs数据源
    this.setData({
      tabsList,
      // 等价于===》tabsList:tabsList  (同名变量可以简写)
    });
  },

在data中设置一个对象数组，里面就是tabs栏目的标题、选中状态

getTabsItemChange方法获取到子组件传回来的数组下标，通过遍历tabs的标题数组，来设置选中状态，达到切换tab的效果。

博主 [DTcode7] 带您溺亖在知识的海洋里，嘿嘿嘿.~
🐒 个人主页—— DTcode7 的博客🐒

《微信小程序相关博客》
《Vue相关博客》
《前端开发习惯与小技巧相关博客》
《AIGC相关博客》

《photoshop相关博客》
😚 吾辈才疏学浅，摹写之作，恐有瑕疵。望诸君海涵赐教。望轻喷，嘤嘤嘤 🙈
🕍 愿斯文对汝有所裨益，纵其简陋未及渊博，亦足以略尽绵薄之力。倘若尚存阙漏，敬请不吝斧正，俾便精进！