小程序中点击事件传参方式

最新推荐文章于 2024-08-24 00:59:55 发布

Mr_lwb

最新推荐文章于 2024-08-24 00:59:55 发布

阅读量2.3k

点赞数 1

分类专栏：小程序

本文链接：https://blog.csdn.net/u010881899/article/details/85165959

版权

小程序专栏收录该内容

1 篇文章 0 订阅

订阅专栏

<view  wx:for="{{listData}}" class="item {{activeStatus === item.id ? 'active':''}}" wx:key="{{index}}" @tap="click({{item.id}})">
  <text>{{item.title}}</text>
</view>

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

Mr_lwb

关注关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

微信小程序05 事件绑定与事件传参

m0_50707858的博客

03-28

6262

一、什么是事件（一）定义事件是渲染层（页面）到逻辑层（JS）的通讯方式，通过事件可以将用户在渲染层的行为，传递到逻辑层进行事务处理。事件对象可以携带额外信息，如 id, dataset, touches。（二）小程序中常用的事件类型绑定方式事件描述 tap bindtap或者bind:tap 手指触摸后马上离开，类似于HTML中的click事件 input bindinput或 bind:input 文本框的输入事件 change bindchange或bind:cha

小程序页面传参之事件传参

sdasadasds的博客

05-20

1041

场景：当我们在开发小程序的时候，经常会遇到此类要求：点击一个内容跳转到一个新的页面，并且新页面的内容是由点击的内容决定的。比如用户在美团上浏览商品，通常情况下我们去查看详情页面，会发现它的结构都是相同或者类似的，但是内容是由用户点击的内容决定的。比如点击黄焖鸡，进到详情页就会发现封面是黄焖鸡，这和我们点击的内容是一一对应的。这种效果在小程序开发过程中十分常见。今天我们拿一个音乐类的小程序举例子，看看页面之间的数据是如何进行关联的。需求：用户点击图1中的播放按钮时，跳转到图2，然后播放图1中对应列表的歌

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

【微信小程序】事件传参的两种方式

云泽野の编程日记

06-10

2044

事件传参:在触发事件时，将一些数据作为参数传递给事件处理函数的过程，就是事件传参在微信小程序中，我们经常会在组件上添加一些自定义数据，然后在事件处理函数中获取这些自定义数据，从而完成业务逻辑的开发.小程序进行事件传参的时候，除了使用data-*属性传递参数外，还可以使用 mark 标记传递参数mark 是一种自定义属性，可以在组件上添加，用于来识别具体触发事件的 target 节点。同时 mark 还可以用于承载一些自定义数据然后通过事件对象进行获取自定义数据,在组件上使用mark:自定义属性。

微信小程序-bindtap等事件传参

最新发布

一些平时在开发过程中遇到的常见问题，分享给大家

08-24

1426

小程序在组件上绑定事件后，传递参数的方式不同于前端其他场景中直接加参数的方式，小程序在参数的传递时，采用事件对象的自定义属性的方式，具体实现如下：

flutter页面跳转并传值

weixin_44275763的博客

04-23

810

