微信小程序tab栏切换实现

最新推荐文章于 2024-08-06 02:02:11 发布

JzjSunshine

最新推荐文章于 2024-08-06 02:02:11 发布

阅读量510

点赞数

文章标签：微信小程序

本文链接：https://blog.csdn.net/jzj_c_love/article/details/117931384

版权

本文详细介绍了如何在微信小程序中实现一个动态切换Tab的组件。组件包括tabs.js、tabs.wxss和tabs.wxml，用于展示标题并响应点击事件。在index.js中，展示了如何在父组件中接收子组件传递的事件并更新数据，实现了标题的高亮显示和内容的切换。同时，index.wxml使用了条件渲染来展示不同内容。

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

一、首先看效果图

在这里插入图片描述

二、代码结构

在这里插入图片描述

1.1 tabs.js

// components/Tabs/Tabs.js
Component({
  /**
   * 要接收父元素的数据
   */
  properties: {
    tabs:{
      type:Array, //类型
      value:[]//默认值
    }
  },

  /**
   * 组件的初始数据
   */
  data: {

  },

  /**
   * 组件的方法列表
   */
  methods: {
    //点击事件
    handleItemTap(e){
      //console.log(e)
      //1. 获取点击的索引
      const {index} = e.currentTarget.dataset;
      //2. 触发父组件中的自定义事件
      /*
      将该事件传回父组件进行监听： tabsItemChage
      父组件中 bindtabsItemChage="handletabsItemChage"
      */
      this.triggerEvent("tabsItemChage",{index});
    }
  }
})

1.2 tabs.wxss

.tabs_title {
  display: flex;
}
.title_item {
  display: flex;
  flex: 1;
  justify-content: center;
  align-items: center;
  padding: 15rpx 0;
}
.active {
  color: var(--themeColor);
  border-bottom: 5rpx solid currentColor;
}

1.3 tabs.wxml

<view class="tabs">
    <view class="tabs_title">
        <!-- handleItemTap 事件写在该组件的js文件中 -->
        <view 
            wx:for="{{tabs}}"
            wx:key="id"
            class="title_item {{item.isActive?'active':''}}"
            bindtap="handleItemTap"
            data-index="{{index}}"
        >
            {{item.value}}
        </view>
    </view>
    <view class="tabs_content">
        <slot ></slot>
    </view>
</view>

2.1 index.js

// pages/goods_list/index.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    // 选择栏数据：在父组件中定义
    tabs:[
      {
        id:0,
        value:"综合",
        isActive:true
      },
      {
        id:1,
        value:"销量",
        isActive:false
      },
      {
        id:2,
        value:"价格",
        isActive:false
      }
    ]
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {

  },

  //标题店家事件，从子组件传递过来
  handletabsItemChage(e){
    // console.log(e)
    // 1. 获取被点击的标题索引
    const {index} = e.detail;
    // 2. 修改源数组
    let {tabs} = this.data;
    tabs.forEach((v,i)=>i===index?v.isActive=true:v.isActive=false)
    // 3. 给data赋值
    this.setData({
      tabs
    })
  }
})

index.json

“Tabs”:"…/…/components/Tabs/Tabs" //引入插入

{
  "usingComponents": {
    "Tabs":"../../components/Tabs/Tabs" 
  },
  "navigationBarTitleText": "商品列表"
}

index.wxml

<Tabs tabs="{{tabs}}" bindtabsItemChage="handletabsItemChage" class="block_tab">
    <block wx:if="{{tabs[0].isActive}}">0</block>
    <block wx:elif="{{tabs[1].isActive}}">1</block>
    <block wx:else="{{tabs[2].isActive}}">2</block>
</Tabs>