小程序：怎么在两层列表循环（wx:for）的时候判断是否为最后一个元素

时间：2023-02-06 16:39:34

问题说明：

如下图所示，在箭头所指的最后一个选项的底线与底部操作栏的上边线重叠，需要清除掉最后一个元素的底线；

想到的解决方案：

 通过判断是否为最后一个元素，然后通过条件渲染（wx:if）动态添加对应的底线样式: .bottom-line

小程序：怎么在两层列表循环（wx:for）的时候判断是否为最后一个元素

然后开始写代码，第一版如下：

  <view class="vote-item" wx:for="{{votes}}">

        <view class="vote-item-hd">

            <image src="{{item.data.user.avatar_url}}" mode="aspectFill"></image>

            <view class="vote-item-hd-info">

                <view class="nickname">{{item.data.user.nick_name}}</view>

                <view>{{item.time_for_humans}}</view>

            </view>

        </view>

        <view class="vote-item-con">

            <view class="vote-item-con-hd bottom-line">

                {{item.data.content}}

            </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:else 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:else 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）的时候判断是否为最后一个元素

通过示例，我们可以发现：可以使用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.user.avatar_url}}" mode="aspectFill"></image>

            <view class="vote-item-hd-info">

                <view class="nickname">{{vote.data.user.nick_name}}</view>

                <view>{{vote.time_for_humans}}</view>

            </view>

        </view>

        <view class="vote-item-con">

            <view class="vote-item-con-hd bottom-line">

                {{vote.data.content}}

            </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:else 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）的时候判断是否为最后一个元素

总结：很多问题，小程序官方文档直接或间接的给出了解决方案；通过wx:for-item 指定数组当前元素的变量名，从而解决内外层item的冲突；

从而可以在内层列表循环中获取外层列表对应的变量值，然后通过条件渲染（wx:if），从而实现对内层列表循环的最后一个元素进行动态添加边线样式（ .bottom-line）。

相关文章