마찬가지로 음성 데이터 내의 모든 상기 제 클릭 때문에, 음성의 모든 변경은, 용액이 아래 전체 데이터 획득을 넣고, 다시 한 변경해야 값하고 전체 데이터 사항 setData을 변경하고, 당신이 애니메이션이 필요한 경우, 다음, wxml 두 가지 구성 요소, 기본, 또 다른 쇼를 넣어 숨길 수있는 시간을 클릭 넣고있다.
예를 들어, 당신이 재생하려는 첫 번째 음성을 클릭 http://voluntarybanktestapi.wxstar.cn/ResourceTemp...dio/20191011/16bc997be2114b95800ce85d3fb029bb.mp3을 ,
데이터
questionlist =
[
{
사용자 ID : "cf5a7015-3e79-44e1-8026-cfb6366c7233"
mainvediolist :
[
{isplay : 거짓, IDX : 0, vediosrc "http://voluntarybanktestapi.wxstar.cn/ResourceTemp...dio/20191011/16bc997be2114b95800ce85d3fb029bb.mp3"},
{isplay : 거짓, IDX : 1, vediosrc "http://voluntarybanktestapi.wxstar.cn/ResourceTemp...dio/20191011/16bc997be2114b95800ce85d3fb029bb.mp3"}
],
questiontype : 2,
MEMBERID : "HY190928000014"
상태 : 90
},
{
사용자 ID : "cf5a7015-3e79-44e1-8026-cfb6366c7233"
mainvediolist :
[
{isplay : 거짓, IDX : 0, vediosrc "http://voluntarybanktestapi.wxstar.cn/ResourceTemp...dio/20191011/16bc997be2114b95800ce85d3fb0292b.mp3"},
{isplay : 거짓, IDX : 1, vediosrc "http://voluntarybanktestapi.wxstar.cn/ResourceTemp...dio/20191011/16bc997be2114b95800ce85d3fb023bb.mp3"}
],
questiontype : 2,
MEMBERID : "HY190928000014"
상태 : 90
}
]
Wxml :
<뷰 WX = 대한 "{{}} questionlist"WX : 대한 인덱스 = "bindex">
<대한 항목 = "을"WX : 대한 인덱스 = "tindex": "{{item.mainvediolist}}"WX =보기 클래스 = WX '대답은 물어'>
<뷰 클래스 = "content_word">
<! - 기본 ->
<뷰 클래스 = "yuyin"데이터 인덱스 = "{{}} bindex"데이터 IDX = "{{}} tindex"WX : 만약 = "it.isplay {{}} == 거짓"bindtap = "vedioplay" 데이터 vediosrc = 'it.vediosrc {{}}>
<화상 SRC = '. / ... / ... / ... / centent / IMG / yuyinshuru.png'클래스 = "yuyin_img"> </ 영상>
</보기>
<! - 현재 상태를 재생 ->
<뷰 클래스 = "yuyin는"WX : 만약 = "{{it.isplay == TRUE}}"bindtap = "vediostop"데이터 vediosrc = 'it.vediosrc {{}}>
<화상 SRC = '. / ... / ... / ... / centent / IMG / bofang.gif'클래스 = "yuyin_img"> </ 영상>
</보기>
</보기>
</보기>
</보기>
</보기>
JS
녹음 재생 //
vedioplay : 함수 (E) {
이 =이하자;
(데이터베이스에서 얻은) // 기록 경로; var에 SRC = e.currentTarget.dataset.vediosrc
VAR의 IDX는 = e.currentTarget.dataset.idx // 이는 여러 기록 최초로
VAR 지수 = e.currentTarget.dataset.index; // 이것이 처음 몇 데이터
var에 목록 = that.data.questionlist는, 모든 데이터를 가져옵니다 //
// 모든 데이터는 먼저 초기 상태로 설정
위한 VAR (I = 0; i가 크고 List.length를 <; 내가 ++) {
경우 (리스트 [I] .mainvediolist.length> 0) {
VLIST =리스트 [I] .mainvediolist이었다;
대 (VAR의 J = 0; J <vlist.length, J ++) {
경우 (VLIST [J]에 해당 == .isplay) {
VLIST [J] .isplay = 거짓;
}
}
}
}
// 배열의 데이터를 찾은 다음 필요한 속성을 설정
VAR의 indexlist =리스트 [인덱스] .mainvediolist;
경우 (indexlist.length> 0) {
indexlist [IDX] .isplay = TRUE;
}
데이터의 전체 어레이를 업데이트 //
that.setData ({
questionlist : 목록
})
}