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

微信小程序----折叠面板（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">