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

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

  

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

  

写一个点击监听:

  

效果:

  

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

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

解决方法:

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

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

  

然后修改点击事件:

  

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

  控制台打印信息:

  

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

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

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

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

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

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

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

小程序实践(六):view内部组件排版

小程序实践(七):页面间传值

小程序实践(八):验证码倒计时功能

小程序实践(九):返回到上一个界面并传值回去

小程序实践(十):textarea实现简单的编辑文本界面

小程序实践(十一):showModal的使用

小程序实践(十二):七牛云上传图片

小程序实践(五):for循环绑定item的点击事件的更多相关文章

  1. 小程序Echarts 构建中国地图并锚定区域点击事件

    小程序Echarts 构建中国地图并锚定区域点击事件 Step1 效果展示 使用的绘图框架为 Echarts for Wexin 具体API文档地址请点击 ----> Step2 条件准备 1. ...

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

    效果图: 实现效果图红色线包含部分的九宫格效果,并附带item点击时间. --------------------------------------------------------------- ...

  3. 小程序实践(十一):showModal的使用

    显示模态对话框,确定和取消两个选择+标题+内容的对话框 . // 编辑用户性别 tapSex:function(res){ var that = this wx.showModal({ title: ...

  4. 小程序实践(十):textarea实现简单的编辑文本界面

    textarea是官方的原生组件,用于多行输入 简单的例子,监听文本内容.长度,以及设置最大可输入文本长度 wxml <view class='textarea-Style'> <t ...

  5. 小程序实践(六):view内部组件排版

    涉及知识点: 1.垂直排列,水平排列 2.居中对齐 示例: 1.默认排版 , 一个父组件里面两个子view 显示效果: 2.先给父view设置一个高度和颜色值,用于看效果 3.实现水平排列和垂直排列的 ...

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

    swiper组件类似于Android中的ViewPager,实现类似轮播图的效果,相对于Android的Viewpager,swiper实现起来更加方便,快捷. 效果图: 首先看下swiper支持的属 ...

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

    官方文档 效果图: 实现底部Tab选项,只需要在项目根目录下的app.json下修改 如图: ----------------------------------------------------- ...

  8. 微信小程序之实现slideUp和slideDown效果和点击空白隐藏

    怎样实现jq中的slideUp或者slideDown这种动画效果呢,我的思路是用css3的transform: translateY()属性,给需要动画的元素添加上一个动画class. 先上效果图: ...

  9. JavaScript的for循环中嵌套一个点击事件为何点击一次弹出多个相同的值

    先看下面一段代码: for(var i=0; i<10; i++) { $('#ul').bind('click', function() { alert(i) }) } 对于这段代码,当点击I ...

随机推荐

  1. PyTorch-Adam优化算法原理,公式,应用

    概念:Adam 是一种可以替代传统随机梯度下降过程的一阶优化算法,它能基于训练数据迭代地更新神经网络权重.Adam 最开始是由 OpenAI 的 Diederik Kingma 和多伦多大学的 Jim ...

  2. odoo开发笔记 -- many2one搜索更多增加默认过滤条件

    没加过滤条件的时候,效果如下,点击下拉框,搜索更多出现所有模型下的模板: 改进方法(增加默认过滤条件,显示指定模型下的内容): class IrCloudReport(models.Model): _ ...

  3. Workspace in use or cannot be created, choose a different one.错误的解决办法

    eclipse 或 myeclipse 使用一段时间后,有时会因为一些故障自己就莫名奇妙的关闭了,再打开时有时没有问题,有时有会提示错误: Workspace Unavailable: Workspa ...

  4. leetcode — trapping-rain-water

    /** * Source : https://oj.leetcode.com/problems/trapping-rain-water/ * * Created by lverpeng on 2017 ...

  5. MFC控件编程进度条编写

    MFC控件编程进度条编写 一丶进度条编程需要用到的方法 进度条MFC已经帮我们封装好类了. 叫做 CProgressCtrl  进度条编程也很简单. 封装的方法也就那个那几个. GetPos()  获 ...

  6. 连载《一个程序猿的生命周期》-《发展篇》- 22.城市奋斗者的阿Q精神

    好久没有写文章了,有些人会认为博主肯定是没有什么好写的了.其实不然,是想写的太多,实在是没有时间.上半年一直比较忙,处于加班常态的状态,身心疲惫.相较于城市的伪奋斗者,我算比较实干的,而界定“实干”的 ...

  7. Python多进程操作同一个文件,文件锁问题

    最近工作当中做了一个项目,这个项目主要是操作文件的. 在操作耗时操作的时候,我们一般采用多线程或者多进程.在开发中,如果多个线程需要对文件进行读写操作,就需要用到线程锁或者是文件锁. 使用fcntl ...

  8. 【Go】strings.Replace 与 bytes.Replace 调优

    原文链接:https://blog.thinkeridea.com/201902/go/replcae_you_hua.html 标准库中函数大多数情况下更通用,性能并非最好的,还是不能过于迷信标准库 ...

  9. TensorFlow中的通信机制——Rendezvous(二)gRPC传输

    背景 [作者:DeepLearningStack,阿里巴巴算法工程师,开源TensorFlow Contributor] 本篇是TensorFlow通信机制系列的第二篇文章,主要梳理使用gRPC网络传 ...

  10. DLCI 简介

    数据链路连接标识(Data Link Connection Identifier) 帧中继协议是一种统计复用的协议,它在单一物理传输线路上能够提供多条虚电路.每条虚电路都是用DLCI(Data Lin ...