微信小程序组件: Tabs

涉及小知识:小程序组件动态传值~芜湖我太开心啦
其实很多知识都是通着的..只是有些时候可能钻进了牛角尖于是就把自己卡死了哈哈哈一个农村大道理送给大家:卡死的地方不要硬挤,出来逛一会儿就好了😊

进入正题!
实现思路用的是很基础的那啥..怎么说nié?

1. 定义变量active啥啥啥,代表当前展示页,以它为基准,tab和内容一起动
2. 讲完了.........

上代码💃
wxml ⬇️:分为两部分,上面的tab栏和下面的内容

<view class="tabs-container">
  <view class="pane-con f_r">
    // tab栏
    <block wx:for="{{tabs}}" wx:key="*this">
      <view class="tabs-pane n_r {{index === activeTab ? 'active' : ''}}" bindtap="switchTab" data-index="{{index}}">{{item}}</view>
    </block>
  </view>
  // 内容部分
  <block wx:for="{{tabs}}" wx:key="*this">
    <view class="tabs-content border" wx:if="{{activeTab === index}}">
      // 插槽儿传动态值,以index为准,可以根据需求进行修改
      <slot name="{{index}}"></slot>
    </view>
  </block>
</view>

wxss ⬇️: 没什么特别的设计,只是注意区分寻常样式与选中时的区分

.pane-con {
  margin: 20rpx 0;
}
.tabs-pane {
  padding: 10rpx 20rpx;
  margin-right: 20rpx;
  border: 1px solid lightgrey;
}
.tabs-pane:nth-last-child(1) {
  margin-right: 0;
}
.tabs-pane.active {
  background: #5495df;
  border-color: #5495df;
  color: #fff;
}

js文件 ⬇️: 目前只是很简单的数组儿,里面放tabs的label就好.将来如果有其它需求再优化即可

Component({
  options: {
    multipleSlots: true
  },
  properties: {
    tabs: {
      required: true,
      type: Array,
      value: () => {
        return []
      }
    },
    activeTab: {
      type: Number,
      value: 0
    }
  },
  methods: {
    switchTab(event) {
      this.setData({
        activeTab: event.currentTarget.dataset.index
      })
    }
  }
})

使用页面 ⬇️: 插槽儿部分可以使用wx:for我试过啦,不过tabs用循环有点奇怪😂不过适用于只有数据产生变化的情况~

<tabs tabs="{{tabsList}}">
  <view slot="0">0</view>
  <view slot="1">1</view>
  <view slot="2">2</view>
  <view slot="3">3</view>
</tabs>

tada~~_{一个tabSwitch就完成啦}💃