微信小程序选择给class加不同的样式

原创于 2019-03-26 16:28:29 发布 · 4.4k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#样式

微信小程序专栏收录该内容

41 篇文章

订阅专栏

本文介绍了一种为小程序中的疾病列表添加不同样式的实现方法。通过使用wx:for循环遍历疾病列表，并根据不同索引值设置不同颜色标记的方式，使得列表中的每一项都能拥有独特的视觉效果。此外，还提供了一个简化版的代码示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在这里插入图片描述
为小程序加上不同的样式

  <view class='list'>
      <block wx:for="{{diseaseList}}" wx:key="">
        <view class='symptom' wx:if="{{index <6}}" 
          data-disease_id="{{item.disease_id}}" 
          data-disease_name="{{item.disease_name}}"
          catchtap="getDoctorsByDisease"
          >
          <text class="{{index == 0 ? 'yellow-marker' : '' || index == 1 ? 'blue-marker':'' || index == 2 ? 'pink-marker':'' || index == 3 ? 'green-marker':'' || index == 4 ? 'purple-marker':'' || index == 5 ? 'lightBlue-marker':''}}"></text>{{item.disease_name}}
        </view>
      
      </block>
    </view>

简约最新版的
<view class='list'> <block wx:for="{{diseaseList}}" wx:key=""> <view class='symptom' wx:if="{{index <6}}" data-disease_id="{{item.disease_id}}" data-disease_name="{{item.disease_name}}" catchtap="getDoctorsByDisease" > <text class="{{index == 0 ? 'yellow-marker' : index == 1 ? 'blue-marker' : index==2 ? 'pink-marker' : index == 3 ? 'green-marker' : index == 4 ? 'purple-marker' : index == 5 ? 'lightBlue-marker' : ''}}"></text>{{item.disease_name}} </view> </block> </view>
个人笔记，顺便问下为什么用||用&&就不行