微信小程序 - 类似element puls中tabs标签页的小封装及公共组件的使用

weixin_68341137

已于 2023-03-22 15:36:32 修改

阅读量385

点赞数

文章标签：微信小程序小程序

于 2023-03-22 15:27:43 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_68341137/article/details/129709119

版权

本文介绍了如何在微信小程序中封装一个类似Element UI的tabs标签页组件，并详细讲解了公共组件的创建和使用步骤，包括在全局或组件json文件中注册组件，以及在页面中调用使用的方法。

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

tabs小封装

话不多说 , 效果图和代码齐上

WXML 代码

<view class="tabs">
    <view class="tab">
      <block wx:for="{
  {tabs}}" wx:key="{
  {id}}">
        <view class="tab_item {
  {currentTabIndex === index ? 'selected' : ''}}" bindtap="onTabItemTap" data-index="{
  {index}}">
          {
  {item.label}}
        </view>
      </block>
    </view>

    <view class="item_detail">
      <view hidden="{
  {currentTabIndex !== 0}}">1</view>
      <view hidden="{
  {currentTabIndex !== 1}}">2</view>
    </view>
</view>

WXSS 代