readme.md 1.7 KB
Newer Older
study夏羽's avatar
study夏羽 已提交
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54


## SegmentedControl 分段器
> 代码块: `uSegmentedControl`


用作不同视图的显示

### 安装方式

本组件符合[easycom](https://uniapp.dcloud.io/collocation/pages?id=easycom)规范,`HBuilderX 2.5.5`起,只需将本组件导入项目,在页面`template`中即可直接使用,无需在页面中`import`和注册`components`

如需通过`npm`方式使用`uni-ui`组件,另见文档:[https://ext.dcloud.net.cn/plugin?id=55](https://ext.dcloud.net.cn/plugin?id=55)

### 基本用法

``template`` 中的使用

```html
<template>
    <view>
        <uni-segmented-control :current="current" :values="items" @clickItem="onClickItem" styleType="button" activeColor="#4cd964"></uni-segmented-control>
        <view class="content">
            <view v-show="current === 0">
                选项卡1的内容
            </view>
            <view v-show="current === 1">
                选项卡2的内容
            </view>
            <view v-show="current === 2">
                选项卡3的内容
            </view>
        </view>
    </view>
</template>
```

## API

### SegmentedControl Props

|属性名				|类型				|默认值	|说明															|
|:-:					|:-:				|:-:	|:-:															|
|current			|Number			|0		|当前选中的tab索引值,从0计数									|
|styleType		|String			|button	|分段器样式类型,可选值:button(按钮类型),text(文字类型)	|
|activeColor	|String			|#007aff|选中的标签背景色与边框颜色										|
|values				|Array			|-		|选项数组														|

### SegmentedControl Events

|事件名		|说明					|返回值				|
|:-:		|:-:					|:-:				|
|@clickItem	|组件触发点击事件时触发	|e={currentIndex}	|