小程序for循环后，点击事件，单击一个按钮后，其他按钮一起变，如何给图片加上id？求助！
发布于 5 年前 作者 jielai 6280 次浏览 来自 问答 
    <view class="anniu" wx:if="{{isplay==false}}" bindtap='play'  data-ypname='{{item._id}}' id="{{index}}"  >
      <image src='../../images/play.png' style="width:50px;height:50px;"></image>
    </view>
    <view class="anniu"  wx:if="{{isplay==true}}" bindtap='stop'>
      <image src='../../images/pause.png' style="width:50px;height:50px;"></image>
    </view>

    play: function (ypname) {
      var dataset = ypname.currentTarget.dataset;
      var ypname = dataset.ypname;
      db.collection('PyFile').where({
        _id: ypname
      })
      .get({
        success: function(res) {
          myaudio.src = res.data[0].file
        }
      })
      //播放音频
      myaudio.play();
      console.log(myaudio.duration);
     this.setData({ isplay: true });
    
    },
    // 停止
    stop: function () {
      myaudio.pause();
      this.setData({ isplay: false });
    }

5 回复

你所有的按钮都是用isplay这同一个条件做显示判断，当然会一起变了

可以改成用isplay[item._id]来做循环中每一项的判断条件

每个元素都有自己单独播放状态，您可以把这个当做元素对象的一个属性，那么你wx:for的时候就可以用{{item.isPlay}}来控制播放按钮。

通过data-index点击动作可以拿到这个下标index去单独setData您的数组。

另外，可以不需要写两个按钮，本质上只是素材换了，您可以src=’{{isPlay?“styleA”:“styleB”}}’

可以根据下标去判断具体点击的是哪一个

wxml
  // item.isPlay
  bindtap="play" data-index="{{index}}" data-id="{{item.id}}"

js

play(e){
  let t = this.data,index = e.currentTarget.dataset.index
  // 循环列表里面的isPlay默认为false,点击的时候改变对应的isPlay为true
  t.list[index].isPlay=!t.list[index].isPlay
  this.setData({
     list:t.list
  })
}

获取点击按钮的下标，根据下标改变对应数组中的判断条件。

1.单个按钮不需要用vx-if,根据状态切换图片就好

2.状态扩展不要用一个flag，用数组

回到顶部