微信小程序（tab栏的封装和使用）

最新推荐文章于 2024-01-02 16:02:06 发布

2b勿扰

最新推荐文章于 2024-01-02 16:02:06 发布

阅读量2w

点赞数

分类专栏：小程序

本文链接：https://blog.csdn.net/weixin_41181778/article/details/103662690

版权

小程序专栏收录该内容

19 篇文章

订阅专栏

本文详细介绍了如何在微信小程序中封装自定义tab栏组件，包括`my-tab.js`、`my-tab.wxss`和`my-tab.wxml`的代码实现，并展示了在实际页面中的应用方法。

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

my-tab.js

// component/my-tab/my-tab.js
Component({
  /**
   * 组件的属性列表
   */
  properties: {
    tabArr:{
      type:Array,
      value:[]
    }
  },

  /**
   * 组件的初始数据
   */
  data: {
    currentIndex:0
  },

  /**
   * 组件的方法列表
   */
  methods: {
    tabClick(e){
      this.setData({
        currentIndex:e.currentTarget.dataset.index
      })
      console.log(this.data.currentIndex);
      this.triggerEvent('tab',{
        tab_index: this.data.currentIndex,
        title: this.data.tabArr[this.data.currentIndex]
      })
    }
  }
})

my-tab.wxss

/* component/my-tab/my-tab.wxss */
.tab-box {
  display: flex;
  background: rgb(240, 239, 239);
  height: 100rpx;
  line-height: 100rpx;
}
.tab-item {
  flex: 1;
  text-align: center;
}
.tab-box .active {
  color: red;
}

my-tab.wxml

<!--component/my-tab/my-tab.wxml-->
<view class="tab-box">
  <block wx:for="{{tabArr}}" wx:key="index">
    <view class="tab-item {{currentIndex == index?'active':''}}" bindtap="tabClick" data-index="{{index}}">
      <text>{{item}}</text>
    </view>
  </block>
</view>

在页面中的·使用

<!--index.wxml-->
<view class="container">
   <!-- tab标签栏实战 -->
   <my-tab bindtab="itemClick" tabArr="{{cates}}"></my-tab>
</view>

//index.js
//获取应用实例
const app = getApp()

Page({
  data: {
    title:"这是页面传的数据",
    cates:['推荐','热门','时尚','娱乐']
  },
  onLoad: function () {
    
  },
  search:function(e){
    console.log(e.detail.searchText);
  },
  itemClick: function(e){
    console.log(e.detail);
  }
})