<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 });
}
获取点击按钮的下标,根据下标改变对应数组中的判断条件。
每个元素都有自己单独播放状态,您可以把这个当做元素对象的一个属性,那么你wx:for的时候就可以用{{item.isPlay}}来控制播放按钮。
通过data-index点击动作可以拿到这个下标index去单独setData您的数组。
另外,可以不需要写两个按钮,本质上只是素材换了,您可以src='{{isPlay?"styleA":"styleB"}}'
楼楼解决了吗?我也这样了
1.单个按钮不需要用vx-if,根据状态切换图片就好
2.状态扩展不要用一个flag,用数组
你所有的按钮都是用isplay这同一个条件做显示判断,当然会一起变了
可以改成用isplay[item._id]来做循环中每一项的判断条件
wx:if="{{isplay[item._id]==false}}"
this.setData({
['isplay[' + ypname + ']']: true
})