微信小程序实现tabs标签栏自定义组件

效果

子组件WXML

<view class="tabs">
  <view class="tab-item" 
  		wx:for="{{tabList}}" 
  		wx:key="index"
  		data-index="{{index}}"
  		data-value="{{item}}"
  		bindtap="changeTab">
    <text class="tab-text {{currentIndex == index ? 'active' : ''}}">{{item.name}}</text>
  </view>
  <view class="line" wx:if="{{show}}" style="left:{{left}}px"></view>
</view>

子组件JS

Component({
  data: {
    currentIndex: 0, // 当前选中项的索引
    left: '', // 选中项的下划线的位置
    show: false
  },
  properties: {
    tabList: {
      type: Array,
      value: []
    }
  },
  observers: {
    'tabList'(val) {
      if (val && val.length) {
        this.changeline()
      }
    }
  },
  methods: {
    changeTab(e) {
      let index = e.currentTarget.dataset.index
      let value = e.currentTarget.dataset.value
      this.setData({
        currentIndex: e.currentTarget.dataset.index
      })
      // 自定义组件触发事件时，需要使用 triggerEvent 方法，指定事件名、detail对象和事件选项
      // this.triggerEvent(事件名, detail对象, 事件选项)，
      // detail对象可以是基本数据类型值，也可以是一个对象
      this.triggerEvent("getCurrentValue", value)
      this.changeline()
    },
    // 渲染横线位置的方法
    changeline() {
      let _this = this
      // SelectorQuery.in(Component component): 将选择器的选取范围更改为自定义组件 component 内
      let query = wx.createSelectorQuery().in(this)
      // select() 在当前页面下选择第一个匹配选择器 selector 的节点
      // boundingClientRect() 添加节点的布局位置的查询请求。相对于显示区域，以像素为单位
      query.select(".active").boundingClientRect()
      // SelectorQuery.exec(function callback) 执行所有的请求
      // 请求结果按请求次序构成数组，在callback的第一个参数中返回
      query.exec(function (res) {
        _this.setData({
          left: res && res[0].left + res[0].width / 2 - 10,
          show: true
        })
      })
    }
  }
})

子组件JSON

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

子组件WXSS

.tabs {
  display: flex;
  flex-direction: row;
  width: 100%;
  height: 80rpx;
  justify-content: space-around;
  position: relative;
  background-color: #fff;
  overflow-x: auto;
  white-space: nowrap;
}

.tab-text {
  font-size: 28rpx;
  line-height: 70rpx;
  font-weight: 400;
  text-align: center;
}

.line {
  background: #ffaa7f;
  border-radius: 4rpx;
  height: 8rpx;
  width: 40rpx;
  position: absolute;
  bottom: 4rpx;
  transition: all 0.3s linear;
}

.active {
  color: #ffaa7f;
  border-color: #ffaa7f;
}

父组件WXML

<view class="container">
  <view class="switch-tab">
    <tabs tabList="{{tabList}}" bind:getCurrentValue="handleSwitch"></tabs>
  </view>
</view>

父组件JS

//获取应用实例
const app = getApp()

Page({
  data: {
    // 传入 tabs 组件的数据
    tabList: [
      { name: '正在热映', type: 1 },
      { name: '即将上映', type: 0 }
    ]
  },
  /**
  * 生命周期函数--监听页面加载
  */
  onLoad: function (options) {
    
  },
  /**
   * 生命周期函数--监听页面显示
  */
  onShow: function () {

  },
  // 选择电影上映类型
  handleSwitch(e) {
    console.log(e) // { name: '即将上映', type: 0}
  },
})

父组件JSON

{
  "navigationBarTitleText": "电影",
  "usingComponents": {
    "tabs": "../../components/tabs/index"
  }
}

父组件WXSS

page {
  background: #f2f2f2;
}
.container {
  width: 100%;
}
.switch-tab {
  width: 100%;
  background: #fff;
  box-shadow: 0rpx 9rpx 9rpx 0rpx rgba(194, 190, 190, 0.5);
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1000;
}