数据和其他的就忽略,简单上手,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文件:

  1. readArticle:function(e){
  2. var $id = e.currentTarget.dataset.id; //打印可以看到,此处已获取到了对应的id
  3. })

小程序和wepy做循环渲染如何点击拿到相对应的值的更多相关文章

  1. 微信小程序 富文本插件 循环渲染方式

    感谢GitHub https://github.com/icindy/wxParse/wiki/wxParse%E5%A4%9A%E6%95%B0%E6%8D%AE%E5%BE%AA%E7%8E%AF ...

  2. 小程序框架WePY 从入门到放弃踩坑合集

    小程序框架WePY 从入门到放弃踩坑合集 一点点介绍WePY 因为小程序的语法设计略迷, 所以x1 模块化起来并不方便, 所以x2 各厂就出了不少的框架用以方便小程序的开发, 腾讯看到别人家都出了框架 ...

  3. 微信小程序来了,小程序都能做些什么

    2017年的微信大动作就是微信小程序了,到底小程序都能做些什么?这是很多人关注的热点,小程序开发对企业又有什么帮助呢?下面让厦门微信小程序开发公司来为你就分析下.       微信小程序与APP的关系 ...

  4. 基于spring-boot的社区社交微信小程序,适合做脚手架、二次开发

    基于spring-boot的社区社交微信小程序,适合做脚手架.二次开发 代码地址如下:http://www.demodashi.com/demo/13867.html 1 概述 笔者做的一个后端基于s ...

  5. 微信小程序 springboot nginx 做图片存储 上传 浏览

    微信小程序前端-springboot后端-nginx图片存储 前言 本人小白一名,这是第一次学习微信小程序,特此做个记录. 首先准备nginx做图片存储 选择一个地址存放图片 #我的地址 [root@ ...

  6. 小程序根据数字做for循环

    笔记:小程序根据具体一个数值做for循环 n为想循环的次数 <view wx:for="{{n - 0}}"> <text>{{index}}</te ...

  7. 对小程序框架WePY的精简总结

    一.注意点 关闭ES6转ES5关闭上传代码时样式自动补全关闭代码压缩上传本地开发选择dist目录,dist目录也用在开发者工具上实时预览和调试WePY框架对应的开发目录为src二.代码规范 - 变量方 ...

  8. 原生开发小程序 和 wepy 、 mpvue 对比

    1.三者的开发文档以及介绍: 原生开发小程序文档:点此进入 wepy 开发文档:点此进入 mpvue 开发文档:点此进入 2.三者的简单对比: 以下用一张图来简单概括三者的区别: 小程序支持的是 WX ...

  9. 微信小程序-wepy-组件模板重复渲染

    微信小程序开发,有使用wepy框架的需求.上手: 安装自己可以到官网查看,飞机票:https://tencent.github.io/wepy/document.html#/ 具体开发模式和Vue开发 ...

随机推荐

  1. iptables端口映射

    见上节透明代理设置 #iptables -t nat -A PREROUTING -i eth0 -p tcp -s 192.168.62.0/24 --dport 80 -j REDIRECT -- ...

  2. php Restful设计

    1.restful是基于资源的,面向资源架构风格(一个链接,一张图.一个文本等等) 2.restful的http协议 2.1 url: 2.1.1 port 服务端口,默认为80 2.1.2 path ...

  3. 如何检查linux是否安装了php

    方法一.在终端通过php -v命令来查看一下当前php的版本.如果没有安装php,一般会提示没有php这个命令的. 2 方法二.在终端查询安装的包中是否有php,以redhat为例,则可以执行如下命令 ...

  4. IntStack(存放int型值,带迭代器) 附模板化实现 p406

    1 该栈只用于存在int型数据 #include "../require.h" #include <iostream> using namespace std; cla ...

  5. dotnet 设计规范 · 结构体定义

    X 不要给结构体默认构造函数 默认的C#编译器也不让开发者定义有默认构造的结构体 X 不要定义易变的属性 易变的属性指的是在调用属性返回值的时候返回的是新的实例,易变的属性会有很多的问题. ✓ 需要确 ...

  6. H3C HDLC协议使用限制

  7. HashMap和HashSet的使用,区别。集合,Array、Collection(List/Set/Queue)、Map

    HashMap和HashSet的区别 HashMap和HashSet的区别是Java面试中最常被问到的问题.如果没有涉及到Collection框架以及多线程的面试,可以说是不完整.而Collectio ...

  8. 记录vue创建项目过程

    已经学过无数次,但是每次都忘记,毕竟脑容量太小了,每次都需要翻看原来项目和视频再次学习,所以以此文字形式记录下来,方便于下次使用观看 1.打开git,找到创建vue的文件夹(已经安装好git的,然后在 ...

  9. 备战省赛组队训练赛第七场(UPC)

    传送门   日文题解:戳这里

  10. Linux 内核 嵌入的 kobjects

    在我们进入细节前, 值得花些时间理解如何使用 kobjects. 如果你回看被 kobjects 处 理的函数列表, 你会看到它们都是代表其他对象进行的服务. 一个 kobject, 换句话说, 对其 ...