小程序 | 如何在页面修改组件样式？渲染出来的组件列表，如何个性化样式？...

1.在组件中设置externalClasses

2.将上一步设置的样式类名添加到组件的wxml中

3.在页面wxss中设置样式

4.将组件中设置的类名作为属性名添加到页面wxml中，并把页面wxss中设置的样式类名作为属性值添加到页面wxml中。over～

如果渲染出来的列表想做个性化样式怎么做？也是有办法滴～

1. 步骤12同上面
2. 先在页面样式文件中定义两个类名ex-tag1和ex-tag2

.ex-tag1{
  background-color: #fffbbb !important; 
}

.ex-tag2{
  background-color: #eefbff !important;
}
复制代码

3. 再在页面wxml文件中用index来判断渲染的列表序号是多少，从而给定具体的样式类。注意index是从0开始的～也就是0就是第一项。

<view class='comment-container'>
      <block  wx:for='{{comments}}' wx:key='content'>
      <!-- 这里的text是组件里定义的一个属性，在这里进行传值 -->
        <v-tag tag-class="{{index==0?'ex-tag1':'' || index==1?'ex-tag2':''}}" text="{{item.content}}">
          <!-- text必须放在组件标签内部才能放在插槽中 -->
          <text slot="after" class='num'>{{'+'+ item.nums}}</text>
        </v-tag>
      </block>
    </view> 
复制代码

当然，其实也有更简单粗暴的方法——直接在页面样式文件中通过选择器修改样式：

.comment-container > v-tag:nth-child(1) > view{
  background-color: #fffbbb;
}

.comment-container > v-tag:nth-child(2) > view{
  background-color: #eefbff;
} 
复制代码

转载于:https://juejin.im/post/5c9efe8de51d45060d506778