switch可以理解为开关的使用,就是打开和闭合。switch开是true,闭是false,也可以绑定函数,在绑定函数中获取当前状态是开还是闭,然后根据自己的逻辑写代码。
wxxml
<view class="section">
<view class="section-title">灯</view>
<view class="section-form">
<view class="form-group">
<label>灯的控制</label>
<!--checked默认是true bindchange可以绑定函数-->
<switch color="#007aff" checked bindchange="light" ></switch>
</view>
</view>
</view>
js
对应上面的light函数,通过e.detail.value拿到当前的状态是true还是false然后写逻辑代码,我这是控制灯(树莓派)
//灯 26 high1 low1
light(e){
//拿到状态
var status=e.detail.value
做判断
if(status==true){
console.log("开灯")
//向后台发送请求
wx.request({
url: 'http://localhost:8080/lg/sshlinuxController/jqcontrol',
data: {
com: "python high1.py"
}
})
}else{
console.log("关灯")
wx.request({
url: 'http://localhost:8080/lg/sshlinuxController/jqcontrol',
data: {
com: "python low1.py"
}
})
}
},
wxcss
想用这里的代码我把css也分享给大家
/* pages/scan/scan.wxss */
page {
background-color: #fafafa;
}
.name {
margin-top: 20rpx;
margin-bottom: 40rpx;
line-height: 32px;
font-size: 17.25pt;
color: #000000;
}
.time-section {
margin-top: 110rpx;
}
.time {
display: flex;
flex-direction: row;
justify-content: center;
}
.hourminuts {
line-height: 154rpx;
font-size: 41.25pt;
color: rgba(0, 0, 0, 0.87);
}
.seconds {
line-height: 72rpx;
font-size: 18.75pt;
color: #f5a623;
margin: auto 0rpx 20rpx 0rpx;
}
.date {
margin-top: 12rpx;
text-align: center;
font-weight: 500;
line-height: 22px;
font-size: 12pt;
color: rgba(0, 0, 0, 0.54);
margin-bottom: 60rpx;
}
.footer {
/*display: flex;
flex-direction: column;
justify-content: center;*/
/*align-items: center;*/
margin: 0 auto;
width: 80%;
}
.to-clock {
background-color: #22a1e0;
color: #ffffff;
margin-bottom: 40rpx;
}
.hover-to-clock {
opacity: 0.7;
}
.to-list {
color: rgba(0, 0, 0, 0.54);
margin-bottom: 40rpx;
}
.hover-to-list {
opacity: 0.7;
}
.main-body {
display: flex;
flex-direction: column;
width: 100%;
height: 100%;
}
.section {
width: 100%;
padding: 20rpx;
}
.section-title {
font-size: 35rpx;
width: 300rpx;
height: 80rpx;
line-height: 80rpx;
padding-left: 20rpx;
border-bottom: 4rpx solid #000;
}
.section-form {
display: flex;
flex-direction: column;
padding: 10rpx 20rpx;
}
.form-group {
display: flex;
flex-direction: row;
width: 100%;
height: 80rpx;
line-height: 80rpx;
font-size: 32rpx;
}
.form-group label {
width: 75%;
}
.form-group input,
.form-group switch {
height: 80rpx;
width: 60rpx;
line-height: 80rpx;
text-align: center;
}
.form-group input {
border-bottom: 2rpx solid #000;
height: 60rpx;
line-height: 60rpx;
}