在封装组件的时候，我们需要创建一个文件夹，用来专门管理我们封装的组件哈~；
这个文件夹的名字就是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] }) }, },
<!-- tab --> <aa titles="{{['精品','优惠','美剧']}}" bind:itemclick="getleibuClick"/> getleibuClick(event){ console.log(event) }
