问题说明:

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

想到的解决方案:

 通过判断是否为最后一个元素,然后通过条件渲染(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)。

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

  1. 小程序框架之逻辑层App Service

    小程序开发框架的逻辑层使用 JavaScript 引擎为小程序提供开发者 JavaScript 代码的运行环境以及微信小程序的特有功能. 逻辑层将数据进行处理后发送给视图层,同时接受视图层的事件反馈. ...

  2. 微信小程序添加卡券到微信卡包,使用wx.addCard()方法传参及整体流程

    一.准备: 1.经微信认证过的微信公众号. 2.经微信认证过的微信小程序号. 先来看看微信小程序官方的文档,https://developers.weixin.qq.com/miniprogram/d ...

  3. 微信小程序笔记<七>视图层 —— wxml

    微信小程序的视图层由 *.wxml 组成,wxml与html一样属于标签语言,但wxml与html的标签截然不一样. xwml特性 一.数据绑定 <!--wxml--> <view& ...

  4. 微信小程序教学第三章(含视频):小程序中级实战教程:列表-页面逻辑处理

    § 页面逻辑处理 本文配套视频地址: https://v.qq.com/x/page/n0554dndrez.html 开始前请把 ch3-2 分支中的 code/ 目录导入微信开发工具 修改 ind ...

  5. 微信小程序电商实战-商品列表流式布局

    今天给大家分享一下微信小程序中商品列表的流式布局方式,根据文章内容操作就可以看到效果哦~~~ 流式布局概念 流式布局也叫百分比布局 把元素的宽,高,margin,padding不再用固定数值,改用百分 ...

  6. 用小程序·云开发两天搭建mini论坛丨实战

    笔者最近涉猎了小程序相关的知识,于是利用周末时间开发了一款类似于同事的小程序,深度体验了小程序云开发模式提供的云函数.数据库.存储三大能力.关于云开发,可参考文档:小程序·云开发. 个人感觉云开发带来 ...

  7. 微信小程序picker组件两列关联使用方式

    在使用微信小程序picker组件时候,可以设置属性   mode = multiSelector   意为多列选择,关联选择,当第一列发生改变时侯,第二列甚至第三列发生相应的改变.但是官方文档上给的只 ...

  8. 微信小程序中在swiper-item中遍历循环添加多个数据内容(微信小程序交流群:604788754)

    在小程序中为了实现一个<swiper-item>中添加多个内容重复的标签,那就需要使用wx:for循环.如果按小程序的简易教程,循环加在block中,而swiper-item放在里面.所有 ...

  9. 微信小程序——加入购物车弹层

    对于网上商城,加入购物车是一个必备功能了.俺今天就来说下在微信小程序里如何造一个购物车弹层. 先上图: 主要用到的微信API:wx.createAnimation(OBJECT) 说下思路: 1.wx ...

随机推荐

  1. Spring3.0+Hibernate+Atomikos集成构建JTA的分布式事务--解决多数据源跨库事务

    一.概念 分布式事务分布式事务是指事务的参与者.支持事务的服务器.资源服务器以及事务管理器分别位于不同的分布式系统的不同节点之上.简言之,同时操作多个数据库保持事务的统一,达到跨库事务的效果. JTA ...

  2. Git Hook 同步服务器代码

    参考并转载自: http://www.embbnux.com/2014/09/05/git_server_let_code_auto_deploy/ http://www.chenyudong.com ...

  3. 深度学习篇——Tensorflow配置(傻瓜安装模式)

    前言 如果你是一个完美主义者,那么请绕过此文,请参考<深度学习篇——Tensorflow配置(完美主义模式)> 安装 pip install tensorflow ok,只要不报错,安装就 ...

  4. 数组和集合(四)、Map集合的使用总结

    一.概述 键值对,无序 键唯一.值不唯一 只允许存在一个Key为null元素 二.实现类 1. HashMap · 无序,数组+链表+红黑树 · 非线程安全 2. LinkedHashMap · 有序 ...

  5. Android——eclipse共享library以及导出jar包[转]

    目录(?)[-] 一apk之间共享Class 二apk导出jar包   android的apk在在eclipse上进行开发的时候,有时候需要import其它包中的一些class,正常的方法就是在jav ...

  6. 必看的 jQuery性能优化的38个建议

    一.注意定义jQuery变量的时候添加var关键字 这个不仅仅是jQuery,所有javascript开发过程中,都需要注意,请一定不要定义成如下: $loading = $('#loading'); ...

  7. JavaScript怎么让字符串和JSON相互转化

    var obj = str.parseJSON(); //由JSON字符串转换为JSON对象 var obj = JSON.parse(str); //由JSON字符串转换为JSON对象

  8. 【总结整理】UGC内容

    除了内容了产品,还有什么适合引入UGC? :引发讨论,诱导参与,然后促成销售. User Generated Content,也就是用户生成内容的意思. 购买类产品,内容催生购买 1.为用户购买提供思 ...

  9. ios野指针的3种常见情况

  10. 开启Windows8里面的Hyper-V虚拟机功能

    首先了解下什么是Hyper-V?也就是虚拟化技术,允许终端用户在同一台机器上运行多个操作系统,支持32位和64位系统,可以直接在Windows 8上创建自己的虚拟机.开启Hyper-V虚拟机需要更多的 ...