原生微信小程序封装tab切换组件

Code female artist

已于 2024-01-03 16:49:05 修改

阅读量640

点赞数 11

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

于 2024-01-02 16:02:06 首次发布

本文链接：https://blog.csdn.net/2301_81331526/article/details/135342915

版权

本文详细介绍了如何在微信小程序中创建名为zs-tab的自定义组件，包括结构、JSON配置、HTML模板、CSS样式和TypeScript逻辑，以及如何在其他页面中引入和使用该组件进行数据绑定。

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

1、在components文件夹新建文件夹，比如zs-tab。

2、zs-tab文件夹的json文件：

{
  "component": true,
  "styleIsolation": "apply-shared",
  "usingComponents": {}
}

3、zs-tab文件夹的html文件：

<view class="flex justify-around">
  <view wx:for="{{ list }}" wx:key="*this" style="{{ value === item ? 'color:#FF3000' : '' }} padding:0rpx 30rpx; text-weight:bold;" data-value="{{ item }}" bind:tap="change">
    <view>{{ item }}</view>
    <view class="tab-item-bottom" style="margin-top:20rpx; {{ value === item ? 'background:#FF3000;' : '' }}"></view>
  </view>
</view>

4、zs-tab文件夹的css文件：

.tab-item-bottom {
  height: 6rpx;
  border-radius: 3rpx;
}

5、zs-tab文件夹的ts/js文件：

Component({

  /**
   * 组件的属性列表
   */
  properties: {
    list: {
      type: Array,
      value: []
    },
    value: {
      type: String,
      value: ''
    }
  },
  /**
  * 组件的方法列表
  */
  methods: {
    change(e: WechatMiniprogram.BaseEvent) {
      this.triggerEvent('change', { tab: e.currentTarget.dataset.value })
    }
  }
})

6、引入，在你所需要的页面的json引入：

{
  "usingComponents": {
    "zs-tab": "/components/zsTab/index"
  }
}

7、使用。在你所需要的文件夹内的html使用:

<zs-tab list="{{ tabList }}" value="{{ selectTab  }}" bind:change="changeTab"></zs-tab>

8、在你所需要的文件夹的ts/js添加：

Page({
    data:{
        tabList: ["简介","分数线","计划","就业"],  // 想要展示的tab栏目列表
        selectTab: "简介",  // 当前选中的那一项
    },
    // 切换菜单
    changeTab(e: WechatMiniprogram.CustomEvent) {
      this.setData({
        selectTab: e.detail.tab
      })
    },
})

## 样式展示