初学小程序，for循环点击带参

最新推荐文章于 2024-05-09 14:01:17 发布

原创最新推荐文章于 2024-05-09 14:01:17 发布 · 892 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#前端

文章介绍了在微信小程序中，如何使用wx:for遍历数据创建多个容器，并通过bindtap事件结合data-*属性实现点击跳转到对应URL。由于小程序不允许事件名直接携带参数，因此利用dataset传递参数给事件处理函数。示例代码展示了这一过程及其工作原理。

wx:for对data数据遍历生成多个容器，点击每个容器跳转对应的url

刚开始直接用bindtap带参不成功，看文档明白了，因为小程序不允许事件名后直接带参数，，所以使用 ‘data-自定义名称‘来传参

wxml中使用wx:for循环，再使用bindtap添加点击事件，data-url来加入js中data数据

bindtap点击事件，e.currentTarget.dataset则是点击时需要传的参数

打印结果

记录一下~

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

C_xran

关注关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

微信小程序wx:for的使用，动态传参

03-29

作者：萌神哆啦A梦，来自原文地址一：wx:for的使用在小程序的开发过程中，经常会用到在前端页面循环打印一个数组或者对象的数据，这样的话就需要用wx：for来实现。一般情况下，小程序的utils这个文件夹下，我们可以把本地的数据写进去，封装成.js文件，提供对外暴露的接口，然后读取本地数据，这些在上一篇博客中有详细介绍。我们最后说到写好的本地数据可以另一个页面读取： var fileData = require('../../utils/data.js') Page({ data: { showData: fileData.mtData().list, }, }) 在data{}

精选资源

微信小程序期末大作业，体育新闻小程序，适合初学者学习使用

05-15

本项目是一个基于微信小程序的体育新闻阅读平台，非常适合初学者入门学习。首先，我们要了解微信小程序的基本结构。一个小程序通常包含以下部分： 1. `app.js`：全局配置文件，用于定义小程序的启动逻辑，设置...

参与评论您还未登录，请先登录后发表或查看评论

微信小程序项目总结：for循环，绑定点击事件，二维数组列表渲染_小程序wx for二维数组

2401_84411557的博客

05-09

987

为了帮助大家更好的了解前端，特别整理了《前端工程师面试手册》电子稿文件。开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】"title" : "第一个标题","content":"第一个内容"},"title" : "第二个标题","content":"第二个内容"},"title" : "第三个标题","content":"第三个内容"}需要触发readDetail事件时，取到对应的id调接口查看详情。可是小程序又不允许事件名后直接注入id参数。

微信小程序事件传参

闪电⚡之王的博客简介

09-04

4275

事件对象 ===》目标对象 ===》dataset对象 ===》参数

小程序循环按钮添加点击事件传参

weixin_38999134的博客

07-15

1573

<view class="applist" wx:for="{{applist}}" wx:for-item="item" wx:key="index"> <view class="app_box" bindtap="start" data-index='{{item.id}}' > <view> {{item.name}}</view> <view> {{item.aliyunname}}</view&.

微信小程序中使用wx:for，循环中绑定点击事件，对数组进行渲染

qq_42853710的博客

03-25

6079

微信小程序实际开发中，在for循环中，需要获取用户对那组数据进行了修改，使用了vue太久，微信小程序有点忘记了，查阅资料后也是很快熟悉起来，但是赋值过程中遇到了一些小问题，解决了，特此记录一下。 1、在for循环中使用switch开关，用户点击对应开关，需要将对应数组中checked改变状态 <switch style="zoom:.8;margin:30rpx 0 0 20rpx;" type="switch" checked="{{item.checked}}" bindchange="list

初学者好玩儿的小程序

12-04

"初学者好玩儿的小程序"这个主题就是一个极好的起点，它涵盖了C++编程语言，一个广泛应用于系统软件、游戏开发、应用程序等多个领域的强大工具。本文将深入探讨C++小程序的相关知识点，帮助初学者在实践中学习和成长...

一个Python小程序，用于生成并打印一个乘法表这个程序可以帮助初学者理解循环结构和字符串格式化

01-04

2. Python小程序概念：所谓的小程序，通常指的是简短、功能单一的程序，专为解决特定问题而设计。Python小程序则是在Python环境中运行的小型程序。 3. 循环结构：循环结构是编程中的一种基本控制结构，用于重复执行...

知识领域：微信小程序时间轴示例技术：WXML、WXSS、JavaScript、组件化、数据绑定内容：时间轴、UI 设计、循环渲染、样式优化；用途：实现微信小程序时间轴界面，适合初学者学习组件

最新发布

07-18

适合微信小程序初学者，可通过此案例掌握数据绑定、循环渲染、基础布局等核心技能；也适合需要快速开发时间轴功能的开发者，能直接复用或修改代码；对 UI 设计入门者而言，可学习响应式单位（rpx）、色彩搭配、组件...

