小程序和wepy做循环渲染如何点击拿到相对应的值
数据和其他的就忽略,简单上手,wepy的for渲染方式改成对应的就行,传参触发不用改
<view wx:for="{{list}}">
{{item.title}}
<view bindtap="pullDetail"> {{item.content}} </view>
</view>
需要触发readDetail事件时,取到对应的id调接口查看详情。
可是小程序又不允许事件名后直接注入id参数。
其实,小程序早就想到这一点了,提供了一个 data-any (any任意类型) 方法
(小程序给出了示例,大家可以自行研究。)
可以写成如下:
<view class="myNew" wx:for="{{list}}">{{item.title}}<view bindtap="pullDetail" data-id="{{item.id}}">{{item.content}}</view></view>
js文件:
readArticle:function(e){var $id = e.currentTarget.dataset.id; //打印可以看到,此处已获取到了对应的id})
小程序和wepy做循环渲染如何点击拿到相对应的值的更多相关文章
- 微信小程序 富文本插件 循环渲染方式
感谢GitHub https://github.com/icindy/wxParse/wiki/wxParse%E5%A4%9A%E6%95%B0%E6%8D%AE%E5%BE%AA%E7%8E%AF ...
- 小程序框架WePY 从入门到放弃踩坑合集
小程序框架WePY 从入门到放弃踩坑合集 一点点介绍WePY 因为小程序的语法设计略迷, 所以x1 模块化起来并不方便, 所以x2 各厂就出了不少的框架用以方便小程序的开发, 腾讯看到别人家都出了框架 ...
- 微信小程序来了,小程序都能做些什么
2017年的微信大动作就是微信小程序了,到底小程序都能做些什么?这是很多人关注的热点,小程序开发对企业又有什么帮助呢?下面让厦门微信小程序开发公司来为你就分析下. 微信小程序与APP的关系 ...
- 基于spring-boot的社区社交微信小程序,适合做脚手架、二次开发
基于spring-boot的社区社交微信小程序,适合做脚手架.二次开发 代码地址如下:http://www.demodashi.com/demo/13867.html 1 概述 笔者做的一个后端基于s ...
- 微信小程序 springboot nginx 做图片存储 上传 浏览
微信小程序前端-springboot后端-nginx图片存储 前言 本人小白一名,这是第一次学习微信小程序,特此做个记录. 首先准备nginx做图片存储 选择一个地址存放图片 #我的地址 [root@ ...
- 小程序根据数字做for循环
笔记:小程序根据具体一个数值做for循环 n为想循环的次数 <view wx:for="{{n - 0}}"> <text>{{index}}</te ...
- 对小程序框架WePY的精简总结
一.注意点 关闭ES6转ES5关闭上传代码时样式自动补全关闭代码压缩上传本地开发选择dist目录,dist目录也用在开发者工具上实时预览和调试WePY框架对应的开发目录为src二.代码规范 - 变量方 ...
- 原生开发小程序 和 wepy 、 mpvue 对比
1.三者的开发文档以及介绍: 原生开发小程序文档:点此进入 wepy 开发文档:点此进入 mpvue 开发文档:点此进入 2.三者的简单对比: 以下用一张图来简单概括三者的区别: 小程序支持的是 WX ...
- 微信小程序-wepy-组件模板重复渲染
微信小程序开发,有使用wepy框架的需求.上手: 安装自己可以到官网查看,飞机票:https://tencent.github.io/wepy/document.html#/ 具体开发模式和Vue开发 ...
随机推荐
- 关于移动端弹层下的body滚动
关于移动端弹层下的body滚动 这个问题在移动端挺常见的,网上也有一些解决方法,现在笔者来总结一下:css的解决方案都有兼容问题,js是比较稳定的解决方法(虽然比较麻烦) ps: 本文的例子都是用vu ...
- linux seq_file 接口
如我们上面提到的, 在 /proc 下的大文件的实现有点麻烦. 一直以来, /proc 方法因为 当输出数量变大时的错误实现变得声名狼藉. 作为一种清理 /proc 代码以及使内核开发 者活得轻松些的 ...
- Linux内存页大小
当使用内存时, 记住一个内存页是 PAGE_SIZE 字节, 不是 4KB. 假定页大小是 4KB 并且 硬编码这个值是一个 PC 程序员常见的错误, 相反, 被支持的平台显示页大小从 4 KB 到 ...
- 2019-5-12-WPF-模拟触摸设备
title author date CreateTime categories WPF 模拟触摸设备 lindexi 2019-05-12 16:19:32 +0800 2019-5-11 17:2: ...
- 【49.23%】【hdu 1828】Picture
Time Limit: 6000/2000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) Total Submission(s) ...
- 一目了然 | 数据库实例性能调优利器:Performance Insights
Performance Insights是什么 阿里云RDS Performance Insights是RDS CloudDBA产品一项专注于用户数据库实例性能调优.负载监控和关联分析的利器,以简单直 ...
- Cmder安装与使用
越来越多人使用Cmder代替Windows的cmd(毕竟其界面太Lower了),但是每次用Cmder都要回到安装目录查找之后才能使用,真的很麻烦,有木有可以像Git一样右键就是可以用的方法呢?答案当然 ...
- 第四阶段:2.从零打造一款工具APP产品
1.APP:安卓跟IOS(根据目标用户选择 ,那个先做哪个后做,APP的通过需要审核,其中也有很多技巧). 同时注意设计模版的使用(提高效率).竞品分析也是少不了的.
- 015 Ceph的集群管理_1
一.理解Cluster Map cluster map由monitor维护,用于跟踪ceph集群状态 当client启动时,会连接monitor获取cluster map副本,发现所有其他组件的位置, ...
- SpringJDBC的使用(转载)
转载自 https://www.yiibai.com/spring/maven-spring-jdbc-example.html 工具: eclipse4.7.2及mysql-8.0.13 项目最 ...