微信小程序按钮绑定onTap函数的更简单方法

Question

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

<!-- 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()
},

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

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()
    ...

微信小程序按钮绑定onTap函数的更简单方法

Simpler way to bind onTap functions to buttons in WeChat mini-program

javascript

wechat

wechat-miniprogram