小程序View点击响应传递多个参数

小程序开发中,view的点击事件是通过bindtap绑定的,比如:

复制代码
 <view class='pay-button' bindtap='gotoDetail' id='{{item.id}}'>查看详情</view>

在js文件中是这样获取参数id的:

复制代码
gotoDetail: function(e) {
    var id = e.currentTarget.id;
    wx.navigateTo({
      url: '../../home/room?id=' + id
    })
  }

如果要传递多个参数,就要用到data-xxx属性了,xxx的意思是这个名称可以随便取:

复制代码
 <view class='pay-button' bindtap='gotoDetail' id='{{item.id}}' data-roomid='{{item.roomId}}' data-price='{{item.price}}'>查看详情</view>

打印一下传递到js的数据,会看到一个json格式的数据:

复制代码
dataset: {
		price: 6,
		roomid: 166
	}
id: "1169"
offsetLeft: 275
offsetTop: 16
__proto__: Object

所以我们要获取点击的参数,可以这样写:

复制代码
gotoDetail: function(e) {
    var id = e.currentTarget.id;
	var roomId = e.currentTarget.dataset.roomid;
	var price = e.currentTarget.dataset.price;
    wx.navigateTo({
      url: '../../home/room?id=' + id
    })
  }

注意:传递过来的参数名都是小写的,即使你写成 data-roomId,传递过来的参数名也是 roomid。

相关推荐
CDwenhuohuo7 分钟前
小程序全局使用api
javascript·vue.js·小程序
whinc9 分钟前
Node.js技术周刊 2026年第16周
前端·javascript
DyLatte11 分钟前
我做了个AI项目后才发现:会做事的人,正在输给会讲故事的人
前端·后端·程序员
深海鱼在掘金11 分钟前
从Claude Code泄露源码看工程架构:第三章 — CLI 启动链路的分流策略与按需加载机制
前端·人工智能·设计模式
踩着两条虫12 分钟前
VTJ:低代码平台原理
前端·低代码·ai编程
颜酱14 分钟前
提示词强化1:三个让大模型更「听话」的习惯
前端·javascript·人工智能
破茧成蝶81014 分钟前
修复播报缺失文字的bug,改为“播放单个 -> 等待结束 -> 延迟 10ms秒 -> 播放下一个”的递归/循环模式
前端
颜酱18 分钟前
提示词强化 2:元提示(Meta-Prompt)与动态提示词
前端·javascript·人工智能
fengci.19 分钟前
ctfshow其他(web408-web432)
android·开发语言·前端·学习·php
研☆香25 分钟前
es6的一些更新特点介绍
前端·ecmascript·es6