微信小程序循環中點擊一個元素,其他的元素不發生變化,類似點擊一個循環中的語音,其他的不發生點擊事件


類似語音,因為都在一個數據內,所以點擊第一個,所有的語音都變化,解決方法就是 把整個數據都獲取下來,然后更改其中一個需要更改的值,然后再把整個數據都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

})

}

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM