当前位置:网站首页>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
边栏推荐
- freeCodeCamp----time_ Calculator exercise
- Decentralized Collaborative Learning Framework for Next POI Recommendation
- 关于pthread多线程一些好文章
- 基础知识学习记录
- linux安装mysql后修改密码
- mysql通过binlog文件恢复数据
- Express②(路由)
- JS force deduction brush question 103 Zigzag sequence traversal of binary tree
- groutine
- Oracle告警日志alert.log和跟踪trace文件中文乱码显示
猜你喜欢
Port occupied 1
go 语言 数组,字符串,切片
Express中间件③(自定义中间件)
As a junior college student, I studied hard in closed doors for 56 days, won Ali offer with tears, five rounds of interviews and six hours of soul torture
Quartus prime hardware experimental development (de2-115 board) experiment 1 CPU instruction calculator design
Postman reference summary
分库分表 & ShardingSphere
Express ② (routing)
Express②(路由)
Pytorch 经典卷积神经网络 LeNet
随机推荐
[code analysis (3)] communication efficient learning of deep networks from decentralized data
Lin Lin, product manager of Lenovo: network failure of local network operator in Tianjin. The background server of Zui system can't work normally for the time being
Express ② (routing)
变长参数__VA_ARGS__ 和 写日志的宏定义
[code analysis (2)] communication efficient learning of deep networks from decentralized data
初探 Lambda Powertools TypeScript
Universal template for scikit learn model construction
关于pthread多线程一些好文章
金蝶云星空API调用实践
读了一篇博客,重新理解闭包整理一下
接口文档yaml
Program compilation and debugging learning record
Oracle告警日志alert.log和跟踪trace文件中文乱码显示
力扣刷题 101. 对称二叉树
JS force deduction brush question 103 Zigzag sequence traversal of binary tree
Pytorch 经典卷积神经网络 LeNet
cnpm的诡异bug
Go语言 RPC通讯
scikit-learn構建模型的萬能模板
容差分析相关的计算公式