当前位置:网站首页>switch使用(微信小程序)
switch使用(微信小程序)
2022-04-23 14:02:00 【1029179954】
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;
}
版权声明
本文为[1029179954]所创,转载请带上原文链接,感谢
https://blog.csdn.net/baidu_38978508/article/details/121877799
边栏推荐
- 3300万IOPS、39微秒延迟、碳足迹认证,谁在认真搞事情?
- leetcode--977. Squares of a Sorted Array
- [code analysis (7)] communication efficient learning of deep networks from decentralized data
- [code analysis (5)] communication efficient learning of deep networks from decentralized data
- Function executes only the once function for the first time
- 低频量化之明日涨停预测
- Crontab timing task output generates a large number of mail and runs out of file system inode problem processing
- request模块
- AtomicIntegerArray源码分析与感悟
- Port occupied 1
猜你喜欢
随机推荐
Decimal 格式化小数位/DateTime 转换处理
Problems encountered in the project (V) understanding of operating excel interface poi
1256: bouquet for algenon
crontab定时任务输出产生大量邮件耗尽文件系统inode问题处理
Decentralized Collaborative Learning Framework for Next POI Recommendation
神经元与神经网络
金蝶云星空API调用实践
Android interview theme collection
[code analysis (6)] communication efficient learning of deep networks from decentralized data
Express middleware ③ (custom Middleware)
Node接入支付宝开放平台的沙箱实现支付功能
Expression「Func「TSource, object」」 转Expression「Func「TSource, object」」[]
SQL数据库
生产环境——
服务器中挖矿病毒了,屮
第一章 电商秒杀商品回顾
Reading notes: fedgnn: Federated graph neural network for privacy preserving recommendation
leetcode--380.O(1) 时间插入、删除和获取随机元素
关于pthread多线程一些好文章
Taobao released the baby prompt "your consumer protection deposit is insufficient, and the expiration protection has been started"