小程式ajax獲取資料遍歷 前幾名樣式不一樣
阿新 • • 發佈：2018-12-19
直接上程式碼
<view class='list' wx:for-index="idx" wx:for="{{datas}}" wx:key='index' bindtap="btnanniu" > <view style='height:50px;' wx:if='{{idx==0}}' id='index'><image src='../../images/first.png' style='padding-left:8px;'></image><image src='{{item.img}}' style='padding:0 15px;width:30px;height:30px;border-raidus:1000px;'></image><text style='padding:0 15px;'>{{item.name}}</text> <text style='float:right;background-color:#EECFA1;padding:10px 20px;border-radius:30px 0 0 30px; '>魅力值\t<text style='color:red;padding-left:10px;'>{{item.num}}</text></text> </view> <view style='height:50px;' wx:elif='{{idx==1}}' id='index'><image src='../../images/second.png' style='padding-left:8px;'></image><image src='{{item.img}}' style='padding:0 15px;width:30px;height:30px;border-raidus:1000px;'></image><text style='padding:0 15px;'>{{item.name}}</text> <text style='float:right;background-color:#EECFA1;padding:10px 20px;border-radius:30px 0 0 30px; '>魅力值\t<text style='color:red;padding-left:10px;'>{{item.num}}</text></text> </view> <view style='height:50px;' wx:elif='{{idx==2}}' id='index'><image src='../../images/third.png' style='padding-left:8px;'></image><image src='{{item.img}}' style='padding:0 15px;width:30px;height:30px;border-raidus:1000px;'></image><text style='padding:0 15px;'>{{item.name}}</text> <text style='float:right;background-color:#EECFA1;padding:10px 20px;border-radius:30px 0 0 30px; '>魅力值\t<text style='color:red;padding-left:10px;'>{{item.num}}</text></text> </view> <view style='height:50px;' wx:else id='{{idx}}'><text style='padding:0 12px 0 18px;' >{{idx+1}}</text><image src='{{item.img}}' style='padding:0 15px;width:30px;height:30px;border-raidus:1000px;'></image><text style='padding:0 15px;'>{{item.name}}</text> <text style='float:right;background-color:#EECFA1;padding:10px 20px;border-radius:30px 0 0 30px; '>魅力值\t<text style='color:red;padding-left:10px;'>{{item.num}}</text></text> </view>
其中idx是資料的id，給個wx:if判斷，當idx==0時，用不一樣的樣式，以此類推，你想要哪個不一樣的就在後面接wx:elif，
剩餘樣式一樣的可以就用wx:else。
這個方法比hidden要好，渲染快（個人感覺）
like this~
完成