页面跳转传值废话不多说上代码 InkWell可以给任意Widget添加点击事件，我们在这里通过ontap事件点击跳转到子页面 then是页面跳过去，回来后就会执行then里面的方法，子页面传过来的值，then里面的匿名方法会接收到 push后面的 <参数类型> 有了then就要和then里面方法的参数类型一样，没有then就不需要加参数类型 InkWell( ...

Flutter 跳转页面并传值

yechaoa

05-13

7550

文章目录1、跳转2、传值3、接收跳转传值是再普通不过的小功能了，在开发中会经常用到，比如列表进入详情。效果： 1、跳转比如在onTap事件中处理跳转。为了导航到新的页面，我们需要调用Navigator.push方法。该push方法将添加Route到由导航器管理的路由栈中！该push方法需要一个Route，但Route从哪里来？我们可以创建自己的，或直接使用MaterialPa...

微信小程序之bindtap事件传参

qq_33358062的博客

10-23

4万+

之前一直以为微信小程序按钮点击事件传参是和web端相同，即在事件中写明所传递的参数即可，但是这样尝试过以后发现小程序的控制台报错，报所写的bindtap中参数错误，之后百度发现，小程序按钮点击这类事件时一般的处理方法是指明元素所在的id，bindtap只是写明函数名，例如，bindtap='setNumber',而不是bindtap='setNumber(1)',在js中只要写function(e

微信小程序-bindtap事件传递参数

u012275249的博客

12-14

1万+

第一步，绑定事件，定义传递的参数，注意这个参数experienceid一定要小写，如果采用驼峰命名的方法，小程序编译器也会强制的转为了小写，我在这里浪费了好多时间，最后调试打印event.currentTarget.dataset 里面的值才发现的，如果需要，可以通过 - （中划线）来连接单词，如下图所示然后在对应的JS文件里面接受到数据，如下图所示。就是这么简单就搞定了，顺便讲讲页面如何跳转...

微信小程序实现bindtap等事件传参

10-17

以`bindtap`事件为例，它是小程序中常见的点击事件。下面是一个简单的`bindtap`事件应用： ```wxml <view id="tapTest" data-hi="WeChat" bindtap="tapName"> Click me! ``` 在对应的JavaScript页面中，我们需要...

微信小程序 页面跳转传参详解

09-01

总的来说，微信小程序的页面跳转和传参主要依赖`wx.navigateTo` API，通过URL查询参数的方式传递数据。在实际开发中，结合事件处理函数和生命周期方法，可以灵活地实现页面间的交互和数据传递。理解这一机制对于微信...

原生小程序 之事件绑定（数据绑定）与事件传参下拉刷新、触底事件等

weixin_47409897的博客

05-17

2206

目录原生小程序 之事件绑定与时间传参事件绑定点击事件 bindtap数据的单向绑定与双向数据绑定数据双向绑定的限制（只能绑定一个值，对象的属性值不可绑定的）数据双向绑定的实现绑定对象的属性值事件传参点击按钮，当前按钮给事件传递了参数info为2input 事件拿到输入的值原生小程序 之事件绑定与时间传参事件绑定 点击事件 bindtap index.wxml <view> <button bindtap="btn1">按钮</butto

支付宝小程序页面逻辑处理之事件(onTap,onTouchStart,onTouchMove,onTouchEnd)

Marswill

08-29

2万+

我们知道在前端开发中事件是交互中最重要的概念。那么在支付宝小程序开发中也不例外，他是交互中非常重要的因素。但是在移动端由于界面和用户动作的原因我们常用的事件就是Tap和Touch事件。关于这部分的视频教学请大家前往： https://edu.csdn.net/course/detail/5750 事件使用范例页面代码： <button id="clickbtn" ...

支付宝小程序视频教程（一）

09-04

支付宝小程序”课程共有三个阶段第一阶段——讲解支付宝小程序程序结构；APP；PAGE；视图层；事件；样式。第二阶段——讲解组件；API第三阶段——支付宝小程序支付；共享单车项目案例

微信小程序 组件与页面的传参、方法调用（二）

mqbug的博客

06-02

5453

微信小程序 组件与页面的传参、方法调用使用小程序组件时经常不会只用到静态页面显示，需要一定的交互。这时候就需要知道这么传参与方法调用的了首先先放官方的文档，介绍的还是比较清楚详细，有能力的同学请直接阅读官方文档小程序组件官方文档目录：一、页面传递参数给组件二、组件传递参数回页面三、页面调用组件中的方法四、组件调用页面中的方法一、页面传递参数给组件 1、第一步先在组件js中声明需要接受的变量名在 js页面中 properties 里面声明定义，我们定义了 btnText 用来接收 Strin

小程序中点击事件传参

ywxiaochengxu的博客

09-29

3万+

小程序是事件驱动型的，小程序可以使用点击事件传递参数：代码如下： // wxml文件 {{item}} // js文件 data: { currentTabsIndex:0 }, onTa

微信小程序 - 点击事件传递参数（简单详细）

卡尔特斯

10-30

1万+

在小程序开发的时候，有时候需要在点击事件触发之后拿到一个参数做为使用，小程序不像 Vue 可以直接点击事件中放参数，而小程序它只能通过自定义属性进行绑定参数使用。 .wxml 中使用 <view bindtap="touchAction" data-index="1">点击</view> .js 中接收 touchAction: function(e) { // 传递的参数 let query = e.currentTarget.dataset['index..

小程序中实现点击一个转发按钮，携带当前点击参数，转发另一个页面的功能

liya_nan的博客

08-13

1万+

微信官方文档新提供了button的open-type="share"属性，然后js中直接定义onShareAppMessage()方法,旨在更直观的触发用户转发。但是有时候需要转发另一个页面，并且需要将当前点击对象的信息传递到要转发的页面。下面就来展示一下实现过程： wxml： <button class="zanbtn shared" data-item="{{comme...

支付宝扫码跳转小程序并传参

大爱仙尊

10-11

2万+

支付宝扫码跳转小程序并传参，支付宝扫码，参数解析

小程序的事件传参和页面传参

06-06

小程序的事件传参和页面传参都是非常常见的场景，具体实现方式如下： ### 事件传参在小程序中，可以通过 `data-*` 属性将数据传递给事件处理函数。在 WXML 中，通过 `bind:eventName` 或 `catch:eventName` 绑定事件处理函数，例如： ```html <view bind:tap="handleTap" data-id="123">点击我</view> ``` 在事件处理函数中，可以通过 `event.currentTarget.dataset` 获取 `data-*` 属性值，例如： ```javascript Page({ handleTap(event) { const id = event.currentTarget.dataset.id console.log('id:', id) // 输出：id: 123 } }) ``` ### 页面传参在小程序中，可以通过路由传参的方式将数据传递给目标页面。在源页面中，通过 `wx.navigateTo` 或 `wx.redirectTo` 方法跳转到目标页面，并传递参数，例如： ```javascript wx.navigateTo({ url: '/pages/detail/detail?id=123' }) ``` 在目标页面中，可以通过 `onLoad` 生命周期函数获取路由参数，例如： ```javascript Page({ onLoad(options) { const id = options.id console.log('id:', id) // 输出：id: 123 } }) ``` 需要注意的是，路由参数的类型都是字符串类型，如果需要传递数字或其他类型的数据，需要进行类型转换。例如： ```javascript wx.navigateTo({ url: '/pages/detail/detail?id=' + 123 }) ``` 在目标页面中，需要将字符串类型的参数转换为数字类型，例如： ```javascript Page({ onLoad(options) { const id = parseInt(options.id) console.log('id:', id) // 输出：id: 123 } }) ``` 除了路由传参，还可以通过全局变量、缓存、事件总线等方式进行数据传递。需要根据具体场景选择合适的方式。