当前位置:网站首页>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
边栏推荐
- STM32学习记录0007——新建工程(基于寄存器版)
- 大专的我,闭关苦学 56 天,含泪拿下阿里 offer,五轮面试,六个小时灵魂拷问
- JS force deduction brush question 103 Zigzag sequence traversal of binary tree
- Analysis and understanding of atomicintegerarray source code
- Qt Designer怎样加入资源文件
- Port occupied 1
- Restful WebService和gSoap WebService的本质区别
- 程序编译调试学习记录
- New关键字的学习和总结
- The art of automation
猜你喜欢
Nodejs安装及环境配置
The latest development of fed digital currency
Oracle告警日志alert.log和跟踪trace文件中文乱码显示
Quartus prime hardware experimental development (de2-115 board) experiment II function adjustable comprehensive timer design
go 语言 数组,字符串,切片
Quartus prime hardware experimental development (de2-115 board) experiment 1 CPU instruction calculator design
专题测试05·二重积分【李艳芳全程班】
2021年秋招,薪资排行NO
Basic knowledge learning record
美联储数字货币最新进展
随机推荐
JS 力扣刷题 103. 二叉树的锯齿形层序遍历
趣谈网络协议
Express②(路由)
Scientists say Australian plan to cull up to 10,000 wild horses doesn’t go far enough
linux MySQL数据定时dump
解决方案架构师的小锦囊 - 架构图的 5 种类型
AtomicIntegerArray源码分析与感悟
leetcode--977. Squares of a Sorted Array
神经元与神经网络
商家案例 | 运动健康APP用户促活怎么做?做好这几点足矣
Special test 05 · double integral [Li Yanfang's whole class]
Elmo (bilstm-crf + Elmo) (conll-2003 named entity recognition NER)
服务器中挖矿病毒了,屮
VsCode-Go
Question bank and answer analysis of the 2022 simulated examination of the latest eight members of Jiangxi construction (quality control)
JS force deduction brush question 103 Zigzag sequence traversal of binary tree
[VMware] address of VMware Tools
快捷键(多行)
Redis docker 安装
对List集合进行分页