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

已于 2022-12-08 17:53:24 修改
阅读量2.5k 收藏 22
点赞数 3
文章标签： 微信小程序 前端 小程序
于 2022-11-24 17:22:06 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_63281943/article/details/128022627
版权

效果图

sass/lsee 转换css 网站 SASS 转 CSS 工具，在线 SASS/SCSS 编译工具 - 在线工具-wetools.com微工具

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>

js

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 a
        icon2: '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 a
        icon2: '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 a
        icon2: '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 a
        icon2: '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 a
        icon2: '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 a
        icon2: '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 a
        icon2: '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].t
    this.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;
        }
      }
    }
  }
}

可爱帅气的小舒
关注
  • 3
    点赞
  • 踩
  • 22
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
微信小程序 - 实现文本展开与收起功能组件（初始时隐藏文字内容，当点击查看更多时展开）点击隐藏和点击显示 / 折叠与展开 / 大段文本内容过多，实现折叠与展开效果 ，超详细代码注释文章教程源码插件
王佳斌
10-25 5371
小程序怎么实现查看更多的显示和隐藏，微信小程序怎么弄文字点击展开收缩，点击内容展开隐藏评论文章等，文本展开、收起功能，列表实现文字内容超出隐藏并显示全文，点击展开收起（点谁谁展开/收起），微信小程序文本查看更多和收起，小程序点击显示隐藏（点击标题，内容显示，再次点击隐藏，同时切换箭头的状态，且默认第一组的内容显示），一定高度文字的展开与收起，默认展示几个行的文字，然后点击可以将未展示文字全部显示，微信小程序实现折叠展开效果，点击展开显示更多,点击收起部分隐藏，最好的文章教程，微信小程序大段文本内容过多，实现
微信小程序实现折叠与展开文章功能
01-03
需求 页面折叠超出的的部分显示省略号，点击展开后显示全部内容 需要解决的问题 箭头随展开折叠后箭头方向的变化 当点击箭头文本显示内容的变化 如何解决？ 箭头方向的变化是一个点击事件bindtap,点击后更换小图标； 文本变化是一个show或者hide的事情，折叠的时候有个多行文本溢出得问题五个属性（display: -webkit-box，-webkit-box-orient: vertical， -webkit-line-clamp，text-overflow，overflow） 状态与数据绑定控制样式 具体实现 wxml <view class=compa
微信小程序----折叠面板（MUI折叠面板）
热门推荐
止于至善
12-25 2万+
DEMO下载 实现原理 通过控制详情部分的显示隐藏，来实现折叠效果，同时切换右侧向下箭头。 效果图 WXML view class=&amp;quot;tui-accordion-content&amp;quot;&amp;gt; view class=&amp;quot;tui-menu-list {{isShowFrom1 ? 'tui-shangjiantou' : 'tui-xiaji
微信小程序实现多折叠展开酷炫菜单
03-29
在另一篇文章《2018年设计趋势指南》中发现一款菜单不错，就想着用微信小程序实现 先把成果摆上来   (此图片来源于网络，如有侵权，请联系删除! ) 开始正题 上方Nav 基本 flex 布局再加个 padding 不需要多讲吧? 提一下，微信小程序里input的placeholder样式是写在 placeholder-style 里或使用 placeholder-class 下方菜单 每个小卡片遵从 flex 布局，设置 width: 50% ，别忘了 flex-wrap: wrap 每个小卡片内部同为 flex 布局并设置垂直居中，想了想还是科普下: .main-view-item{
微信小程序自定义组件重渲染
最新发布
wskgxz的博客
12-30 1591
微信小程序自定义组件重渲染，一些可能方法的分析，以及相对合适的解决方案。
小程序实现树形菜单以及折叠效果
Jester的博客
06-13 8319
实现原理：利用自定义组件递归使用，也就是自定义组件自引用 因为树状图的数据是从后台获取的，没有办法知道具体层级，但是他们的结构都是相同的，所以在自定义的组件中再去引用自身来实现需求 1.先写好树形菜单的样式结构，可以自定义假数据，将静态写好 2.自定义components，将写好的样式结构丢进去，子元素重复的结构就不需要了 3.父组件传递数据，自定义组件进行操作 可以去官网看看组件使用：...
常用flex元素（可直接作为公用文件引入）
leng0920的博客
06-21 489
/* 文字居中，左右显示 */ .text-align-center{ text-align: center; } .text-align-left{ text-align: left; } .text-align-right{ text-align: right; } /* 文字省略号显示 -webkit-line-clamp: 2;写在响应容器控制显示的行数*/ .text-overflow-num{ display: -webkit-box; overflo.
微信小程序实现折叠面板
12-29
本文实例为大家分享了微信小程序MUI折叠面板的具体代码，供大家参考，具体内容如下 实现原理 通过控制详情部分的显示隐藏，来实现折叠效果，同时切换右侧向下箭头。 效果图 WXML <!--pages/accordion/accordion...
微信小程序：text文本的展开与收起
03-29
间隔了几个月，又被拉来做小程序了~~~  页面中有一段说明文字，要求默认收起，只展示3行；点击按钮可以查看完整内容。看了下微信文档，没发现有控件满足要求，于是决定通过js实现  (此图片来源于网络，如有侵权，...
微信小程序实现折叠展开效果
10-18
在微信小程序中，实现折叠展开效果是常见的交互设计，它能有效地节省屏幕空间，提高用户体验。这个效果通常用于展示层级关系的数据或者隐藏某些不常用但必要的信息。在给出的示例中，我们可以看到一个简单的分类列表...
小程序实现列表展开收起效果
10-15
主要为大家详细介绍了小程序实现列表展开收起效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
微信小程序文本展示固定行数 展开和收起
06-30
微信小程序文本展示固定行数 点击展开显示全部 点击收起显示固定行数
微信小程序view的折叠与展开
m0_62592623的博客
11-24 2210
首先我们先创建一个view，它需要包裹两个子view：一个为我们触发事件并可视的view ，另一个为隐藏的view。当我们点击可视的view，则会在下面弹出隐藏的view。如果想要添加多个隐藏的view，只需要更改可视view中的data-index的值，还有隐藏view的showIndex的值。，当用户点击该组件的时候会在该页面对应的 Page 中找到相应的事件处理函数。在做隐藏view之前，我们可以先来了解一下微信小程序视图层的事件。我们可以在控制台看到showIndex的值的变化。
折叠面板组件的设计与实现
m0_63247283的博客
06-23 1519
NutUI，大家应该不陌生吧 [鬼脸]，前端开发的同学肯定是有些了解的。NutUI 是一个京东风格的移动端组件库，使用 Vue 语言来编写可以在 H5，小程序平台上的应用。目前 NutUI 拥有 70+ 组件，支持按需引用，支持 TypeScript，支持定制主题等功能，当然也支持最新的 Vue3 语法，在开发上能有效帮助研发人员提升效率，改善开发体验。言归正传，今天我们一起了解 NutUI 中折叠面板 Collapse 的实现与设计，以及在开发过程中学习到的新知识点。...
小程序多行文本折叠&展开
qq_23470315的博客
10-16 1547
小程序多行文本折叠&展开1 通过样式控制显示的行数2 通过代码逻辑控制显示的字数 1 通过样式控制显示的行数 js代码： data: { news: "据国家卫生健康委发布，2月20日0—24时，31个省（自治区、直辖市）和新疆生产建设兵团报告新增确诊病例889例，新增死亡病例118例（湖北115例，浙江、重庆、云南各1例），新增疑似病例1614例。", foldStat: true, }, fold: function() { var that = this;
微信小程序--添加新属性，动态展开收起查看详情
Che_rish的博客
12-22 1万+
微信小程序--添加新属性，动态展开收起查看详情
微信小程序——抽屉（左侧菜单）
wy313622821的博客
07-14 2942
效果图： 封装好的左侧抽屉组件，需要的同学可以到这里拿： https://download.csdn.net/download/wy313622821/20278190

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值