微信小程序折叠面板（类似手风琴收起展开一样的噢）

效果图

wxml

 <!-- for循环出来的 --><view class="problem2"><view class="problem2-item regular" wx:for="{{questList}}" wx:key="index"><view class="problem2-item-title" bind:tap="changOpen" data-item="{{item}}" data-index="{{index}}"><view><view><image style="width: 32rpx; height: 32rpx;" webp src="{{item.icon1}}" mode="widthFix" /></view><view class="ml-10 b font-14 pr-20">{{item.questions}}</view></view><view><!-- 当前的状态是 true 就是 上箭头 false就是下箭头  当然也可以用本地图片img路径 --><image webp src="{{item.t ? item.icon4:item.icon3   }}" mode="widthFix" /></view></view><!-- 问题区域 --><!-- 选中的下标是否等于 for 循环的下标 --><block wx:if="{{showIndex==index}}"><view class="detailedquestions flex regular  mt-10"><view class="l"><image src="{{item.icon2}}" mode="widthFix" /></view><view class="r ml-10"><view class="pr-20 color-827968 font-14">{{item.answers}}</view></view></view></block></view></view>

data:{// 显示的下标showIndex: false,// 数据源questList: [{questions: '是否需要预约？',answers: "A：答案内答案内容答案内容答案内容答案内容答案内容答案内容容容答案内容容容答案内容容",t: true,// icon q icon1: 'https://image.pet.babily.com.cn/public/signed/wushuyi/Cardiac_ultrasound_examination/q.webp',// icon aicon2: 'https://image.pet.babily.com.cn/public/signed/wushuyi/Cardiac_ultrasound_examination/a.webp',// 下箭头icon3: 'https://image.pet.babily.com.cn/public/signed/wushuyi/Insurance_ui/xia.webp',// 上箭头icon4: 'https://image.pet.babily.com.cn/public/signed/wushuyi/Insurance_ui/shagn.webp',},{questions: '会否出报告？报告是纸质还是电子版的？',answers: "A：答案内答案内容答案内容答案内容答案内容答案内容答案内容容容答案内容容容答案内容容",t: false,// icon q icon1: 'https://image.pet.babily.com.cn/public/signed/wushuyi/Cardiac_ultrasound_examination/q.webp',// icon aicon2: 'https://image.pet.babily.com.cn/public/signed/wushuyi/Cardiac_ultrasound_examination/a.webp',// 下箭头icon3: 'https://image.pet.babily.com.cn/public/signed/wushuyi/Insurance_ui/xia.webp',// 上箭头icon4: 'https://image.pet.babily.com.cn/public/signed/wushuyi/Insurance_ui/shagn.webp',},{questions: '报告是现场给吗？',answers: "A：答案内答案内容答案内容答案内容答案内容答案内容答案内容容容答案内容容容答案内容容",t: false,// icon q icon1: 'https://image.pet.babily.com.cn/public/signed/wushuyi/Cardiac_ultrasound_examination/q.webp',// icon aicon2: 'https://image.pet.babily.com.cn/public/signed/wushuyi/Cardiac_ultrasound_examination/a.webp',// 下箭头icon3: 'https://image.pet.babily.com.cn/public/signed/wushuyi/Insurance_ui/xia.webp',// 上箭头icon4: 'https://image.pet.babily.com.cn/public/signed/wushuyi/Insurance_ui/shagn.webp',},{questions: '我的猫狗需要提前准备什么吗？',answers: "A：答案内答案内容答案内容答案内容答案内容答案内容答案内容容容答案内容容容答案内容容",t: false,// icon q icon1: 'https://image.pet.babily.com.cn/public/signed/wushuyi/Cardiac_ultrasound_examination/q.webp',// icon aicon2: 'https://image.pet.babily.com.cn/public/signed/wushuyi/Cardiac_ultrasound_examination/a.webp',// 下箭头icon3: 'https://image.pet.babily.com.cn/public/signed/wushuyi/Insurance_ui/xia.webp',// 上箭头icon4: 'https://image.pet.babily.com.cn/public/signed/wushuyi/Insurance_ui/shagn.webp',},{questions: '我的猫狗体检的时候，我可以在旁边吗？',answers: "A：答案内答案内容答案内容答案内容答案内容答案内容答案内容容容答案内容容容答案内容容",t: false,// icon q icon1: 'https://image.pet.babily.com.cn/public/signed/wushuyi/Cardiac_ultrasound_examination/q.webp',// icon aicon2: 'https://image.pet.babily.com.cn/public/signed/wushuyi/Cardiac_ultrasound_examination/a.webp',// 下箭头icon3: 'https://image.pet.babily.com.cn/public/signed/wushuyi/Insurance_ui/xia.webp',// 上箭头icon4: 'https://image.pet.babily.com.cn/public/signed/wushuyi/Insurance_ui/shagn.webp',},{questions: '我的猫狗刚刚做过检查，我可以不重复做同样?',answers: "A：答案内答案内容答案内容答案内容答案内容答案内容答案内容容容答案内容容容答案内容容",t: false,// icon q icon1: 'https://image.pet.babily.com.cn/public/signed/wushuyi/Cardiac_ultrasound_examination/q.webp',// icon aicon2: 'https://image.pet.babily.com.cn/public/signed/wushuyi/Cardiac_ultrasound_examination/a.webp',// 下箭头icon3: 'https://image.pet.babily.com.cn/public/signed/wushuyi/Insurance_ui/xia.webp',// 上箭头icon4: 'https://image.pet.babily.com.cn/public/signed/wushuyi/Insurance_ui/shagn.webp',},{questions: '我的猫狗在检查过程中发现有比较严重的问题?',answers: "A：答案内答案内容答案内容答案内容答案内容答案内容答案内容容容答案内容容容答案内容容",t: false,// icon q icon1: 'https://image.pet.babily.com.cn/public/signed/wushuyi/Cardiac_ultrasound_examination/q.webp',// icon aicon2: 'https://image.pet.babily.com.cn/public/signed/wushuyi/Cardiac_ultrasound_examination/a.webp',// 下箭头icon3: 'https://image.pet.babily.com.cn/public/signed/wushuyi/Insurance_ui/xia.webp',// 上箭头icon4: 'https://image.pet.babily.com.cn/public/signed/wushuyi/Insurance_ui/shagn.webp',}],},// 折叠面板 展开收起的方法changOpen(e) {this.data.questList[e.currentTarget.dataset.index].t = !this.data.questList[e.currentTarget.dataset.index].tthis.setData({questList: this.data.questList})if (e.currentTarget.dataset.index != this.data.showIndex) {// console.log('true的时候');this.setData({showIndex: e.currentTarget.dataset.index,})}else {// console.log('false的时候');this.setData({showIndex: 10})}},

wxss

.mt-20 {margin-top: 40rpx;
}.mt-10 {margin-top: 20rpx;
}.ml-10 {margin-left: 20rpx;
}.mb-20 {margin-bottom: 40rpx;
}.ml-10 {margin-left: 20rpx;
}.b {font-weight: bold;
}.font-14 {font-size: 28rpx;
}.pr-20 {padding-right: 40rpx;
}.flex{display: flex;
}.problem2 {min-height: 0rpx;background-color: #fff;margin: 20rpx;margin-top: 40rpx;border-radius: 40rpx;padding: 34rpx;// 每一项.problem2-item {border-bottom: 1px solid #f5f3ed;padding: 30rpx 0;// 标题  .problem2-item-title {display: flex;justify-content: space-between;>view:nth-child(1) {display: flex;>view:nth-child(1) {margin-top: 2rpx;width: 32rpx;border-radius: 50%;image {width: 100%;height: 100%;}}}>view:nth-child(2) {width: 11px;height: 6px;border: 50%;image {width: 100%;height: 100%;}}}// 问题区域.detailedquestions {border-right-color: seagreen;.l {margin-top: 10rpx;width: 32rpx;height: 32rpx;// background-color: pink;image {width: 32rpx;height: 32rpx;}}}}
}

微信小程序折叠面板（类似手风琴收起展开一样的噢）相关推荐

php中控制面板折叠,微信小程序折叠面板的实现方法示例
本文主要为大家详细介绍微信小程序实现折叠面板的相关资料,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能帮助到大家. 实现原理通过控制详情部分的显示隐藏,来实现折叠效果,同时切换右侧向下箭头 ...
微信小程序----折叠面板（MUI折叠面板）
当前效果体验二维码如果文章对你有帮助的话,请打开微信扫一下二维码,点击一下广告,支持一下作者!谢谢! DEMO下载实现原理通过控制详情部分的显示隐藏,来实现折叠效果,同时切换右侧向下箭头. 效果 ...
微信小程序文本查看更多和收起
微信小程序文本查看更多和收起微信小程序中,有时候文本需要实现这样的功能: 1.文本超过n行显示省略号 2.省略时,显示展开/收起按钮 3.文本不超过n行时,不显示省略号和展开/收起按钮实现功能 ...
微信小程序简单实现类似饿了么,美团文字公告告示垂直循环滚动效果
首先先来看下效果图一开始的时候是打算自己用animation自己写出这样的一个动画效果,后面写完了,ui小姐姐看过后觉得十分不满意. 其实自己也觉得不太满意, 效果不太好,可能是自己功夫不到家啊,哈 ...
微信小程序登录面板切换不了账号，显示网络连接失败？
打开开发工具就会显示这个提示,无论我是点击确定还是取消,切换账号都显示网络连接失败~!!!!!! 我看了一些博客,说是选择直连代理.我试了,还是显示网络连接失败,重启电脑,重配置网络服务都试了还是这 ...
微信小程序 - 折叠展开效果
wxml: <view class="page">  <view class="li" bindtap='c ...
微信小程序——订单列表显示全部和收起功能
查遍百度, 没有发现我要的,没办法只能自己写个: 一.首先wxml页面中每个订单要有独立的 [显示全部]和[收起]两个view: 正确的做法: <view class="margin- ...
微信小程序，一个有局限的类似 React Native 轮子
微信小程序就是一个类似RN的轮子,可以快速开发,有一定的适用场景,但是也有其局限性.(结论是基于微信小程序的示例代码做的解读,可能存在谬误. 文末有好奇心日报小程序的二维码,欢迎围观. 2016年11 ...
微信小程序，一个有局限的类似 React Native 轮子！
微信小程序就是一个类似RN的轮子,可以快速开发,有一定的适用场景,但是也有其局限性.(结论是基于微信小程序的示例代码做的解读,可能存在谬误. 文末有好奇心日报小程序的二维码,欢迎围观. 2016年11 ...

微信小程序折叠面板（类似手风琴收起展开一样的噢）

微信小程序折叠面板（类似手风琴收起展开一样的噢）相关推荐

最新文章

热门文章

微信小程序折叠面板 （类似手风琴 收起展开一样的噢）

微信小程序折叠面板 （类似手风琴 收起展开一样的噢）相关推荐

最新文章

热门文章

微信小程序折叠面板（类似手风琴收起展开一样的噢）

微信小程序折叠面板（类似手风琴收起展开一样的噢）相关推荐