小程序实践(五):for循环绑定item的点击事件

微信展示列表效果借助于 wx:for 

简单写一个列表(wxml文件中):

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

写一个点击监听:

效果:

以上、可以实现列表的item点击效果,但是无法到点击的item对应的数据源数据

---------------------------------------------------------------------------------------------------

解决方法:

给有点击事件的组件添加一个 data-any  属性 any可以是任意数据类型。

从下图可以看出我们遍历expertData数组,每一个item 定义为info, 在第二行最后 加了一句  data-bean="{{info}}"

 然后修改点击事件:

 发现可以用此方法去除点击的item对应的数据对象,以及该对象中某个属性值 

   控制台打印信息:

 这样就可以获取到列表展示数据中某一个item对应的数据了。

----------------------------------------------------------------------------------

小程序实践(一):主页tab选项实现

小程序实践(二):swiper组件实现轮播图效果

小程序实践(三):九宫格实现及item跳转

小程序实践(四):动态控制组件的显示/隐藏

小程序实践(五):for循环绑定item的点击事件

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏小程序·云开发专栏

小程序页面管理与跳转

原文链接:https://godbasin.github.io/2018/09/08/wxapp-page-and-navigate/

61510
来自专栏进击的君君的前端之路

HTML表单的用法

34250
来自专栏码生

Chrome 浏览器最牛插件之一 Vimium

最近学习了一下,整理了一下官方的默认按键。其中我使用到的都进行了中文翻译,一些没有翻译的是我没有使用的,这部分理解不深,不想误导大家,所以将英文原文放在这里,还...

26210
来自专栏Python小屋

Python批量导入图片生成PowerPoint 2007+文件

使用方法:安装扩展库python-pptx,然后把上文中抓取的图片和本程序放在同一个文件夹。 import os import pptx from pptx.u...

33430
来自专栏salesforce零基础学习

salesforce lightning零基础学习(七) 列表展示数据时两种自定义编辑页面

上一篇Lightning内容描述的是LDS,通过LDS可以很方便的实例化一个对象的数据信息。当我们通过列表展示数据需要编辑时,我们常使用两种方式去处理编辑页面:...

14320
来自专栏ArrayZoneYour的专栏

借助Babel 7和Webpack构建React Toolchain

React不是完全开箱即用的。它使用了一些最近node才支持的关键字和语法(在本教程中我使用了v 9.3.0版本)。因此需要一些很麻烦的设置,但是Faceboo...

27040
来自专栏Python攻城狮

Django教程(二)- Django视图与网址进阶1. HTML表单2.CSRF3.代码操作

HTML 表单用于搜集不同类型的用户输入。 表单是一个包含表单元素的区域。 表单元素是允许用户在表单中输入内容,比如:文本域(textarea)、下拉列表、...

10740
来自专栏PHP在线

PHP判断远程图片或文件或url是否存在

//判断远程文件 function check_remote_file_exists($url) { $curl = curl_init($url); ...

36880
来自专栏张戈的专栏

WordPress开启颜色评论但不造成XSS漏洞的小方法

前段时间分享过一些 XSS 漏洞的修复技巧,而且也说到了 WordPress 开启颜色评论需要在 functions.php 中插入如下代码,也就是禁用 Wor...

362100
来自专栏Golang语言社区

Golang为别人写的csv文件处理的例子

package main import ( "encoding/csv" "flag" "io" "log" "os" ...

39750

扫码关注云+社区

领取腾讯云代金券