2

我正在为微信创建一个简单的音频播放应用程序。在播放屏幕上，它有 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>

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

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

4

1 回答 1

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()
    ...
于 2020-02-29T10:43:58.390 回答