小程序点击显示隐藏(点击标题,内容显示,再次点击隐藏,同时切换箭头的状态,且默认第一组的内容显示)

哈喽,大家下午好,时间过的真快,转眼啊又好长时间没写博客啦,嘿嘿最近公司比较忙,手上一直有项目需要处理,现在终于空闲了一点,赶快来一篇呀,嘿嘿~
最近我一直在做小程序的项目,其中值得一提的是项目中有一个显示隐藏的效果,听起来是很简单吧,好哒,那就是很简单吧,下面我们一起来看一下。
要实现的效果是:点击标题内容显示,再次点击隐藏,同时切换箭头的状态,且默认第一组的内容显示。
好的,那我先给大家看一下我的模板结构,和我写的假数据:

模板结构:
这里写图片描述
假数据数组:
这里写图片描述

现在我们来说一下,具体点击实现的思路:

1、细心的小伙伴呢,肯定已经注意到我的模板里面有一个点击事件,然后大家都知道小程序点击传参是以data-XXX的方式传的,所以在这里我传的是循环数据的下标值,以便于在点击的时候区分我们操作的到底是哪一个;
2、点击之后,我们可以在事件的形参中获取到我们传递过来的参数,下图我已经标注出来了哦;
3、然后需要注意的就是我们控制内容显示隐藏的字段我也已经写在数组里了;
4、之后就可以进行操作了,当点击的时候箭头图片是灰箭头并且hiddena字段为true的时候,也就是说隐藏的时候显示,另一种情况取反即可。

现在附上脚本代码:
这里写图片描述

上效果图啊:
这里写图片描述

评论 13
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值