⼩程序：怎么在两层列表循环（wx：for）的时候判断是否为如果再回到从前
最后⼀个元素
金龙鱼好养吗问题说明：
如下图所⽰，在箭头所指的最后⼀个选项的底线与底部操作栏的上边线重叠，需要清除掉最后⼀个元素的底线；
想到的解决⽅案：
化妆品步骤通过判断是否为最后⼀个元素，然后通过条件渲染（wx:if）动态添加对应的底线样式: .bottom-line
然后开始写代码，第⼀版如下：
<view class="vote-item" wx:for="{{votes}}">
<view class="vote-item-hd">
<image src="{{item.data.ur.avatar_url}}" mode="aspectFill"></image>
<view class="vote-item-hd-info">
<view class="nickname">{{item.data.ur.nick_name}}</view>
<view>{{item.time_for_humans}}</view>
</view>
大酒店婚宴
</view>
<view class="vote-item-con">
<view class="vote-item-con-hd bottom-line">
{{t}}
</view>
<view wx:for="{{item.data.options}}" >
<view wx:if="{{index === item.data.options.length-1}}" class="vote-item-data" hover-class="vote-item-data-active">
{{item.title}}
</view>
<view wx:el class="vote-item-data bottom-line" hover-class="vote-item-data-active">
{{item.title}}
</view>
</view>
</view>
<view class="vote-item-ft top-line">
<i class="fa fa-align-left"><text>21</text></i>
<button open-type="share" plain="true"><i class="fa fa-retweet" bindtap="onShareAppMessage"></i></button>
雨夜的灯光
</view>
</view>
运⾏后发现：判断后的界⾯效果，没有任何改变；期间，我通过进⾏如下修改去打印：item.data.options.length
<view wx:for="{{item.data.options}}" >
<view wx:if="{{index === item.data.options.length-1}}" class="vote-item-data" hover-class="vote-item-data-active">
{{item.data.options.length}} {{item.title}}
</view>
<view wx:el class="vote-item-data bottom-line" hover-class="vote-item-data-active">
{{item.data.options.length}} {{item.title}}
</view>
</view>
上述代码运⾏后，发现没有打印出来结果，不存在item.data.options.length
研究了下⽂档，发现可能是外层列表的item变量名和内层列表的item冲突导致的，⼩程序官⽅⽂档也间接的给出了解决⽅案：⼩程序官⽅⽂档相关内容如下：
通过⽰例，我们可以发现：可以使⽤wx:for-item 指定数组当前元素的变量名来解决内外层item的冲突
于是，我通过 wx:for-item="vote" 让外层列表的变量名为vote，从⽽避免和内层的当前元素变量item冲突；
顺利，通过 vote.data.options.length 获取选项的数组长度；通过条件渲染（wx:if）解决问题
于是修改了下代码：
<view class="vote-item" wx:for="{{votes}}" wx:for-item="vote">
<view class="vote-item-hd">
<image src="{{vote.data.ur.avatar_url}}" mode="aspectFill"></image>
<view class="vote-item-hd-info">
<view class="nickname">{{vote.data.ur.nick_name}}</view>
<view>{{vote.time_for_humans}}</view>
</view>
</view>
<view class="vote-item-con">
<view class="vote-item-con-hd bottom-line">我与文化遗产
{{t}}
</view>
<view wx:for="{{vote.data.options}}" >
<view wx:if="{{index === vote.data.options.length-1}}" class="vote-item-data" hover-class="vote-item-data-active">八点半的英文
{{vote.data.options.length}} {{item.title}}
</view>
<view wx:el class="vote-item-data bottom-line" hover-class="vote-item-data-active">
{{vote.data.options.length}} {{item.title}}
</view>
</view>
</view>
<view class="vote-item-ft top-line">
<i class="fa fa-align-left"><text>21</text></i>
<button open-type="share" plain="true"><i class="fa fa-retweet" bindtap="onShareAppMessage"></i></button>
</view>
</view>
运⾏结果：重叠不见，问题解决
鸽子饲料
总结：很多问题，⼩程序官⽅⽂档直接或间接的给出了解决⽅案；通过wx:for-item 指定数组当前元素的变量名，从⽽解决内外层item的冲突；
从⽽可以在内层列表循环中获取外层列表对应的变量值，然后通过条件渲染（wx:if），从⽽实现对内层列表循环的最后⼀个元素进⾏动态添加边线样式（ .bottom-line）。
