uni-ui app分段组件uniSegmentedControl使用

官网:
http://ext.dcloud.net.cn/plugin?id=54

先下载:
npm install @dcloudio/uni-ui -D

1.引入组件

import {uniSegmentedControl} from "@dcloudio/uni-ui";

2.注册组件

components: {
  uniSegmentedControl
},

3.复制数据\方法

data() {
  return {
    items: ['选项卡1','选项卡2','选项卡3'],
    current: 0
  }
},
methods: {
  onClickItem(e) {
    if (this.current !== e.currentIndex) {
      this.current = e.currentIndex;
    }
  }
}

4.template中使用

<view>
  <uni-segmented-control :current="current" :values="items" @clickItem="onClickItem" style-type="button" active-color="#4cd964"></uni-segmented-control>
  <view class="content">
    <view v-if="current === 0">
      选项卡1的内容
    </view>
    <view v-if="current === 1">
      选项卡2的内容
    </view>
    <view v-if="current === 2">
      选项卡3的内容
    </view>
  </view>
</view>