小程序：怎么在兩層列表循環（wx:for）的時候判斷是否為最后一個元素

 

問題說明：

   如下圖所示，在箭頭所指的最后一個選項的底線與底部操作欄的上邊線重疊，需要清除掉最后一個元素的底線；

   想到的解決方案：

   通過判斷是否為最后一個元素，然后通過條件渲染（wx:if）動態添加對應的底線樣式: .bottom-line

 

 

然后開始寫代碼，第一版如下：

 

  <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-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-item 指定數組當前元素的變量名，從而解決內外層item的沖突；

從而可以在內層列表循環中獲取外層列表對應的變量值，然后通過條件渲染（wx:if），從而實現對內層列表循環的最后一個元素進行動態添加邊線樣式（ .bottom-line）。