小程序自定义组件导航栏切换

1.效果

2.目录结构

3.组件segment.js

// components/segment/segment.js
Component({
  /**
   * 组件的属性列表
   */
  properties: {
    items: {
      type:Array,
      value:[]
    },
    defaultIndex:{
      type:Number,
      value:0
    }
  },

  /**
   * 组件的初始数据
   */
  data: {
    currentIndex:0
  },
  lifetimes: {
    attached: function() {
      var that = this;
      this.setData({
        currentIndex: that.properties.defaultIndex
      })
    }
  },
  /**
   * 组件的方法列表
   */
  methods: {
    onItemTapEvent: function(event) {
      var index = event.target.dataset.index;
      console.log(index)
      this.setData({
        currentIndex:index
      })
      var detail = {"index":index};
      var options = {};
      this.triggerEvent("itemchanged",detail,options)
    }
  }
})

4.组件segment.wxml

<view class="segmentBox">
  <view class="header">
    <block wx:for="{{items}}" wx:key="{{item}}">
      <view class="item active" wx:if="{{currentIndex === index}}" bindtap="onItemTapEvent" data-index="{{index}}">{{item}}</view>
      <view class="item" wx:else bindtap="onItemTapEvent" data-index="{{index}}">{{item}}</view>
    </block>
  </view>
  <view class="con">
    <slot></slot>
  </view>
</view>

5.组件segment.wxss

.segmentBox {
  width: 100%;
}
.header {
  width: 100%;
  height: 80rpx;
  border-top: 1px solid #ed6c9e;
  border-bottom: 1px solid #ed6c9e;
  display: flex;
}
.item {
  flex: 1;
  border-right: 1px solid #ed6c9e;
  font-size: 14px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.item:last-of-type {
  border: none;
}
.header .active {
  background-color: #ed6c9e;
  color: #fff;
}
.con {
  width: 100%;
}

6.组件segment.json

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

7.引用组建的页面 js

Page({

  data: {
    items:['分类一','分类二','分类三'],
    currentIndex:0
  },

  onitemchanged: function(event) {
    var index = event.detail.index;
    this.setData({
      currentIndex: index
    })
  }
})

8.引用组建的页面 json

{
  "usingComponents": {
    "segment": "/components/segment/segment"
  },
  "navigationBarTitleText": "首页"
}

9.引用组建的页面 wxml

<segment items="{{items}}" defaultIndex="{{currentIndex}}" binditemchanged="onitemchanged">
  <view class="segment-page" wx:if="{{currentIndex === 0}}">111</view>
  <view class="segment-page" wx:if="{{currentIndex === 1}}">222</view>
  <view class="segment-page" wx:if="{{currentIndex === 2}}">333</view>
</segment>