Javascript 在微信小程序中将onTap功能绑定到按钮的更简单方法

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

<!-- 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>

/* part of play.js */

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

我认为一定有更好的方法来简化这个重复的代码。

---

如何使它们成为一个函数并将其绑定到多个按钮？

使用

数据-*

属性为其创建函数并为每个按钮传递id

比如说,

...

onTap：（事件）=>{
让id=event.currentTarget.dataset.id
如果（id=“上一个”）
Player.prev（）
否则如果（id=“fback”）
Player.fback（）
...

为它创建一个函数，并使用

数据-*

属性为每个按钮传递一个id

比如说,

...

onTap：（事件）=>{
让id=event.currentTarget.dataset.id
如果（id=“上一个”）
Player.prev（）
否则如果（id=“fback”）
Player.fback（）
...