樣式的三元運算符的展示

針對wxml中的style的三元運算符

<!-- 背景色根據(jù)獲取的不同值進行調整 -->
<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的三元運算符

<!-- 對應的設備標記圖片根據(jù)獲取的不同值進行調整 -->
<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中的獲取后臺數(shù)據(jù)值的三元運算符

<!-- 對應的設備名稱根據(jù)獲取的不同值進行調整 -->
<view class="text1"> {{item.id==22664?'負載':' ' || item.id==19457?'蓄電池':' '|| item.type!==(0||1||2)?'太陽能板':' ' }}</view> 

樣式展示

文章來源地址http://www.zghlxwxcb.cn/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" >
<!-- 背景色根據(jù)獲取的不同值進行調整 -->
<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%)':' ' }}">
<!-- 對應的設備標記圖片根據(jù)獲取的不同值進行調整 -->
<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>
<!-- 對應的設備名稱根據(jù)獲取的不同值進行調整 -->
<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;
      
  }

到了這里，關于微信小程序使用三元運算符的文章就介紹完了。如果您還想了解更多內容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網(wǎng)！