小程序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判斷

　　　　　　在這種情況下給他不同額樣式