当前位置:网站首页>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