自制数据存储_数据存储；for循环；移位寄存器的使用；_

09-29

以下将详细讲解涉及的几个关键知识点：数据存储、for循环以及移位寄存器的使用。 1. 数据存储：数据存储不仅包括传统的文件系统存储，还涵盖了数据库管理系统、云存储服务等。在“自制数据存储”中，描述提到了...

微信小程序for循环，点击传递参数

Haines

07-15

2571

解决办法：通过设置data-key曲线救国代码： html <scroll-view style="height: 1000rpx;" scroll-y="true" wx:if="{{committeeUnSelectedFlag}}"> <view class="committee-list"> <view class="committee-item" wx:for="{{committeeLi

微信小程序项目总结：for循环，绑定点击事件，二维数组列表渲染

IT博客技术分享

01-18

6539

一：for循环，绑定点击事件 分享者：niedongdong，原文地址最近公司有小程序的项目，本人有幸参与其中，一个项目做下来感觉受益匪浅，与大家做下分享，欢迎沟通交流互相学习。先说一下此次项目本人体会较深的几个关键点：微信地图、用户静默授权、用户弹窗授权、微信充值等等。言归正传，今天分享我遇到的关于wx:for循环绑定数据的一个tips：想...

微信小程序：自定义传参-点击或者其他事件的时候

motoudi的博客

04-01

312

微信小程序，想在点击事件触发的时候传递参数，需要自己设置，通过data-参数名=“{{参数}}”接收参数使用的是：event.currentTarget.dataset.参数名。微信小程序点击事件用 bind:tap="事件名" 绑定。

微信小程序之循环与事件冒泡

suzhiwei_boke的博客

08-05

973

事件冒泡：在一个对象上触发某类事件，这个事件会向这个对象的的父级传播，从里到外，直至它被处理或者到达了对象层次的最顶层，即document对象。这个过程就是JavaScript的事件冒泡。事件冒泡的作用：（1）事件冒泡允许多个操作被集中处理，（把事件处理器添加到一个父级元素上，避免把事件处理器添加到多个子元素上），它还可以让你在对象层的不同级别捕获事件。 bindtap 普通点击属性 catchtap 执行事件冒泡 event.stopPropagation(); 循环：wx:for="{{d

微信小程序for循环示例（JavaScript）

蒜鸟编程的博客

04-26

3889

在微信小程序开发中，我们最常用的循环方式就是for和foreach，接下来我就浅浅的将自己的写的一小段示例代码分享给大家。其实我个人感觉最好用的还是第一种，第二种或者其他的循环方式，用的较为少，具体还是要看实际应用中的操作吧！从这个代码中，可以看出for循环支持break，当然也支持continue。

微信小程序wx:for循环获取点击的第几个列表

m0_54585610的博客

11-20

1508

注：data-index="{{index}}" 必须在绑定 bindtap 点击事件的 view 才能生效。在 wx:for 循环中添加 data-index="{{index}}"带参数跳转采购详情页面

JS中使用for循环添加点击事件时，获取i值及参数异常原因及解决办法

大头之家

01-24

4884

遇见此问题,代码检查了n次都没毛病,但是却出现下述问题, 坑了我好久,原来是这个原因,记录避坑! PS这是js的处理方法, 在jquery中直接用each遍历元素绑定点击事件即可避免 $('#id').each(function(i){ $(this).click(function(){ alert(i); }); }); 转自 : https://

#微信小程序#wx:for循环时点击其中某个子组件如何获取它的下标？

weixin_43811390的博客

12-11

4903

问题描述：在小程序中写一个循环组件，需要实现这个功能：点击其中某个子组件，就把这个组件从这个数组中删除，但是不知道点击事件中返回e如何加入代表该子组件下标的信息。 wx:for用到的是一个普通数组[a,b,c]，不想要写一个对象数组，给每一个元素一个序号属性[{value:“a”, id:“0”}, {value:“b”, id:“1”}, {value:“c”, id:“2”}]，而是直接获取它的下标。解决方法： <block wx:for="{{photoList}}" wx:f

微信小程序学习总结（2）------- 之for循环，绑定点击事件

weixin_30532837的博客

02-16

1791

最近公司有小程序的项目，本人有幸参与其中，一个项目做下来感觉受益匪浅，与大家做下分享，欢迎沟通交流互相学习。先说一下此次项目本人体会较深的几个关键点：微信地图、用户静默授权、用户弹窗授权、微信充值等等。言归正传，今天分享我遇到的关于wx:for循环绑定数据的一个tips： 1.想必大家的都知道wx:for，如下就不用我啰嗦了： <view class="myNew" wx:...

微信小程序wx:for循环实战指南

"微信小程序wx:for遍历循环使用实例解析，通过代码示例详细讲解了如何在小程序中实现数据的遍历展示，包括编辑和删除功能的实现。" 在微信小程序开发中，`wx:for` 是一个非常重要的指令，用于在WXML模板中进行数据...