微信小程序中wxml事件绑定传参

最新推荐文章于 2025-01-23 16:55:33 发布

原创最新推荐文章于 2025-01-23 16:55:33 发布 · 3.1k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#微信小程序 #事件绑定 #wxml中传参

微信小程序专栏收录该内容

2 篇文章

订阅专栏

小程序中wxml事件绑定传参

在wxml中不能在bindtap中直接绑定事件时直接传入参数，html常见的操作例如：

<!--wxml-->
<view bindtap="selectNav(2)">2</view>

<!--js-->
selectNav: function(num){
    console.log(num)
}

会导致：VM27200:1 Component “pages/home/home” does not have a method “selectNav(2)” to handle event "tap"的错误，猜测是将selectNav(2)作为完整字符串去js文件中匹配相关的方法名，匹配失败后返回该报错。

既然不能直接传参，就只能通过属性传参，在bindtap事件触发后，返回的结果如下

changedTouches: [{…}]
currentTarget: {id: "", offsetLeft: 126, offsetTop: 1, dataset: {…}}
detail: {x: 203.8203125, y: 20.98828125}
mark: {}
mut: false
target: {id: "", offsetLeft: 126, offsetTop: 1, dataset: {…}}
timeStamp: 4322
touches: [{…}]
type: "tap"

在target和currentTarget均包含了相关的id和dataset属性。

关于target和currentTarget的区别：event.target指向引起触发事件的元素，而event.currentTarget则是事件绑定的元素，只有被点击的那个目标元素的event.target才会等于event.currentTarget。

所以这里使用currentTarget来绑定相关数据，而id只能绑定一个数据，显然不符合要求。

<!--wxml-->
<view class="nav-item iconfont iconfangjian {{navItem == 2 ? 'active': ''}}" bindtap="selectNav" data-num="2">

<!--js-->
selectNav: function ({ currentTarget }) {
    // console.log(res)
    this.setData({
        "navItem": currentTarget.dataset.num
    })
},

此时bindtap返回结果如下：

changedTouches: [{…}]
currentTarget:
    dataset: {num: "2"}
    id: ""
    offsetLeft: 126
    offsetTop: 1
    __proto__: Object
detail: {x: 174.96875, y: 19.390625}
mark: {}
mut: false
target: {id: "", offsetLeft: 126, offsetTop: 1, dataset: {…}}
timeStamp: 3516
touches: [{…}]
type: "tap"

在selectNav中通过解构赋值， currentTarget.dataset.num获取传递的参数num。