热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

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

类似语音,因为都在一个数据内,所以点击第一个,所有的语音都变化,解决方法就是把整个数据都获取下来,然后更改其中一个需要更改的值,然后再把整个数据都setdata回去,如果需要动画的

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

 

 

        

           

           

             

           

           

           

             

           

         

       

     

  

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

      if (list[i].mainvediolist.length > 0) {

        var vlist = list[i].mainvediolist;

        for (var j = 0; 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

})

}

 


推荐阅读
  • 在1995年,Simon Plouffe 发现了一种特殊的求和方法来表示某些常数。两年后,Bailey 和 Borwein 在他们的论文中发表了这一发现,这种方法被命名为 Bailey-Borwein-Plouffe (BBP) 公式。该问题要求计算圆周率 π 的第 n 个十六进制数字。 ... [详细]
  • 网络流24题——试题库问题
    题目描述:假设一个试题库中有n道试题。每道试题都标明了所属类别。同一道题可能有多个类别属性。现要从题库中抽取m道题组成试卷。并要求试卷包含指定类型的试题。试设计一个满足要求的组卷算 ... [详细]
  • 二维码的实现与应用
    本文介绍了二维码的基本概念、分类及其优缺点,并详细描述了如何使用Java编程语言结合第三方库(如ZXing和qrcode.jar)来实现二维码的生成与解析。 ... [详细]
  • 本文详细介绍了C++中的构造函数,包括其定义、特点以及如何通过构造函数进行对象的初始化。此外,还探讨了转换构造函数的概念及其在不同情境下的应用,以及如何避免不必要的隐式类型转换。 ... [详细]
  • 3DSMAX制作超现实的体育馆模型
    这篇教程是向脚本之家的朋友介绍3DSMAX制作超现实的体育馆模型方法,教程制作出来的体育馆模型非常地不错,不过教程有点难度,需要有一定基础的朋友学习,推荐到脚本之家,喜欢的朋友可 ... [详细]
  • 默认情况下,Git 使用 Nano 编辑器进行提交信息的编辑,但如果您更喜欢使用 Vim,可以通过简单的配置更改来实现这一变化。本文将指导您如何通过修改全局配置文件来设置 Vim 作为默认的 Git 提交编辑器。 ... [详细]
  • 本文探讨了程序员这一职业的本质,认为他们是专注于问题解决的专业人士。文章深入分析了他们的日常工作状态、个人品质以及面对挑战时的态度,强调了编程不仅是一项技术活动,更是个人成长和精神修炼的过程。 ... [详细]
  • 在日常生活中,支付宝已成为不可或缺的支付工具之一。本文将详细介绍如何通过支付宝实现免费提现,帮助用户更好地管理个人财务,避免不必要的手续费支出。 ... [详细]
  • 本文详细介绍了iOS应用的生命周期,包括各个状态及其转换过程中的关键方法调用。 ... [详细]
  • 深入解析Unity3D游戏开发中的音频播放技术
    在游戏开发中,音频播放是提升玩家沉浸感的关键因素之一。本文将探讨如何在Unity3D中高效地管理和播放不同类型的游戏音频,包括背景音乐和效果音效,并介绍实现这些功能的具体步骤。 ... [详细]
  • 本文回顾了作者在求职阿里和腾讯实习生过程中,从最初的迷茫到最后成功获得Offer的心路历程。文中不仅分享了个人的面试经历,还提供了宝贵的面试准备建议和技巧。 ... [详细]
  • 本文探讨了一种常见的C++面试题目——实现自己的String类。通过此过程,不仅能够检验开发者对C++基础知识的掌握程度,还能加深对其高级特性的理解。文章详细介绍了如何实现基本的功能,如构造函数、析构函数、拷贝构造函数及赋值运算符重载等。 ... [详细]
  • 随着Linux操作系统的广泛使用,确保用户账户及系统安全变得尤为重要。用户密码的复杂性直接关系到系统的整体安全性。本文将详细介绍如何在CentOS服务器上自定义密码规则,以增强系统的安全性。 ... [详细]
  • 在项目冲刺的最后一天,团队专注于软件用户界面的细节优化,包括调整控件布局和字体设置,以确保界面的简洁性和用户友好性。 ... [详细]
  • JavaScript 页面卸载事件详解 (onunload)
    当用户从页面离开时(如关闭页面或刷新页面),会触发 onunload 事件,此时可以执行预设的脚本。需要注意的是,不同的浏览器对 onunload 事件的支持程度可能有所不同。 ... [详细]
author-avatar
黎芝君1_530
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有