類似語音,因為都在一個數據內,所以點擊第一個,所有的語音都變化,解決方法就是 把整個數據都獲取下來,然后更改其中一個需要更改的值,然后再把整個數據都setdata回去,如果需要動畫的話,wxml里面放兩個組件,一個默認,點擊時候隱藏,把另一個顯示出來。
例如點擊第一個語音,想要播放http://voluntarybanktestapi.wxstar.cn/ResourceTemp…dio/20191011/16bc997be2114b95800ce85d3fb029bb.mp3,
數據
questionlist =
[
{
userid: "cf5a7015-3e79-44e1-8026-cfb6366c7233",
mainvediolist:
[
{isplay: false, idx: 0, vediosrc: "http://voluntarybanktestapi.wxstar.cn/ResourceTemp…dio/20191011/16bc997be2114b95800ce85d3fb029bb.mp3"},
{isplay: false, idx: 1, vediosrc: "http://voluntarybanktestapi.wxstar.cn/ResourceTemp…dio/20191011/16bc997be2114b95800ce85d3fb029bb.mp3"}
],
questiontype: 2,
memberid: "HY190928000014",
status: 90
},
{
userid: "cf5a7015-3e79-44e1-8026-cfb6366c7233",
mainvediolist:
[
{isplay: false, idx: 0, vediosrc: "http://voluntarybanktestapi.wxstar.cn/ResourceTemp…dio/20191011/16bc997be2114b95800ce85d3fb0292b.mp3"},
{isplay: false, idx: 1, vediosrc: "http://voluntarybanktestapi.wxstar.cn/ResourceTemp…dio/20191011/16bc997be2114b95800ce85d3fb023bb.mp3"}
],
questiontype: 2,
memberid: "HY190928000014",
status: 90
}
]
Wxml:
<view wx:for="{{questionlist}}" wx:for-index="bindex">
<view class='answer ask' wx:for="{{item.mainvediolist}}" wx:for-item="it" wx:for-index="tindex">
<view class="content_word">
<!-- 默認狀態 -->
<view class="yuyin" data-index="{{bindex}}" data-idx="{{tindex}}" wx:if="{{it.isplay==false}}" bindtap="vedioplay" data-vediosrc='{{it.vediosrc}}'>
<image src='./../../../centent/img/yuyinshuru.png' class="yuyin_img"></image>
</view>
<!-- 當前正在播放狀態 -->
<view class="yuyin" wx:if="{{it.isplay==true}}" bindtap="vediostop" data-vediosrc='{{it.vediosrc}}'>
<image src='./../../../centent/img/bofang.gif' class="yuyin_img"></image>
</view>
</view>
</view>
</view>
</view>
Js
//播放錄音
vedioplay: function(e) {
let that = this;
var src = e.currentTarget.dataset.vediosrc;//錄音路徑(從數據庫中獲取)
var idx = e.currentTarget.dataset.idx;//當前是第幾個錄音
var index = e.currentTarget.dataset.index;//當前是第幾個數據
var list = that.data.questionlist;//獲取全部數據
//先把所有數據都置為初始狀態
for (var i = 0; i < list.length; i++) {
if (list[i].mainvediolist.length > 0) {
var vlist = list[i].mainvediolist;
for (var j = 0; j < vlist.length; j++) {
if (vlist[j].isplay == true) {
vlist[j].isplay = false;
}
}
}
}
//在數組中找到該數據,然后設置需要的屬性
var indexlist = list[index].mainvediolist;
if (indexlist.length > 0) {
indexlist[idx].isplay = true;
}
//更新整個數組數據
that.setData({
questionlist: list
})
}