微信展示列表效果借助于 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. Target优化

    优化目标主要包括以下几方面: 1 优化平面文件 如果目标平面文件在某机器的共享目录下,则该机器最好是专门用于文件存储的,如果还应用于其他非文件存储任务,则会降低加载效率 如果Integration s ...

  2. 在C语言中不使用任何中间变量如何将a、b的值进行交换(三种方法)——来自一小萌新工程师的复习

    今天面试嵌入式,突然遇到这么一道题目,虽然简单,但鉴于我答得不是很好,所以还是分析一下为好. 第一种方法: 通过加减法. #include"stdio.h" int main(vo ...

  3. css笔记详解(1)

    css讲解 版权声明 本文原创作者:雨点的名字 作者博客地址:https://home.cnblogs.com/u/qdhxhz/ 首先在我们学习css之前先来思考一个问题,为什么html标签上不直接 ...

  4. 课程回顾-Improving Deep Neural Networks: Hyperparameter tuning, Regularization and Optimization

    训练.验证.测试划分的量要保证数据来自一个分布偏差方差分析如果存在high bias如果存在high variance正则化正则化减少过拟合的intuitionDropoutdropout分析其它正则 ...

  5. 好用的shell可以事半功倍

    程序员离不开shell,一个好用的shell可以事半功倍,推荐zsh以及一些插件 # install zsh $ brew install zsh # install a framework, we ...

  6. dubbo自定义异常传递信息丢失问题解决

    访问我的博客 目前计划对已有的单体项目进行组织架构拆分,调研了分布式系统中常用中间件 Dubbo 和 Spring Cloud,选择了 Dubbo,可以对当前现有项目进行平滑升级改造.但是一开始就遇到 ...

  7. 【原创】USART异步模式配置

        特性: (1)USART只能一位一位地发送和接受数据,在起始位期间,TX端处于低电平:当闲置时,TX端为高. (2)发送和接受由一共用的波特率发生器驱动,当发送器和接收器的使能位分别置位时,分 ...

  8. 【SqlServer系列】数据库三大范式

    1   概述 一般地,在进行数据库设计时,应遵循三大原则,也就是我们通常说的三大范式,即第一范式要求确保表中每列的原子性,也就是不可拆分:第二范式要求确保表中每列与主键相关,而不能只与主键的某部分相关 ...

  9. Java——代码块

    前言 在程序编写之中可以直接使用{...}定义的一段语句就是代码块.根据代码块的位置以及关键字的不同可以分为4种:普通代码块.构造块.静态块以及同步代码块(多线程相关).下面将先介绍前3种以及Java ...

  10. javase基础回顾(三) 动态代理

    动态代理是大型框架中经常用到的经典的技术之一,博主在理解spring的控制反转(依赖注入)的思想时回头着重复习了一下java的动态代理. 在说动态代理之前我们先简单说一说代理是用来干什么的,用于什么样 ...