小程序封装tab组件

在封装组件的时候，我们需要创建一个文件夹，用来专门管理我们封装的组件哈~；
这个文件夹的名字就是components；
然后右击这个文件夹；再次创建一个文件夹，就命名为你的组件名称（tab文件夹 也就是组件名）；
（以上的步骤就是连续两次创建文件夹哈~）
然后右击，选择创建component；
这样就完成了组件的创建哈~
我们创建的组件在app.json中是不会记录我们创建的组件；
只会记录我们创建的页面

=====》tab切换组件的封装
wx:key="{{index}} 绑定标识  它的下标是从0开始的
{{currentIndex==index ? "active" : ""}}' bindtap='clickitem'   三目运算 为真 添加一个类active
data-index="{{index}}" 动态传递参数
================================================================================

<text>{{item}}</text>  目的是可以控制下划线
.active text{
  padding: 20rpx 20rpx; 
  border-bottom: 6rpx solid pink;
}

let index = event.currentTarget.dataset.index;//拿到点击的下标

bind:itemclick="getleibuClick" 自定义事件

输出内部的数据
  getleibuClick(event){
    console.log(event)
  }

 

组件开始

<view class='tab-contrao'>
<block wx:for="{{titles}}" wx:key="{{index}}">
   <view class='tab-item {{currentIndex==index ? "active" : ""}}' bindtap='clickitem' data-index="{{index}}">
      <text>{{item}}</text>
   </view>
</block>
</view>


.tab-contrao{
  display: flex;
  height: 88rpx;
  line-height: 88rpx;
  background: orange;
  margin-top:20rpx;

}

.tab-item{
  flex: 1;
  text-align: center;
}

.active{
  color: red;
}

.active text{
  padding: 20rpx 20rpx; 
  border-bottom: 6rpx solid pink;
}


properties: {
    titles:{
      type:Array,
      value:[],
    }
  },

  /**
   * 组件的初始数据
   */
  data: {
    currentIndex:0,
  },
  
  /**
   * 组件的方法列表
   */
  methods: {
    clickitem(event){
      let index = event.currentTarget.dataset.index;//拿到点击的下标
      this.setData({
        currentIndex: index// event.currentTarget.dataset.index 是传递过来index
      })

      // 通知外部  内部发生了什么事情
      // itemclick 事件名
      // index  点击的序号
      //  title: this.properties.titles[index]  内容
      this.triggerEvent("itemclick", { index: index, title: this.properties.titles[index] })
    },

   
  },

 

getleibuClick(event){
    console.log(event)
  }

 

遇见问题，这是你成长的机会，如果你能够解决，这就是收获。

作者：晚来南风晚相识​

本文版权归作者所有，欢迎转载，未经作者同意须保留此段声明，在文章页面明显位置给出原文连接

如果文中有什么错误，欢迎指出。以免更多的人被误导。