48 lines
1.2 KiB
Vue
48 lines
1.2 KiB
Vue
|
<template>
|
||
|
|
<view>
|
||
|
|
<page-head :title="title"></page-head>
|
||
|
|
<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">不同颜色和尺寸的switch</view>
|
||
|
|
<view>
|
||
|
|
<switch checked color="#FFCC33" style="transform:scale(0.7)"/>
|
||
|
|
<switch color="#FFCC33" style="transform:scale(0.7)"/>
|
||
|
|
</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 {
|
||
|
|
title: 'switch 开关'
|
||
|
|
}
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
switch1Change: function (e) {
|
||
|
|
console.log('switch1 发生 change 事件，携带值为', e.detail.value)
|
||
|
|
},
|
||
|
|
switch2Change: function (e) {
|
||
|
|
console.log('switch2 发生 change 事件，携带值为', e.detail.value)
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|