微信展示列表效果借助于 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. RISC-V平台的汇编指令解析

     csrr    a0, 0xF14 //把0xF14的值读入到a0中  andi    a1, a0, 0x1f //把a0 和0x1F按位与运算后存储到a1中 srli    a0, a0, 5 ...

  2. Source优化

    优化Source主要包括以下几方面: 1 优化sqlquery 在mapping中,通常会在Source Qualifier组件中使用sqlquery读取数据,则优化通常包括以下几点: 1)  如果在 ...

  3. 利用max-height适应多尺寸屏幕的下拉动画

    移动设备的特点之一便是屏幕尺寸多种多样,所以我们在制作针对移动设备的动画时必须不同尺寸屏幕的兼容性.比如我们要制作以下动画:红框2为详细内容,默认收起:红框1处为事件响应热区,点击后展开或收起红框2的 ...

  4. 翻译:SockJS-node文档(一)

    什么是SockJS? SockJS是一个提供Websocket通信的JavaScript库,目的是实现在浏览器与服务器之间低延迟.全双工.跨域通信,它提供跨浏览器的统一API,即使不支持HTML5 W ...

  5. CSS从零开始(1)--CSS基础语法

    1.CSS语法 CSS规则有两个主要部分构成:选择器,以及一条或多条说明. 例如:selector{declaration1;declaration2;declaration3;......;} 注: ...

  6. 08 训练Tensorflow下围棋

    这里介绍一下开源项目Mugo,它基于Tensorflow,可以使用sgf的棋谱训练围棋机器人,跟你下围棋,这里直接给出本人修改完善好的项目,只介绍一下用法. 链接:http://pan.baidu.c ...

  7. Dubbo架构学习整理

    一. Dubbo诞生背景 随着互联网的发展和网站规模的扩大,系统架构也从单点的垂直结构往分布式服务架构演进,如下图所示: 单一应用架构:一个应用部署所有功能,此时简化CRUD的ORM框架是关键 垂直应 ...

  8. 编码(2)从字节理解Unicode(UTF8/UTF16)

    https://www.cnblogs.com/zizifn/p/4716712.html 从字节理解Unicode(UTF8/UTF16) 如果你不知道或者不了解什么是Unicode/UTF8/UT ...

  9. 【WebApi系列】浅谈HTTP在WebApi开发中的运用

    WebApi系列文章 [01]浅谈HTTP在WebApi开发中的运用 [02]聊聊WebApi体系结构 [03]详解WebApi参数的传递 [04]详解WebApi测试和PostMan [05]浅谈W ...

  10. Go基础系列:接口类型断言和type-switch

    接口类型探测:类型断言 接口实例中存储了实现接口的类型实例,类型的实例有两种:值类型实例和指针类型实例.在程序运行过程中,接口实例存储的实例类型可能会动态改变.例如: // ins是接口实例 var ...