微信小程序标签页组件

组件JS

// components/tag/index.js
Component({
  options: {
    multipleSlots: true
  },
  lifetimes: {
    attached: function () {
      // 在组件实例进入页面节点树时执行
      let that = this
      this.setData({
        tabWidth: wx.getSystemInfoSync().windowWidth / 4,
        tab: this.data.newTab,
        contentWidth: wx.getSystemInfoSync().windowWidth,
      }, _ => {
        that.triggerEvent("changeTab", that.data.currentMeta);
      })
    },
    detached: function () {
      // 在组件实例被从页面节点树移除时执行
    },
  },
  ready() {
    this.queryDom(0)
    this.queryDomFlexd()
  },
  /**
   * 组件的属性列表
   */
  properties: {
    newTab: {
      type: Array,
      value: [
        { title: '标签一', meta: 1 },
        { title: '标签二', meta: 2 },
        { title: '标签三', meta: 3 },
        { title: '标签四', meta: 4 },
      ]
    }
  },
  /**
   * 组件的初始数据
   */
  data: {
    tab: [],
    tabWidth: '',
    lineLeft: '',
    textWidth: '1',
    currentMeta: 1,
    contentWidth: '100%',
    contentRight: '0',
    perch: '0'
  },

  /**
   * 组件的方法列表
   */
  methods: {
    changeTab(e) {
      let that = this
      let { id } = e.currentTarget.dataset
      this.queryDom(id - 1)
      this.changeContent(id - 1)
      this.setData({
        currentMeta: id
      }, _ => {
        that.triggerEvent("changeTab", id);
      })
    },
    queryDomFlexd() {
      let that = this
      const query = wx.createSelectorQuery().in(this)
      query.select('.tag-flexd').boundingClientRect(function (res) {
        that.setData({
          perch: res.height,
          contentHeight: wx.getSystemInfoSync().windowHeight - res.height
        })
      }).exec()
    },
    queryDom(index = 0) {
      let that = this
      const query = wx.createSelectorQuery().in(this)
      query.selectAll('.text').boundingClientRect(function (res) {
        that.setData({
          lineLeft: res[index].left,
          textWidth: res[index].width
        })
      }).exec()
    },
    changeContent(index = 0) {
      this.setData({
        contentRight: index * this.data.contentWidth
      })
    }
  }
})

组件wxml

<!-- components/tag/index.wxml -->
<view class="tag-wrap">
    <view class="tag-flexd">
        <view class="tag-head">
            <view bindtap='changeTab' data-id='{{item.meta}}' class="text-center {{currentMeta==item.meta?'active':'normol'}}" wx:for="{{tab}}" wx:key="key" style="width:{{tabWidth}}px">
                <text class="text">{{item.title}}</text>
            </view>
        </view>
        <view class="line" style="transform: translateX({{lineLeft}}px);width:{{textWidth}}px"></view>
    </view>
    <view style="height:{{perch}}px"></view>
    <view class="tag-content-wrap" style="width:{{4*contentWidth}}px;transform: translateX(-{{contentRight}}px);">
        <view class="tag-content-item" wx:for="{{tab}}" wx:key='key' style="width:{{contentWidth}}px;height:{{contentHeight}}px">
            <slot name='{{item.meta}}'></slot>
        </view>
    </view>
</view>

组件CSS

/* components/tag/index.wxss */
.tag-wrap {
    overflow: hidden;
}
.tag-wrap .tag-flexd {
    position: fixed;
    top: 0;
    z-index: 999;
}
.tag-wrap .tag-head {
    display: flex;
    font-size: 32rpx;
}
.tag-wrap .text-center {
    text-align: center;
}
.tag-wrap .line {
    transition: .3s ease all;
    height: 8rpx;
    border-radius: 8rpx;
    background-color: #ee0a24;
    margin-top: 10rpx;
}
.tag-head .active {
    font-weight: bold;
    transition: .3s ease all;
    color: black;
}
.tag-wrap .normol {
    color: #646566;
}
.tag-wrap .tag-content-wrap {
    position: relative;
    /* width: 400%; */
    overflow-x: hidden;
    display: flex;
    transition: .3s ease all;
}
.tag-wrap .tag-content-item {
    /* width:100%; */
    height:100vh;
}

页面调用wxml

<!-- 标签页 -->
<tag newTab='{{temp}}' bindchangeTab='changeTab'>
    <view slot='1'>标签一</view>
    <view slot='2'>标签二</view>
    <view slot='3'>标签三</view>
    <view slot='4'>标签四</view>
</tag>

页面调用JS

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

Page({
  data: {
    show:'none',
    temp:[
      { title: '标签1', meta: 1 },
      { title: '标签2', meta: 2 },
      { title: '标签3', meta: 3 },
      { title: '标签4', meta: 4 },
    ]
  },
  changeTab(params){
    console.log('params',params.detail)
  },
  
  onLoad() {
    
  },
})