自定义view2

首先需要在 json 文件中进行自定义组件声明（将 component 字段设为 true 可将这一组文件设为自定义组件）

tabs.js

{
  "component": true,
  "usingComponents": {
  }
}

在tabs. wxml 文件中编写组件模板，

<view class="container">
  <view class="tabs">
        <!-- bind:tap="handleTabChange"点击事件监听
                    wx:key="index"给点击事件指定Key
                    data-index:data-是固定的，index是自己定义的，
                    要和调用的地方保持一致
                    const index = event.currentTarget.dataset.index
                    dataset后的index要和data-index后的index一致-->
        <view class="tabs-item"
              wx:for="{{tabs}}"
              wx:key="index"
              bind:tap="handleTabChange"
              data-index="{{index}}">
            <!--            Tab选中时使用tab-label样式，未选中时样式为active-tab-->
            <view class="tab-label {{currentTabIndex === index ? 'active-tab':''}}">
                {{item}}
            </view>
            <!--            逻辑控制-->
            <view class="divider" wx:if="{{currentTabIndex===index}}"></view>
        </view>
    </view>
</view>

在tabs. wxss 文件中加入组件样式

.container {
  /*弹性布局样式*/
  display: flex;
  /*布局方式列*/
  flex-direction: column;
  height: 100%;
}

.tabs {
  /*弹性布局，在一行显示*/
  display: flex;
  padding: 30rpx 0;
  background-color: #fff;
  /*对齐方式，居中*/
  align-items: center;
  height: 126rpx;
  /*盒模型的控制，限制大小*/
  box-sizing: border-box;
}

.tabs-item {
  /*tab item均分父类空间*/
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.tab-label {
  color: #888888;
  /*不换行*/
  white-space: nowrap;
}

.active-tab {
  color: #333333;
  font-weight: bold;
}

.divider {
  height: 6rpx;
  width: 50rpx;
  margin-top: 10rpx;
  background-color: #f3d066;
}

在自定义组件的 tabs.js 文件中，需要使用 Component() 来注册组件，并提供组件的属性定义、内部数据和自定义方法。

Component({
	//properties组件的对外属性，是属性名到属性设置的映射表
    properties: {
        tabs: {
        	//定义数据类型
            type: Array,
            value: []
        }
    },
    data: {
        currentTabIndex: 0, //默认选中
    },
    //自定义View的方法监听需要写在methods 中
    methods: {
        //1.传入一个数组，按数组元素内容渲染我们的标签页面选项
        //2.能够监听点击事件，
        //父组件通过属性自定义组件传递参数
        handleTabChange: function (event) {
            console.log(event)
            const index = event.currentTarget.dataset.index
            console.log(index)
            this.setData({
                currentTabIndex: index
            })
             //自定组件通过自定义事件给父组件传递参数，change事件名称，
            this.triggerEvent('change', {index})
        },
    }
});

自定义组件触发事件时，需要使用 triggerEvent 方法,指定事件名’change’、detail对象

使用自定义组件

首先要在页面的inex.json 文件中进行引用声明。此时需要提供每个自定义组件的标签名和对应的自定义组件文件路径：

{
  "usingComponents": {
    "i-tabs": "/components/tabs/tabs"
  }
}

节点名i-tabs即自定义组件的标签名

<view class="container">
    <i-tabs tabs="{{tabs}}" bind:change="handleTabChange"></i-tabs>
</view>

其中标签tabs 和tabs.js中properties tabs一致
标签i-tabs 的数据源{{tabs}}，在index.json中
bind:change 的change和this.triggerEvent(‘change’, {index}) 中的change一致

在父页面的json配置文件中实现定义的方法

Page({
    data: {
        tabs: ['全部服务', '在提供', '正在找'],
    },
    onLoad: function (options) {

    },
	handleCategoryChange: function (event) {
        const id = event.currentTarget.dataset.id
    }
});