zoukankan      html  css  js  c++  java
  • 微信小程序循环中点击一个元素,其他的元素不发生变化,类似点击一个循环中的语音,其他的不发生点击事件

    类似语音,因为都在一个数据内,所以点击第一个,所有的语音都变化,解决方法就是 把整个数据都获取下来,然后更改其中一个需要更改的值,然后再把整个数据都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

    })

    }

  • 相关阅读:
    [kuangbin带你飞]专题十六 KMP & 扩展KMP & ManacherK
    [kuangbin带你飞]专题十六 KMP & 扩展KMP & Manacher J
    [kuangbin带你飞]专题十六 KMP & 扩展KMP & Manacher I
    pat 1065 A+B and C (64bit)(20 分)(大数, Java)
    pat 1069 The Black Hole of Numbers(20 分)
    pat 1077 Kuchiguse(20 分) (字典树)
    pat 1084 Broken Keyboard(20 分)
    pat 1092 To Buy or Not to Buy(20 分)
    pat 1046 Shortest Distance(20 分) (线段树)
    pat 1042 Shuffling Machine(20 分)
  • 原文地址:https://www.cnblogs.com/randy619/p/11687830.html
Copyright © 2011-2022 走看看