微信小程序循环中点击一个元素,其他的元素不发生变化,类似点击一个循环中的语音,其他的不发生点击事件

摘要:
数据问题列表=[{userid:for=“{{questionlist}}”wx:for=“{item.mainvediolist}}”wx:for item=“it”wx:viewclass=“content_word”>viewdata index=“{{bindex}}”wx;

类似语音,因为都在一个数据内,所以点击第一个,所有的语音都变化,解决方法就是 把整个数据都获取下来,然后更改其中一个需要更改的值,然后再把整个数据都setdata回去,如果需要动画的话,wxml里面放两个组件,一个默认,点击时候隐藏,把另一个显示出来。

 微信小程序循环中点击一个元素,其他的元素不发生变化,类似点击一个循环中的语音,其他的不发生点击事件第1张

例如点击第一个语音,想要播放http://voluntarybanktestapi.wxstar.cn/ResourceTemp…dio/20191011/16bc997be2114b95800ce85d3fb029bb.mp3

 微信小程序循环中点击一个元素,其他的元素不发生变化,类似点击一个循环中的语音,其他的不发生点击事件第2张

数据

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 wx:for="{{item.mainvediolist}}" wx:for-item="it" wx:for-index="tindex">

         <view class="content_word">

            <!-- 默认状态 -->

            <view data-index="{{bindex}}" data-idx="{{tindex}}" wx:if="{{it.isplay==false}}" bindtap="vedioplay" data-vediosrc='{{it.vediosrc}}'>

              <image src='http://t.zoukankan.com/centent/img/yuyinshuru.png' class="yuyin_img"></image>

            </view>

            <!-- 当前正在播放状态 -->

            <view wx:if="{{it.isplay==true}}" bindtap="vediostop" data-vediosrc='{{it.vediosrc}}'>

              <image src='http://t.zoukankan.com/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

})

}

免责声明:文章转载自《微信小程序循环中点击一个元素,其他的元素不发生变化,类似点击一个循环中的语音,其他的不发生点击事件》仅用于学习参考。如对内容有疑问,请及时联系本站处理。

上篇SAP实施方法与过程——ASAP全库修改SQL Server现有排序规则下篇

宿迁高防,2C2G15M,22元/月;香港BGP,2C5G5M,25元/月 雨云优惠码:MjYwNzM=

相关文章

PHP mysqli获取数据表以及表结构

<?php$mysqli = new mysqli('localhost','root','','le');$result = $mysqli->query('SHOW TABLES');//执行查询语句//输出此数据库中表结构$tables = array();while($arr = $result->fetch_assoc()){...

javascript语法--for in、for of和forEach

首先看简单for循环效果,功能最基本,但可以实现所有循环功能 for (let i = 0; i < list.length; i++) { } 接下来看for in、for of和forEach的常见用法 主要是侧重点不同 一、for in 重点打印key-value对 模板: for (const key in object) {...

MATLAB文件操作及读txt文件(fopen,fseek,fread,fclose)

文件操作是一种重要的输入输出方式,即从数据文件读取数据或将结果写入数据文件。MATLAB提供了一系列低层输入输出函数,专门用于文件操作。1、文件的打开与关闭1)打开文件在读写文件之前,必须先用fopen函数打开或创建文件,并指定对该文件进行的操作方式。fopen函数的调用格式为:fid=fopen(文件名,‘打开方式’)说明:其中fid用于存储文件句柄值,...

处理 EF 并发其实就这么简单

    最近项目有点闲,终于可以了解点自己想了解的了,以前听同事讲面试的经历总会被问到“如何处理高并发大数据” 乍一听感觉这东西好像很有学问的样子,于是并发这个词在脑海里留深刻印像,而且在自己心中的技术地位也提高很多,也导致了解并发相关的知识时,也带着思想负担,总以为很难懂,程序员或许都是这样,在自己不懂的技术领域,别人说一个很简单的技术,给他的感觉都是很...

微软SQL Server2012增加对Hadoop的支持

今天去听了微软的SQL Server2012发布预览会,听说到Hadoop的支持。在海量数据时代的大趋势下,微软增加了SQL Server大规模数据处理和并行数据仓库平台对开源Hadoop框架的支持。 大数据的泡沫在毫无止境的膨胀,它给IT企业带来了颠覆性的改革。 Hortonworks的CEO Eric Baldeschwieler表示,目前企业中80%...

C#中的Session

一: 网站开发中,为了保存用户信息我们就会用到session。 Session具有以下特点:(1)Session中的数据保存在服务器端;(2)Session中可以保存任意类型的数据;(2)Session默认的生命周期是20分钟,可以手动设置更长或更短的时间。 我们在aspx页面中的调用一般只需要这么写:<%=session["key"]=value...