当前位置: 移动技术网 > IT编程>网页制作>HTML > uni-ui app分段组件uniSegmentedControl使用

uni-ui app分段组件uniSegmentedControl使用

2020年11月25日  | 移动技术网IT编程  | 我要评论
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.cur

官网:
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>

本文地址:https://blog.csdn.net/weixin_49651379/article/details/110141123

如您对本文有疑问或者有任何想说的,请点击进行留言回复,万千网友为您解惑!

相关文章:

验证码:
移动技术网