微信展示列表效果借助于 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. 【ABP杂烩】Extensions后缀扩展方法

    1.Extensions介绍 扩展方法使你能够向现有类型“添加”方法,而无需创建新的派生类型.重新编译或以其他方式修改原始类型. 扩展方法是一种特殊的静态方法,但可以像扩展类型上的实例方法一样进行调用 ...

  2. 运维笔记--docker odoo镜像 运行异常处理

    场景描述: 镜像来源,dockerhub odoo官方镜像:https://hub.docker.com/_/odoo odoo镜像运行一段时间后,出现下述异常,可能是触发某个未知bug:该现象在生产 ...

  3. 【EF6学习笔记】(九)异步处理和存储过程

    本篇原文:Async and Stored Procedures 为何要采用异步? 一个Web服务器肯定有可用线程的限制,那么在一些访问量特别大的情况下,线程肯定会消耗完:这个时候服务器肯定处理不了请 ...

  4. Http协议中get和post的区别

    get(默认值)是通过URL传递表单值,数据追加在action属性后面. post传递的表单值是隐藏到http报文体中,url中看不到. get是通过url传递表单值,post通过url看不到表单域的 ...

  5. tcp_wrapper过滤

    1.1 wrap简介 wrap工作在内核空间和应用程序中间的库层次中.在内核接受到数据包准备传送到用户空间时都会经过库层次,对于部分(只是部分)应用程序会在经过库层次时会被wrap库文件阻挡下来检查一 ...

  6. Scala(一) —— 基础

    一.输出 println("Hello World") 二.变量与常量 1.变量用var表示,常量使用val表示 2.变量类型声明 var variableName : DateT ...

  7. NLP入门(一)词袋模型及句子相似度

      本文作为笔者NLP入门系列文章第一篇,以后我们就要步入NLP时代.   本文将会介绍NLP中常见的词袋模型(Bag of Words)以及如何利用词袋模型来计算句子间的相似度(余弦相似度,cosi ...

  8. H5调取APP或跳转至下载

    来源: 最近在配合移动端做几个详情页h5分享页面,需要调取App并跳转至app详情页, 如果没有安装App,需要判断引导至下载页面. 参考文档: https://juejin.im/post/5b7e ...

  9. 使用LINQ生成Where的SQL语句

    实例1-使用实例-单个语句: ; List<, , }; List<User_info> userInfoList = UserCenterBus.Select_WebSiteBas ...

  10. C#静态成员静态类。

    1. 在静态类中,所包含的所有成员必须是静态的.但不是所有静态成员都必须写在静态类中.       实例成员属于具体的对象,静态成员是属于类的.所以访问静态成员的时候不能通过对象来访问,只能通过类名直 ...