SegmentedControl 分段器

分段器由至少 2 个分段控件组成，用作不同视图的显示，预设 9 种颜色 light, stable, positive, calm, assertive, balanced, energized, royal, dark 可选用。

使用指南

在 page.json 中引入组件

{
    "navigationBarTitleText": "SegmentedControl",
    "usingComponents": {
        "wux-segmented-control": "../../dist/segmented-control/index"
    }
}

示例

<view class="page">
    <view class="page__hd">
        <view class="page__title">SegmentedControl</view>
        <view class="page__desc">分段器</view>
    </view>
    <view class="page__bd">
        <view class="sub-title">Default</view>
        <wux-segmented-control values="{{ ['Segment1', 'Segment2'] }}" />
        <view class="sub-title">Theme</view>
        <wux-segmented-control theme="light" values="{{ ['Segment1', 'Segment2'] }}" />
        <wux-segmented-control theme="stable" values="{{ ['Segment1', 'Segment2'] }}" />
        <wux-segmented-control theme="positive" values="{{ ['Segment1', 'Segment2'] }}" />
        <wux-segmented-control theme="calm" values="{{ ['Segment1', 'Segment2'] }}" />
        <wux-segmented-control theme="balanced" values="{{ ['Segment1', 'Segment2'] }}" />
        <wux-segmented-control theme="energized" values="{{ ['Segment1', 'Segment2'] }}" />
        <wux-segmented-control theme="assertive" values="{{ ['Segment1', 'Segment2'] }}" />
        <wux-segmented-control theme="royal" values="{{ ['Segment1', 'Segment2'] }}" />
        <wux-segmented-control theme="dark" values="{{ ['Segment1', 'Segment2'] }}" />
        <view class="sub-title">Disabled</view>
        <wux-segmented-control disabled values="{{ ['Segment1', 'Segment2'] }}" />
        <view class="sub-title">DefaultCurrent</view>
        <wux-segmented-control default-current="2" values="{{ ['Segment1', 'Segment2', 'Segment3'] }}" />
        <view class="sub-title">Controlled</view>
        <wux-segmented-control current="{{ current }}" controlled values="{{ ['Segment1', 'Segment2', 'Segment3'] }}" bind:change="onChange" />
    </view>
</view>

Page({
    data: {
        current: 1,
    },
    onLoad() {
        this.key = Math.floor(Math.random() * 3)
    },
    onChange(e) {
        console.log(e)
        if (e.detail.key === this.key) {
            return wx.showModal({
                title: 'No switching is allowed',
                showCancel: !1,
            })
        }
        this.setData({
            current: e.detail.key,
        })
    },
})

视频演示

SegmentedControl

API

SegmentedControl props

SegmentedControl externalClasses