小程式 | 如何在頁面修改元件樣式？渲染出來的元件列表，如何個性化樣式？

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;
} 
複製程式碼