init
This commit is contained in:
9
xhs-mini-demos/component-case/switch/switch.css
Normal file
9
xhs-mini-demos/component-case/switch/switch.css
Normal file
@@ -0,0 +1,9 @@
|
||||
|
||||
.switch_font_title {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.switch_font_sub {
|
||||
font-size: 12px;
|
||||
color: rgba(51, 51, 51, 0.4);
|
||||
}
|
||||
55
xhs-mini-demos/component-case/switch/switch.js
Normal file
55
xhs-mini-demos/component-case/switch/switch.js
Normal file
@@ -0,0 +1,55 @@
|
||||
const __templateJs = require("./templates.js");
|
||||
const __mergePageOptions = require("../../util/mergePageOptions.js");
|
||||
Page(__mergePageOptions({
|
||||
onShareAppMessage() {
|
||||
return {
|
||||
title: 'switch',
|
||||
path: 'page/component/pages/switch/switch'
|
||||
};
|
||||
},
|
||||
data: {
|
||||
checked: false,
|
||||
disabled: false,
|
||||
type: 'switch',
|
||||
color: '#09BB07',
|
||||
curValue: false
|
||||
},
|
||||
switch1Change(e) {
|
||||
console.log('switch1 发生 change 事件，携带值为', e.detail.value);
|
||||
},
|
||||
switch2Change(e) {
|
||||
console.log('switch2 发生 change 事件，携带值为', e.detail.value);
|
||||
},
|
||||
changeChecked() {
|
||||
this.setData({
|
||||
checked: !this.data.checked
|
||||
});
|
||||
},
|
||||
changeDisabled() {
|
||||
this.setData({
|
||||
disabled: !this.data.disabled
|
||||
});
|
||||
},
|
||||
changeColor({
|
||||
detail
|
||||
}) {
|
||||
this.setData({
|
||||
color: detail.value
|
||||
});
|
||||
},
|
||||
changeType({
|
||||
detail
|
||||
}) {
|
||||
this.setData({
|
||||
type: detail.value
|
||||
});
|
||||
},
|
||||
changeValue({
|
||||
detail
|
||||
}) {
|
||||
// 点击switch组件才会触发change
|
||||
this.setData({
|
||||
curValue: detail.value
|
||||
});
|
||||
}
|
||||
}, __templateJs));
|
||||
7
xhs-mini-demos/component-case/switch/switch.json
Normal file
7
xhs-mini-demos/component-case/switch/switch.json
Normal file
@@ -0,0 +1,7 @@
|
||||
{
|
||||
"navigationBarTitleText": "开关",
|
||||
"usingComponents": {
|
||||
"showbox": "../../common/component/showbox/index",
|
||||
"box": "../../common/component/container/index"
|
||||
}
|
||||
}
|
||||
138
xhs-mini-demos/component-case/switch/switch.xhsml
Normal file
138
xhs-mini-demos/component-case/switch/switch.xhsml
Normal file
@@ -0,0 +1,138 @@
|
||||
|
||||
<view class="container">
|
||||
|
||||
<showbox title="基础样式">
|
||||
<box>
|
||||
<switch checked color="rgba(255, 36, 66, 1)" style="--a4abe58c: #777;"/>
|
||||
<switch class="_ml8" checked color="rgba(255, 36, 66, 0.4)" disabled/>
|
||||
<switch class="_ml8" checked="{{false}}" color="rgba(255, 36, 66, 1)"/>
|
||||
<switch class="_ml8" color="rgba(255, 36, 66, 1)"/>
|
||||
</box>
|
||||
</showbox>
|
||||
|
||||
<showbox title="推荐展示样式">
|
||||
<box pt="0" pb="0">
|
||||
<view class="_dflex _jc_space-between _py6 _ai_center">
|
||||
<text>
|
||||
标题描述
|
||||
</text>
|
||||
<switch checked color="rgba(255, 36, 66, 1)"/>
|
||||
</view>
|
||||
<view class="_dflex _jc_space-between _py6 _ai_center">
|
||||
<view>
|
||||
<view class="switch_font_title">
|
||||
标题描述
|
||||
</view>
|
||||
<view class="switch_font_sub">
|
||||
可添加二级描述文本
|
||||
</view>
|
||||
</view>
|
||||
<switch checked="{{false}}" color="rgba(255, 36, 66, 1)"/>
|
||||
</view>
|
||||
</box>
|
||||
</showbox>
|
||||
|
||||
<!-- <view class="page-body">
|
||||
<showbox title="默认">
|
||||
<box>
|
||||
<view class="page-section page-section-spacing">
|
||||
<switch
|
||||
checked="{{checked}}"
|
||||
disabled="{{disabled}}"
|
||||
type="{{type}}"
|
||||
color="{{color}}"
|
||||
bindchange="changeValue"
|
||||
/>
|
||||
<view>当前value: {{curValue}}</view>
|
||||
</view>
|
||||
</box>
|
||||
</showbox>
|
||||
|
||||
<showbox title="默认">
|
||||
<box>
|
||||
<view class="page-section" style="margin-top: 20px;margin-bottom: 20px;">
|
||||
<view class="weui-cells weui-cells_after-title">
|
||||
<view class="weui-cell weui-cell_switch">
|
||||
<view class="weui-cell__bd">当前是否选中<text class="filed-tip">(checked)</text></view>
|
||||
<view class="weui-cell__ft">
|
||||
<switch checked="{{checked}}" bindchange="changeChecked" />
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="weui-cell weui-cell_switch">
|
||||
<view class="weui-cell__bd">是否禁用<text class="filed-tip">(disabled)</text></view>
|
||||
<view class="weui-cell__ft">
|
||||
<switch checked="{{disabled}}" bindchange="changeDisabled" />
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="weui-cell">
|
||||
<view class="weui-cell__bd">样式 <text class="filed-tip">(type)</text></view>
|
||||
<view class="weui-cell__ft" style="flex:1">
|
||||
<radio-group bindchange="changeType" class="weui-cell">
|
||||
<label class="weui-cell weui-check__label">
|
||||
<view class="weui-cell__hd">
|
||||
<radio value="switch" checked="{{ type === 'switch' }}"/>
|
||||
</view>
|
||||
<view class="weui-cell__bd">switch</view>
|
||||
</label>
|
||||
<label class="weui-cell weui-check__label">
|
||||
<view class="weui-cell__hd">
|
||||
<radio value="checkbox" checked="{{ type === 'checkbox' }}"/>
|
||||
</view>
|
||||
<view class="weui-cell__bd">checkbox</view>
|
||||
</label>
|
||||
</radio-group>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="weui-cell weui-cell_switch">
|
||||
<view class="weui-cell__bd">checkbox的颜色 <text class="filed-tip">(color)</text></view>
|
||||
<view class="weui-cell__ft" style="flex:1">
|
||||
<input class="weui-input" value="{{color}}" bindinput="changeColor" />
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</box>
|
||||
</showbox>
|
||||
</view>
|
||||
|
||||
<view class="page-body">
|
||||
<showbox title="默认">
|
||||
<box>
|
||||
<view class="page-section page-section-gap">
|
||||
<view class="page-section-title">默认样式</view>
|
||||
<view class="body-view">
|
||||
<switch checked bindchange="switch1Change"/>
|
||||
<switch bindchange="switch2Change"/>
|
||||
</view>
|
||||
</view>
|
||||
</box>
|
||||
</showbox>
|
||||
|
||||
<showbox title="默认">
|
||||
<box>
|
||||
<view class="page-section">
|
||||
<view class="page-section-title">推荐展示样式</view>
|
||||
<view class="weui-cells weui-cells_after-title">
|
||||
<view class="weui-cell weui-cell_switch">
|
||||
<view class="weui-cell__bd">开启中</view>
|
||||
<view class="weui-cell__ft">
|
||||
<switch checked />
|
||||
</view>
|
||||
</view>
|
||||
<view class="weui-cell weui-cell_switch">
|
||||
<view class="weui-cell__bd">关闭</view>
|
||||
<view class="weui-cell__ft">
|
||||
<switch />
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</box>
|
||||
</showbox>
|
||||
</view> -->
|
||||
</view>
|
||||
|
||||
<include src="templates.xhsml" />
|
||||
31
xhs-mini-demos/component-case/switch/templates.js
Normal file
31
xhs-mini-demos/component-case/switch/templates.js
Normal file
@@ -0,0 +1,31 @@
|
||||
/** 以下内容为自动生成，请勿手动修改 */
|
||||
|
||||
module.exports = {
|
||||
data: {
|
||||
page_data_0: false,
|
||||
|
||||
page_data_1: false,
|
||||
|
||||
page_data_2: 1,
|
||||
|
||||
page_data_3: ["checkbox", "switch"],
|
||||
|
||||
page_data_4: `#04BE02`,
|
||||
},
|
||||
|
||||
page_fun_0(e) {
|
||||
this.setData("page_data_0", e.detail.value);
|
||||
},
|
||||
|
||||
page_fun_1(e) {
|
||||
this.setData("page_data_1", e.detail.value);
|
||||
},
|
||||
|
||||
page_fun_2(e) {
|
||||
this.setData("page_data_2", e.detail.value);
|
||||
},
|
||||
|
||||
page_fun_3(e) {
|
||||
this.setData("page_data_4", e.detail.value);
|
||||
},
|
||||
};
|
||||
70
xhs-mini-demos/component-case/switch/templates.xhsml
Normal file
70
xhs-mini-demos/component-case/switch/templates.xhsml
Normal file
@@ -0,0 +1,70 @@
|
||||
<!-- 以下内容为自动生成，请勿手动修改 -->
|
||||
|
||||
<view class="container">
|
||||
<showbox title="switch演示">
|
||||
<box>
|
||||
<view class="_ui-space">
|
||||
<view>
|
||||
<switch
|
||||
checked="{{page_data_0}}"
|
||||
disabled="{{page_data_1}}"
|
||||
type="{{page_data_3[page_data_2]}}"
|
||||
color="{{page_data_4}}"
|
||||
>
|
||||
</switch>
|
||||
</view>
|
||||
|
||||
<view class="_dflex _jc_space-between">
|
||||
<view class="_dflex _ai_center">
|
||||
<text>是否开启checked</text>
|
||||
</view>
|
||||
<switch
|
||||
checked="{{page_data_0}}"
|
||||
color="rgba(255, 36, 66, 1)"
|
||||
bindchange="page_fun_0"
|
||||
/>
|
||||
</view>
|
||||
|
||||
<view class="_dflex _jc_space-between">
|
||||
<view class="_dflex _ai_center">
|
||||
<text>是否开启disabled</text>
|
||||
</view>
|
||||
<switch
|
||||
checked="{{page_data_1}}"
|
||||
color="rgba(255, 36, 66, 1)"
|
||||
bindchange="page_fun_1"
|
||||
/>
|
||||
</view>
|
||||
|
||||
<view class="_dflex">
|
||||
<view style="flex: 4" class="_dflex _ai_center"
|
||||
><text>type</text></view
|
||||
>
|
||||
<view style="flex: 6" class="_ui-input">
|
||||
<picker
|
||||
value="{{page_data_2}}"
|
||||
range="{{page_data_3}}"
|
||||
bindchange="page_fun_2"
|
||||
>
|
||||
{{page_data_3[page_data_2] ?? '请选择'}}
|
||||
</picker>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="_dflex">
|
||||
<view style="flex: 4" class="_dflex _ai_center"
|
||||
><text>color</text></view
|
||||
>
|
||||
<view style="flex: 6" class="_ui-input">
|
||||
<input
|
||||
value="{{page_data_4}}"
|
||||
placeholder="color"
|
||||
type="text"
|
||||
bindinput="page_fun_3"
|
||||
/>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</box>
|
||||
</showbox>
|
||||
</view>
|
||||
Reference in New Issue
Block a user