小程序自定义组件（tabbar）

1、在components文件夹下新建一个你文件夹，命名为你的组件名，右键文件夹-> 新建 Component,会出现文件

效果图

代码实现

子组件
tabbar.wxml

<view class='my-tabbar-wrap'>
  <view class="{{defaultShowIndex===0?'tabbar-active tabbar-item':'tabbar-item'}}" data-index="0"  bindtap='myTabbarEvent'>
    <view class="item-text">预约</view>
  </view>
  <view class="{{defaultShowIndex===1?'tabbar-active tabbar-item':'tabbar-item'}}" data-index="1" bindtap='myTabbarEvent'>
    <view class="item-text">注册</view>
  </view>
</view>

tabbar.js

// pages/res/tabbar/tabbar.js
Component({
  /**
   * 组件的属性列表
   */
  properties: {
    defaultShowIndex: { // 属性名-- 父组件传过来的数据
      type: Number, // 类型（必填），接受的类型包括：String, Number, Boolean, Object, Array, null（表示任意类型）
      value: 0 // 属性初始值（可选），如果未指定则会根据类型选择一个
    }
  },

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

  /**
   * 组件的方法列表
   */
  methods: {
    // 注册事件
    myTabbarEvent: function (e) {
      var index = parseInt(e.currentTarget.dataset.index)
      // console.log(index)
      this.setData({ defaultShowIndex: index })
      // 注册点击事件传给父组件
      var fatherData = { showIndex: index}
      this.triggerEvent('myTabbarEvent', { activeIndex: fatherData })
    }
  }
})

tabbar.wxss

.my-tabbar-wrap{
  height: 50px;
  width: 100%;
  border-top: 1rpx solid #ddd;
  display: flex;
  align-items: center;
  justify-content: center;
}
.my-tabbar-wrap .tabbar-item{
  width: 50%;
  height: 50px;
  color: fff;
  text-align: center;
}
.my-tabbar-wrap .tabbar-item image{
  /* display: block; */
  width: 24px;
  height: 24px;
  margin-top: 7px;
  margin-bottom: -5px;
}
.tabbar-active .item-text{
  color: rgb(46, 104, 212);
}
.item-text{
  font-size: 12px;
}

//
tabbar.json

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

到此，子组件已经创建好了，如图（此时还需调用才能展示在你要页面中，这是调用以后的效果）

父组件中使用子组件

注意点:
1、在json文件中需要注册进来 “my-tabbar”: “…/components/tabbar/tabbar”
2、wxml中引用
3、js文件中写相应的事件及数据
4、wxss中写出你的style

父组件文件列表如下:

res.wxml

<!-- 预约和注册 -->
  <view style="position:fixed;bottom: 0px;left:0px;width:100%;">
     <my-tabbar
       id="myTabbarId"
       default-show-index="{{ defaultShowIndex }}"
       bind:myTabbarEvent='popBaitiaoView'></my-tabbar>
  </view>

res.js

// pages/res/res.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    defaultShowIndex: 0 // 默认显示的索引
  },
  // 子组传到父组件的触发事件
  popBaitiaoView: function (e) {
    // 接受子组件发送的数据  e
    // 设置数据
    this.setData({
      defaultShowIndex: e.detail.activeIndex.showIndex,
    })
    console.log(e.detail.activeIndex.showIndex, 'defaultShowIndex')
  },
})

res.json

{
  "usingComponents": {
    "my-tabbar": "../components/tabbar/tabbar"
  }
}

res.wxss

// 写出你的 style

到此结束

完成 √