表单组件slider、switch

分手后的思念是犯贱 2021-09-13 15:58 438阅读 0赞

## slider（滑动选择器） ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lhbmdob25neWFuMDAx_size_16_color_FFFFFF_t_70]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lhbmdob25neWFuMDAx_size_16_color_FFFFFF_t_70 1]  
**注意：**  
activeColor默认值在不同平台不一样，微信是绿色(\#1aad19)，头条是红色，其他平台是蓝色  
**template里：**

<template>
        <view>
            <view class="uni-padding-wrap uni-common-mt">
                <view class="uni-title">设置step</view>
                <view>
                    <slider value="60" @change="sliderChange" step="5" />
                </view>
    
                <view class="uni-title">显示当前value</view>
                <view>
                    <slider value="50" @change="sliderChange" show-value />
                </view>
    
                <view class="uni-title">设置最小/最大值</view>
                <view>
                    <slider value="100" @change="sliderChange" min="50" max="200" show-value />
                </view>
    
                <view class="uni-title">不同颜色和大小的滑块</view>
                <view>
                    <slider value="50" @change="sliderChange" activeColor="#FFCC33" backgroundColor="#000000" block-color="#8A6DE9" block-size="20" />
                </view>
            </view>
        </view>
    </template>

**script里：**

export default { 
        data() { 
            return { }
        },
        methods: { 
            sliderChange(e) { 
                console.log('value 发生变化：' + e.detail.value)
            }
        }
    }

**效果图如下：**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lhbmdob25neWFuMDAx_size_16_color_FFFFFF_t_70 2]

## switch（开关选择器） ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lhbmdob25neWFuMDAx_size_16_color_FFFFFF_t_70 3]  
**template里：**

<template>
        <view>
            <view class="uni-padding-wrap uni-common-mt">
                <view class="uni-title">默认样式</view>
                <view>
                    <switch checked @change="switch1Change" />
                    <switch @change="switch2Change" />
                </view>
                <view class="uni-title">推荐展示样式</view>
            </view>
            <view class="uni-list">
                <view class="uni-list-cell uni-list-cell-pd">
                    <view class="uni-list-cell-db">开启中</view>
                    <switch checked />
                </view>
                <view class="uni-list-cell uni-list-cell-pd">
                    <view class="uni-list-cell-db">关闭</view>
                    <switch />
                </view>
            </view>
        </view>
    </template>

**script里：**

export default { 
        data() { 
            return { }
        },
        methods: { 
            switch1Change: function (e) { 
                console.log('switch1 发生 change 事件，携带值为', e.target.value)
            },
            switch2Change: function (e) { 
                console.log('switch2 发生 change 事件，携带值为', e.target.value)
            }
        }
    }

**效果图如下：**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lhbmdob25neWFuMDAx_size_16_color_FFFFFF_t_70 4]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lhbmdob25neWFuMDAx_size_16_color_FFFFFF_t_70]: /images/20210913/c35e2f5eec88456da946c5dddf7655e4.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lhbmdob25neWFuMDAx_size_16_color_FFFFFF_t_70 1]: /images/20210913/eb276a095cac42a8b66ecd5e232c844a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lhbmdob25neWFuMDAx_size_16_color_FFFFFF_t_70 2]: /images/20210913/622c9cf2fe4341c8b706390c63d6f13e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lhbmdob25neWFuMDAx_size_16_color_FFFFFF_t_70 3]: /images/20210913/697babb488924e5a98a2768d6457689e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lhbmdob25neWFuMDAx_size_16_color_FFFFFF_t_70 4]: /images/20210913/1138f7662d8e47e298174252f2d1700e.png