javascript - 更简单的方法将 onTap 函数绑定(bind)到微信小程序中的按钮

Question

我正在为微信创建一个简单的音频播放应用程序。 在播放屏幕上，它有 5 个控制按钮 - 上一首、快退、播放/暂停、快进和下一首。 所以我创建了它们并绑定(bind)到每个事件监听函数。

<!-- part of play.wxml -->

<view class="button-group">
    <image class="button" src="../../res/img/control_prev.svg" bindtap="onPrev"></image>
    <image class="button" src="../../res/img/control_fback.svg" bindtap="onFBack"></image>
    <image class="button" src="../../res/img/control_play.svg" bindtap="onPlay"></image>
    <image class="button" src="../../res/img/control_ffor.svg" bindtap="onFFor"></image>
    <image class="button" src="../../res/img/control_next.svg" bindtap="onNext"></image>
</view>

在 play.js 上，我必须定义所有这 5 个函数。

/* part of play.js */

onPrev: (event) => {
    Player.prev()
},
onFBack: (event) => {
    Player.fback()
},
onPlay: (event) => {
    Player.play()
},
onFFor: (event) => {
    Player.ffor()
},
onNext: (event) => {
    Player.next()
},

我想一定有更好的方法来简化这段重复的代码。 如何将它们作为一个函数并将其绑定(bind)到多个按钮？

Answer 1

为其创建一个函数，并使用 data-* 属性为每个按钮传递一个 id。

例如，

<image class="button" src="../../res/img/control_prev.svg" bindtap="onTap" data-id="prev"></image>
<image class="button" src="../../res/img/control_fback.svg" bindtap="onTap" data-id="fback"></image>
...

onTap: (event) => {
    let id = event.currentTarget.dataset.id
    if (id == "prev")
        Player.prev()
    else if (id == "fback")
        Player.fback()
    ...