47 lines
1.3 KiB
Vue
47 lines
1.3 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>
|