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

相关推荐
树獭非懒2 分钟前
Google A2UI:让 AI 智能体「开口说界面」
前端·人工智能·后端
Wect7 分钟前
LeetCode 4. 寻找两个正序数组的中位数:二分优化思路详解
前端·算法·typescript
李剑一7 分钟前
纯干货,前端字体极致优化!谷歌、阿里、字节、腾讯都在用的终极解决方案,Vue3 + Vite 直接抄,页面提速不妥协!
前端·vue.js·面试
memeflyfly9 分钟前
Vercel 自动部署完全指南:从配置到问题排查
前端·前端工程化
星辰徐哥14 分钟前
C语言Web开发:CGI、FastCGI、Nginx深度解析
c语言·前端·nginx
weixin_lynhgworld19 分钟前
电商营销新风口,淘宝扭蛋机小程序引爆流量与转化
小程序
暗不需求22 分钟前
JavaScript 面向对象探秘:从构造函数到原型链的优雅继承
前端·javascript
圣光SG24 分钟前
奶茶店网页(纯HTML和CSS)
前端·css·html
kyriewen25 分钟前
你还在给每个图片父元素加类名?CSS :has() 让选择器“逆天改命”
前端·css·面试
漫天黄叶远飞27 分钟前
async/await 到底怎么工作的?
前端