小程序for循環給裏面單獨的view加單獨的樣式

效果圖以下：

　　

上面是個列表從數據庫拿下來全部的信息；在視圖層直接一個for循環展現下來,如今麻煩來了前三個和後面的額不同，小程序不容許dom操做，那怎麼解決呢？

　　解決辦法：

　　　　wx:for和wx:if  wx:elif嵌套着使用

　　代碼：

　　　　wxml

　　　　　　　　

<navigator url="../play/play?id={{item.muId}}&index={{index}}" wx:for="{{imagescoverArr}}" >
　　<!--第一個-->
　　<view wx:if="{{index==0}}" class="music_list_li1">
　　　　<image class="tubiao" src="../../img/one.png"></image>
　　　　<view class="Head_portrait">
　　　　　　<image class="image1" src="{{item.imcsrc}}"></image>
　　　　</view>
　　　　<view class="music_info">
　　　　　　<view class="music_name"> {{item.muName}} </view>
　　　　　　<view class="singer_name">{{item.nickname}}</view>
　　　　</view>
　　</view>
　　<!--第二個-->
　　<view wx:elif="{{index==1}}" class="music_list_li2">
　　　　<image class="tubiao" src="../../img/two.png"></image>
　　　　<view class="Head_portrait">
　　　　　　<image class="image2" src="{{item.imcsrc}}"></image>
　　　　</view>
　　　　<view class="music_info">
　　　　　　<view class="music_name"> {{item.muName}} </view>
　　　　　　<view class="singer_name">{{item.nickname}}</view>
　　　　　</view>
　　</view>
　　<!--第三個-->
　　<view wx:elif="{{index==2}}" class="music_list_li3">
　　　　<image class="tubiao" src="../../img/three.png"></image>
　　　　<view class="Head_portrait">
　　　　　　<image class="image3" src="{{item.imcsrc}}"></image>
　　　　</view>
　　　　<view class="music_info">
　　　　　　<view class="music_name"> {{item.muName}} </view>
　　　　　　<view class="singer_name">{{item.nickname}}</view>
　　　　</view>
　　　　</view>
　　　　<!--從第四個開始-->
　　　　<view wx:else class="music_list_li">
　　　　　　<view class="Head_portrait">
　　　　　　　　　<image class="image" src="{{item.imcsrc}}"></image>
　　　　　　</view>
　　　　　　<view class="music_info">
　　　　　　<view class="music_name"> {{item.muName}} </view>
　　　　　　　　<view class="singer_name">{{item.nickname}}</view>
　　　　　　</view>
　　　　</view>
</navigator>

　上面是主要的處理代碼

原理就是：

　　　　在view裏面拿到後臺的數據數組，完了把和別人不同的單獨拿出來作下單獨處理，

　　　　怎麼單獨處理就是wx:if判斷

　　　　　　在這種狀況下給他不一樣額樣式