Более простой способ привязать функции onTap к кнопкам в мини-программе WeChat - PullRequest
Новая
       40

Более простой способ привязать функции onTap к кнопкам в мини-программе WeChat

1 голос
/ 29 февраля 2020

Я создаю простое приложение для воспроизведения аудио для WeChat. На экране воспроизведения он имеет 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()
},

Я думаю, что должно быть лучший способ упростить этот повторяющийся код. Как я могу сделать их как одну функцию и привязать ее к нескольким кнопкам?

1 Ответ

0 голосов
/ 29 февраля 2020

Создайте для него функцию и передайте идентификатор для каждой кнопки, используя свойство data-*.

Например, 

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