微信小程序使用三元运算符

最新推荐文章于 2024-05-05 17:00:00 发布

所谓伊人จุ๊บ

最新推荐文章于 2024-05-05 17:00:00 发布

阅读量2.8k

点赞数

分类专栏：微信小程序笔记系列文章标签：微信小程序 css css3

本文链接：https://blog.csdn.net/weixin_42280309/article/details/127945457

版权

微信小程序笔记系列专栏收录该内容

5 篇文章 0 订阅

订阅专栏

样式的三元运算符的展示

针对wxml中的style的三元运算符

<!-- 背景色根据获取的不同值进行调整 -->
<view class="swmc" style="{{item.id==22664?'background: linear-gradient(90deg, #FE708F 0%, #FFA68B 100%)':' ' || item.id==19457?'background: linear-gradient(96deg, #B570FE 0%, #835BF5 100%);':' '|| item.type!==(0||1||2)?'background: linear-gradient(96deg, #708AFE 0%, #5BF5F3 100%)':' ' }}">

图片链接的三元运算符

针对wxml中的src的三元运算符

<!-- 对应的设备标记图片根据获取的不同值进行调整 -->
<image src="{{item.id==22664?'../../images/dianchi/fuzai2x.png':' ' || item.id==19457?'../../images/dianchi/xudianchi.png':' '|| item.type!==(0||1||2)?'../../images/dianchi/dianban2x.png':' ' }}"></image>

获取值的三元运算符

针对wxml中的获取后台数据值的三元运算符

<!-- 对应的设备名称根据获取的不同值进行调整 -->
<view class="text1"> {{item.id==22664?'负载':' ' || item.id==19457?'蓄电池':' '|| item.type!==(0||1||2)?'太阳能板':' ' }}</view>

样式展示

电池背景色
在这里插入图片描述

完整代码块

<scroll-view   class="henx"  scroll-x="true" scroll-with-animation="true"   style="width: 100%;">
<view class="swshuj" wx:for="{{shuiwtb}}" data-index="index"  wx:key="index" >
<!-- 背景色根据获取的不同值进行调整 -->
<view class="swmc" style="{{item.id==22664?'background: linear-gradient(90deg, #FE708F 0%, #FFA68B 100%)':' ' || item.id==19457?'background: linear-gradient(96deg, #B570FE 0%, #835BF5 100%);':' '|| item.type!==(0||1||2)?'background: linear-gradient(96deg, #708AFE 0%, #5BF5F3 100%)':' ' }}">
<!-- 对应的设备标记图片根据获取的不同值进行调整 -->
<image src="{{item.id==22664?'../../images/dianchi/fuzai2x.png':' ' || item.id==19457?'../../images/dianchi/xudianchi.png':' '|| item.type!==(0||1||2)?'../../images/dianchi/dianban2x.png':' ' }}"></image>
<!-- 对应的设备名称根据获取的不同值进行调整 -->
<view class="text1"> {{item.id==22664?'负载':' ' || item.id==19457?'蓄电池':' '|| item.type!==(0||1||2)?'太阳能板':' ' }}</view> 
</view>
</scroll-view>

CSS样式

 .henx{
    height: 100%;
    white-space: nowrap;
    margin-top: 30rpx;
  
  }

  .swshuj{
    width: 568rpx;
    height:400rpx;
    display: inline-block;
    margin-left: 30rpx;
     overflow: hidden; /* 排版错乱问题 */
    
  }

  .swmc{
    width: 568rpx;
    height: 104rpx;
    /* background: linear-gradient(90deg, #FE708F 0%, #FFA68B 100%); */
  border-radius: 8px 8px 0px 0px;
  text-align: center;
  display: flex; 
    justify-content: center; 
    align-items: center;
  
  }

  .swmc image{
    width: 37rpx;
    height: 37rpx;
  }

  .text1{
    font-size: 28rpx;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #FFFFFF;
  line-height: 40rpx;
   padding-left: 15rpx;
  }

  .swzut{
    width: 568rpx;
    height: 285rpx;
    background: #FFFFFF;
    box-shadow: 0px 4px 15px 0px rgba(82, 159, 253, 0.2);
    display: flex;
    /* 垂直居中 */
    justify-content: center; 
    align-items: center;
    
  }

  .sw{
    width: 80rpx;
    margin-left: 62rpx;
    margin-right: 62rpx;
    justify-content: center; 
    text-align: center;
  }
  .sw image{
    width: 40rpx;
    height: 40rpx
  }

  .swda{
    font-size: 32rpx;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 600;
  line-height: 40rpx;
  margin-top: 16rpx;
    justify-content: center; 
   align-items: center;
  }
  .danw{
      margin-top: 10rpx;
      width: auto;
      height: 33rpx;
      font-size: 24rpx;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #303133;
      line-height: 33rpx;
      
  }