<template>
<view>
<view class="uni-padding-wrap uni-common-mt">
<view>
<checkbox-group @change="checkboxChange2">
<label>
<checkbox value="多选1" checked="true" color="#FFCC33" style="transform:scale(0.7)" />选中
</label>
<label>
<checkbox value="多选2" color="#FFCC33" />未选中
</label>
</checkbox-group>
</view>
</view>
<radio-group @change="radioChange">
<label class="uni-list-cell uni-list-cell-pd">
<view>
<radio value="单选1" />
</view>
<view>选中1</view>
</label>
<label class="uni-list-cell uni-list-cell-pd">
<view>
<radio value="单选2" />
</view>
<view>选中2</view>
</label>
</radio-group>
<view>
<!-- @chang 是松开后的值 -->
<slider value="50" @changing="sliderChange" step="1" activeColor="#FFCC33" backgroundColor="#000000" block-color="#8A6DE9" block-size="20" min="50" max="200" show-value/>
</view>
</view>
</template>
<script>
export default {
data() {
return {}
},
methods: {
checkboxChange2(e){//多选=数组
this.toast(JSON.stringify(e.detail.value))
},radioChange(e) {//单选
this.toast(e.detail.value)
},sliderChange(e) {//滑块
console.log('value 发生变化:' + e.detail.value)
},toast(e){
uni.showToast({
title:e,
// mask:true, //蒙版
duration:2000
})
}
}
}
</script>
<style>
.uni-list-cell {
justify-content: flex-start
}
</style>
uni-app 单选/多选/滑动 demo
最新推荐文章于 2024-07-25 17:19:58 发布