微信小程序使用三元运算符-Toy模板网

这篇具有很好参考价值的文章主要介绍了微信小程序使用三元运算符。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

样式的三元运算符的展示

针对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>

样式展示

微信小程序使用三元运算符
文章来源地址https://www.toymoban.com/news/detail-482907.html

完整代码块

<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;
      
  }