微信小程序----折叠面板（MUI折叠面板）

最新推荐文章于 2024-07-07 11:23:10 发布

liNewman

最新推荐文章于 2024-07-07 11:23:10 发布

阅读量1.5k

点赞数

本文链接：https://blog.csdn.net/liNewman/article/details/86576717

版权

本文介绍了微信小程序中使用MUI实现折叠面板的详细过程，包括实现原理、效果图、WXML、WXSS和JS代码。通过控制详情部分的显示隐藏及切换箭头实现折叠效果。总结了实现折叠面板的关键点：每个面板需布尔值控制、切换详情显示时更新箭头状态，并展示了优化技巧。

摘要由CSDN通过智能技术生成

微信小程序----折叠面板（MUI折叠面板）

DEMO下载

实现原理

通过控制详情部分的显示隐藏，来实现折叠效果，同时切换右侧向下箭头。

效果图

折叠面板效果图

WXML

<!--pages/accordion/accordion.wxml-->
<view class="tui-accordion-content">
  <view class="tui-menu-list {
      {
      isShowFrom1 ? 'tui-shangjiantou' : 'tui-xiajiantou'}}">
    <view bindtap="showFrom" data-param="1"><text>表单</text></view>
    <view class="tui-accordion-from {
      {
      isShowFrom1 ? '' : 'tui-hide'}}">
      <view class="tui-menu-list tui-clear">
        <text class="tui-input-name">input</text>
        <input placeholder="普通输入框"></input>
      </view> 
      <view class="tui-menu-list tui-clear">
        <text class="tui-input-name">input</text>
        <input placeholder="普通输入框"></input>
      </view> 
      <view class="tui-menu-list tui-clear">
        <text class="tui-input-name">