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

更新时间:2023-06-10 23:30:49 阅读: 评论:0

⼩程序:怎么在两层列表循环(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)。

本文发布于:2023-06-10 23:30:49,感谢您对本站的认可!

本文链接:https://www.wtabcd.cn/fanwen/fan/89/1032845.html

版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,我们将在24小时内删除。

标签:列表   外层   解决
相关文章
留言与评论(共有 0 条评论)
   
验证码:
推荐文章
排行榜
Copyright ©2019-2022 Comsenz Inc.Powered by © 专利检索| 网站地图