微信小程序循环中点击一个元素,其他的元素不发生变化,类似点击一个循环中的语音,其他的不发生点击事件
类似语音,因为都在一个数据内,所以点击第一个,所有的语音都变化,解决方法就是 把整个数据都获取下来,然后更改其中一个需要更改的值,然后再把整个数据都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
})
}
微信小程序循环中点击一个元素,其他的元素不发生变化,类似点击一个循环中的语音,其他的不发生点击事件的更多相关文章
- 微信小程序swiper高度自适应,swiper的子元素高度不固定
小程序 swiper 组件默认高度150px,并且如果子元素过高,swiper不会自适应高度 解决方案一: (总体来说不够完美,适合满屏滑动) 如果不是满屏的状态,用scroll-view IOS滑动 ...
- 微信小程序textarea层级过高(盖住其他元素)
根据官方文档,textarea 是原生组件 (https://developers.weixin.qq.com/miniprogram/dev/component/textarea.html),所谓原 ...
- 撸了一个微信小程序项目
学会一项开发技能最快的步骤就是:准备,开火,瞄准.最慢的就是:准备,瞄准,瞄准,瞄准-- 因为微信小程序比较简单,直接开撸就行,千万别瞄准. 于是乎,趁着今天上午空气质量不错,撸了一个小程序,放在了男 ...
- 盒马微信小程序
盒马app刚出现,就吸足了眼球.最近看了看盒马界面,很Q,就想着仿照app写个小程序. 功能介绍 好奇微信小程序是如何制作的,也对盒马app感兴趣,就尝试写了这个盒马小程序.实现了app的部分功能,还 ...
- 神技!微信小程序(应用号)抢先入门教程(附最新案例DEMO-豆瓣电影)持续更新
微信小程序 Demo(豆瓣电影) 由于时间的关系,没有办法写一个完整的说明,后续配合一些视频资料,请持续关注 官方文档:https://mp.weixin.qq.com/debug/wxadoc/de ...
- 微信小程序全面实战,架构设计 && 躲坑攻略(小程序入门捷径教程)
最近集中开发了两款微信小程序,分别是好奇心日历(每天一条辞典+一个小投票)和好奇心日报(轻量版),直接上图: Paste_Image.png 本文将结合具体的实战经验,主要介绍微信小程序的基础知识.开 ...
- 【腾讯优测干货分享】微信小程序之自动化亲密接触
本文来自于腾讯优测公众号(wxutest),未经作者同意,请勿转载,原文地址:http://mp.weixin.qq.com/s/HcPakz5CV1SHnu-U8n85pw 导语 山雨欲来风满楼,最 ...
- 玩转微信小程序
原文链接 2007 年 1 月 9 号,苹果一代在功能机盛行的年代中出世. 2017 年 1 月 9 号,微信小程序在重型app风靡的压力下上线. 苹果的出世掀起了互联网一波又一波的浪潮,而微信小程序 ...
- 微信小程序如何像vue一样在动态绑定类名
微信小程序如何像vue一样在动态绑定类名 更新时间:2018年04月17日 14:08:44 这篇文章主要介绍了微信小程序如何像vue一样在动态绑定类名,文中给大家提到了vue与微信小程序的区别, ...
- 学习微信小程序及知识占及v-if与v-show差别
注意点: 一.接口调用方式: getOpenid: function () { var that = this; return new Promise(function (resolve, rejec ...
随机推荐
- Python 爬取 热词并进行分类数据分析-[简单准备] (2020年寒假小目标05)
日期:2020.01.27 博客期:135 星期一 [本博客的代码如若要使用,请在下方评论区留言,之后再用(就是跟我说一声)] 所有相关跳转: a.[简单准备](本期博客) b.[云图制作+数据导入] ...
- kali apt update 错误——下列签名无效: EXPKEYSIG ED444FF07D8D0BF6 Kali Linux Repository
这是因为key过期了 wget -q -O - https://archive.kali.org/archive-key.asc | apt-key add apt update
- Spring学习(一)
搭建环境 1.创建普通的Java工程 2.添加相应的jar包,下载链接:https://files.cnblogs.com/files/AmyZheng/lib.rar,此外,为了打印信息,我们还需要 ...
- Servlet 学习(六)
会话 1.定义 一般意义会话:指两人以上的对话(多用于学习别种语言或方言时) 计算机中的会话:客户端和服务器的通讯 web客户端 A ------>Tomcat web客户端 B ------& ...
- LinkedHashMap的用法
1:LinkedHashMap的简介 Map 接口的哈希表和链接列表实现,具有可预知的迭代顺序.此实现与 HashMap 的不同之处在于,后者维护着一个运行于所有条目的双重链接列表.此链接列表定义了迭 ...
- Jquery 获取控件的值
1:通过控件的ID 获取值 $("input[name='weiKuanDate']").val(); 2:通过控件的name 获取值 $("input[name='we ...
- springboot#下载文件
膜拜大神 这就是我要的滑板鞋! @RequestMapping(value = "/media", method = RequestMethod.GET) public Respo ...
- vue动画钩子
<template> <div class="hello"> <div class="toggle" @click="f ...
- Py西游攻关之基础数据类型(三)-元组
Py西游攻关之基础数据类型 - Yuan先生 https://www.cnblogs.com/yuanchenqi/articles/5782764.html 六 tuple(元组) 元组被称为只读列 ...
- 攻防世界web进阶区(2)--记一次sql注入
题目地址:http://111.198.29.45:56094 这是一道sql注入题. 试试1' order by 3#,发现页面显示正常,将3换为4时,页面报错,则说明含有3个字段. 接下来判断输出 ...