小程序实践(五):for循环绑定item的点击事件
微信展示列表效果借助于 wx:for
简单写一个列表(wxml文件中):

对应的数据源(js文件中):

写一个点击监听:

效果:

以上、可以实现列表的item点击效果,但是无法到点击的item对应的数据源数据
---------------------------------------------------------------------------------------------------
解决方法:
给有点击事件的组件添加一个 data-any 属性 any可以是任意数据类型。
从下图可以看出我们遍历expertData数组,每一个item 定义为info, 在第二行最后 加了一句 data-bean="{{info}}"

然后修改点击事件:

发现可以用此方法去除点击的item对应的数据对象,以及该对象中某个属性值
控制台打印信息:

这样就可以获取到列表展示数据中某一个item对应的数据了。
--------------------------------------------------------------------------------------
小程序实践(五):for循环绑定item的点击事件的更多相关文章
- 小程序Echarts 构建中国地图并锚定区域点击事件
小程序Echarts 构建中国地图并锚定区域点击事件 Step1 效果展示 使用的绘图框架为 Echarts for Wexin 具体API文档地址请点击 ----> Step2 条件准备 1. ...
- 小程序实践(三):九宫格实现及item跳转
效果图: 实现效果图红色线包含部分的九宫格效果,并附带item点击时间. --------------------------------------------------------------- ...
- 小程序实践(十一):showModal的使用
显示模态对话框,确定和取消两个选择+标题+内容的对话框 . // 编辑用户性别 tapSex:function(res){ var that = this wx.showModal({ title: ...
- 小程序实践(十):textarea实现简单的编辑文本界面
textarea是官方的原生组件,用于多行输入 简单的例子,监听文本内容.长度,以及设置最大可输入文本长度 wxml <view class='textarea-Style'> <t ...
- 小程序实践(六):view内部组件排版
涉及知识点: 1.垂直排列,水平排列 2.居中对齐 示例: 1.默认排版 , 一个父组件里面两个子view 显示效果: 2.先给父view设置一个高度和颜色值,用于看效果 3.实现水平排列和垂直排列的 ...
- 小程序实践(二):swiper组件实现轮播图效果
swiper组件类似于Android中的ViewPager,实现类似轮播图的效果,相对于Android的Viewpager,swiper实现起来更加方便,快捷. 效果图: 首先看下swiper支持的属 ...
- 小程序实践(一):主页tab选项实现
官方文档 效果图: 实现底部Tab选项,只需要在项目根目录下的app.json下修改 如图: ----------------------------------------------------- ...
- 微信小程序之实现slideUp和slideDown效果和点击空白隐藏
怎样实现jq中的slideUp或者slideDown这种动画效果呢,我的思路是用css3的transform: translateY()属性,给需要动画的元素添加上一个动画class. 先上效果图: ...
- JavaScript的for循环中嵌套一个点击事件为何点击一次弹出多个相同的值
先看下面一段代码: for(var i=0; i<10; i++) { $('#ul').bind('click', function() { alert(i) }) } 对于这段代码,当点击I ...
随机推荐
- (转)python异步编程--回调模型(selectors模块)
原文:https://www.cnblogs.com/zzzlw/p/9384308.html#top 目录 0. 参考地址 1. 前言 2. 核心类 3. SelectSelector核心函数代码分 ...
- JavaScript中的原型链原理
工作中经常解除到prototype的概念,一开始错误的认为prototype是对象的原型链,其实prototype只能算是JavaScript开放出来的原型链接口,真正的原型链概念应该是__proto ...
- django 模板层排序 class Meta 添加信息
class weeks(models.Model): #星期信息 stu = models.ForeignKey(students,on_delete=models.CASCADE) weeklist ...
- mysql 开发进阶篇系列 46 物理备份与恢复( xtrabackup的 选项说明,增加备份用户,完全备份案例)
一. xtrabackup 选项说明 在操作xtrabackup备份与恢复之前,先看下该工具的选项,下面记录了xtrabackup二进制文件的部分命令行选项,后期把常用的选项在补上.点击查看xtrab ...
- 译《The Part-Time Parliament》——终于读懂了Paxos协议!
最近的考古发现表明,在Paxos小岛上,尽管兼职议会成员都有逍遥癖,但议会模式仍然起作用.他们依旧保持了一致的会议记录,尽管他们频繁的进出会议室并且他们的信使还很健忘.Paxon议会协议提供了一种新方 ...
- SpingBoot 属性加载
属性加载顺序 配置属性加载的顺序 开发者工具 `Devtools` 全局配置参数: 单元测试上的 `@TestPropertySource` 注解指定的参数: 单元测试上的 `@SpringBootT ...
- Oracle性能优化之查询语句通用原则
作者早期文章 Oracle优化 索引是表的一个概念部分 , 用来提高检索数据的效率, ORACLE 使用了一个复杂的自平衡 B-tree 结构 . 通常 , 通过索引查询数据比全表扫描要快 . 当 O ...
- 一篇文章让你成为 NIO 大师 - MyCAT通信模型
这篇文章没有详细介绍 NIO 的概念,对于 NIO 不了解的同学,可根据自己需要,阅读这篇介绍 NIO 的博客 io.mycat.net.NIOAcceptor NIOAcceptor负责处理客 ...
- mysql连续聚合
连续聚合是按时间顺序对有序数据进行聚合的操作. 在下面的救示例中将使用EmpOrders表,该表用于存放每位员工每月发生的订购数量. 运行如下 代码创建EmpOrders表并填充示例数据. CREAT ...
- NiftyNet开源平台的使用 -- 配置文件
NiftyNet开源平台的使用 NiftyNet基础架构是使研究人员能够快速开发和分发用于分割.回归.图像生成和表示学习应用程序,或将平台扩展到新的应用程序的深度学习解决方案. 详细介绍请见: ...