微信小程序折叠面板的实现方法示例

发布日期： 2018-02-02 阅读量： 作者： 网络

本文主要为大家详细介绍微信小程序实现折叠面板的相关资料，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能帮助到大家。

实现原理

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

效果图

折叠面板效果图

WXML

<!--pages/accordion/accordion.wxml-->
<view>
 <view>
  <view><text>表单</text></view>
  <view>
   <view>
    <text>input</text>
    <input>
   </view> 
   <view>
    <text>input</text>
    <input>
   </view> 
   <view>
    <text>input</text>
    <input>
   </view> 
   <view>
    <button>确定</button>
    <button>取消</button>
   </view>
  </view>
 </view>
 <view>
  <view><text>轮播图片</text></view>
  <view>
   <swiper>
    <block>
     <swiper-item>
      <block>
       <image></image>
      </block>
      <block>
       <image></image>
      </block>
     </swiper-item>
    </block>
   </swiper>
  </view>
 </view>
 <view>
  <view><text>文字排版</text></view>
  <view>
   <view><text>H1 标签内文字大小及加粗样式</text></view>
   <view><text>H2 标签内文字大小及加粗样式</text></view>
   <view><text>H3 标签内文字大小及加粗样式</text></view>
   <view><text>H4 标签内文字大小及加粗样式</text></view>
   <view><text>H5 标签内文字大小及加粗样式</text></view>
   <view><text>H6 标签内文字大小及加粗样式</text></view>
   <view><text>P 标签内文字大小及加粗样式</text></view>
  </view>
 </view></view>

# 小程序 # 方法 # 实现

上一篇: dedecms要注意什么

下一篇: dedecms怎么增加字段

微信小程序折叠面板的实现方法示例

随便看看