小程序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。

相关推荐
NEXT0619 分钟前
数组转树与树转数组
前端·数据结构·面试
We་ct23 分钟前
浏览器 Reflow(重排)与Repaint(重绘)全解析
前端·面试·edge·edge浏览器
笨笨狗吞噬者24 分钟前
【uniapp】小程序端解决分包的uni_modules打包后产物进入主包中的问题
前端·微信小程序·uni-app
WebInfra25 分钟前
Modern.js 3.0 发布:聚焦 Web 框架,拥抱生态发展
前端·javascript·前端框架
AngelPP32 分钟前
OpenClaw Memory 模块完整分析
前端·aigc·ai编程
ID_1800790547338 分钟前
淘宝商品详情 API 接口 item_get: 高效获取商品数据的技术方案
java·前端·数据库
We་ct40 分钟前
LeetCode 637. 二叉树的层平均值:BFS层序遍历实战解析
前端·数据结构·算法·leetcode·typescript·宽度优先
敲敲了个代码40 分钟前
浏览器时间管理大师:深度拆解 5 大核心调度 API
前端·javascript·学习·web
ssshooter1 小时前
看完就懂 useLayoutEffect
前端·react.js·面试
parade岁月1 小时前
DOM 里有 Tailwind class,为什么样式还是不生效?v4 闭环修复实战
前端·vue.js