• SegmentedControl 分段器

    SegmentedControl 分段器

    用作不同视图的显示,组件名:uni-segmented-control,代码块: uSegmentedControl。

    使用方式:

    script 中引用组件

    1. import uniSegmentedControl from "@/components/uni-segmented-control/uni-segmented-control.vue"
    2. export default {
    3. components: {uniSegmentedControl},
    4. data() {
    5. return {
    6. items: ['选项卡1','选项卡2','选项卡3'],
    7. current: 0
    8. }
    9. },
    10. methods: {
    11. onClickItem(index) {
    12. if (this.current !== index) {
    13. this.current = index;
    14. }
    15. }
    16. }
    17. }

    SegmentedControl 在 template 中的使用

    1. <template>
    2. <view>
    3. <uni-segmented-control :current="current" :values="items" @clickItem="onClickItem" style-type="button" active-color="#4cd964"></uni-segmented-control>
    4. <view class="content">
    5. <view v-show="current === 0">
    6. 选项卡1的内容
    7. </view>
    8. <view v-show="current === 1">
    9. 选项卡2的内容
    10. </view>
    11. <view v-show="current === 2">
    12. 选项卡3的内容
    13. </view>
    14. </view>
    15. </view>
    16. </template>

    SegmentedControl 属性说明:

    属性名类型默认值说明
    currentNumber0当前选中的tab索引值,从0计数
    valuesArray<String>-选项数组
    style-typeStringbutton分段器样式类型,可选值:button(按钮类型),text(文字类型)
    active-colorString#007aff选中的标签背景色与边框颜色
    @clickItemEventHandle-组件触发点击事件时触发,参数为当前选中的tab索引值 current