微信小程序实现折叠面板


Posted in Javascript onJanuary 31, 2018

本文实例为大家分享了微信小程序MUI折叠面板的具体代码,供大家参考,具体内容如下

实现原理

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

效果图

微信小程序实现折叠面板

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">input</text>
    <input placeholder="普通输入框"></input>
   </view> 
   <view class="tui-menu-list tui-clear" style="text-align:center;padding-top:20rpx;">
    <button size="mini" type="primary">确定</button>
    <button size="mini" style="margin-left:10rpx;">取消</button>
   </view>
  </view>
 </view>
 <view class="tui-menu-list {{isShowFrom2 ? 'tui-shangjiantou' : 'tui-xiajiantou'}}">
  <view bindtap="showFrom" data-param="2"><text>轮播图片</text></view>
  <view class="{{isShowFrom2 ? '' : 'tui-hide'}}">
   <swiper class="tui-swiper" indicator-dots="{{indicatorDots}}" vertical="{{vertical}}"
      autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}"
      indicator-color="#fff" indicator-active-color="red">
    <block wx:for-items="{{banner_url}}">
     <swiper-item>
      <block wx:if="{{item}}">
       <image class="tui-img" src="{{item}}" mode="aspectFill"/>
      </block>
      <block wx:else>
       <image src="../../images/default_pic.png" mode="aspectFill"></image>
      </block>
     </swiper-item>
    </block>
   </swiper>
  </view>
 </view>
 <view class="tui-menu-list {{isShowFrom3 ? 'tui-shangjiantou' : 'tui-xiajiantou'}}">
  <view bindtap="showFrom" data-param="3"><text>文字排版</text></view>
  <view class="{{isShowFrom3 ? '' : 'tui-hide'}}">
   <view class="tui-h1"><text>H1 标签内文字大小及加粗样式</text></view>
   <view class="tui-h2"><text>H2 标签内文字大小及加粗样式</text></view>
   <view class="tui-h3"><text>H3 标签内文字大小及加粗样式</text></view>
   <view class="tui-h4"><text>H4 标签内文字大小及加粗样式</text></view>
   <view class="tui-h5"><text>H5 标签内文字大小及加粗样式</text></view>
   <view class="tui-h6"><text>H6 标签内文字大小及加粗样式</text></view>
   <view class="tui-p"><text>P 标签内文字大小及加粗样式</text></view>
  </view>
 </view>
</view>

WXSS

/* pages/accordion/accordion.wxss */
.tui-accordion-content{
 margin: 10px;
 border: 1px solid #c8c7cc;
 border-radius: 5px;
 overflow: hidden;
}
.tui-accordion-from{padding-left: 0;}
.tui-accordion-from input{
 height: 80rpx;
 line-height: 80rpx;
}

.tui-input-name{
 height: 80rpx;
 float: left;
 width: 200rpx;
}

JS

var banner = require("../../src/js/banner.js");

Page({
 data: {
  isShowFrom1: false,
  isShowFrom2: false,
  isShowFrom3: false,
  indicatorDots: true,
  vertical: false,
  autoplay: true,
  interval: 3000,
  duration: 800,
  banner_url: banner.bannerList
 },
 onLoad: function (options) {

 },
 showFrom(e){
  var param = e.target.dataset.param; 
  this.setData({ 
   isShowFrom1: param == 1 ? (this.data.isShowFrom1 ? false : true) : false,
   isShowFrom2: param == 2 ? (this.data.isShowFrom2 ? false : true) : false,
   isShowFrom3: param == 3 ? (this.data.isShowFrom3 ? false : true) : false
  });
 }
})

总结:

1 每一个折叠面板需要一个布尔值变量来控制;
2 在控制详情隐藏和显示时,要将右侧的箭头对应切换;
3 showFrom函数对每一个布尔值变量的修改三目表达式的优化。

DEMO下载

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
纯Javascript实现Windows 8 Metro风格实现
Oct 15 Javascript
JavaScript实现表格点击排序的方法
May 11 Javascript
JavaScript代码实现左右上下自动晃动自动移动
Apr 08 Javascript
JavaScript常用代码书写规范的超全面总结
Sep 11 Javascript
js获取时间函数及扩展函数的方法
Oct 30 Javascript
使用纯JS代码判断字符串中有多少汉字的实现方法(超简单实用)
Nov 12 Javascript
原生js实现手风琴功能(支持横纵向调用)
Jan 13 Javascript
JS实现checkbox互斥(单选)功能示例
May 04 Javascript
ES6 Symbol数据类型的应用实例分析
Jun 26 Javascript
JavaScript页面加载事件实例讲解
Sep 01 Javascript
微信小程序全局变量GLOBALDATA的定义和调用过程解析
Sep 23 Javascript
jQuery+ajax实现用户登录验证
Sep 13 jQuery
Vue中render函数的使用方法
Jan 31 #Javascript
微信小程序图片轮播组件gallery slider使用方法详解
Jan 31 #Javascript
微信小程序scroll-view组件实现滚动动画
Jan 31 #Javascript
微信小程序实现全国机场索引列表
Jan 31 #Javascript
微信小程序radio组件使用详解
Jan 31 #Javascript
微信小程序checkbox组件使用详解
Jan 31 #Javascript
原生JS实现多个小球碰撞反弹效果示例
Jan 31 #Javascript
You might like
用PHP制作静态网站的模板框架
2006/10/09 PHP
PHP中用header图片地址 简单隐藏图片源地址
2008/04/09 PHP
php htmlentities和htmlspecialchars 的区别
2008/08/18 PHP
php adodb介绍
2009/03/19 PHP
使用NetBeans + Xdebug调试PHP程序的方法
2011/04/12 PHP
php读取本地文件常用函数(fopen与file_get_contents)
2013/09/09 PHP
深入理解PHP中的global
2014/08/19 PHP
php实现在限定区域里自动调整字体大小的类实例
2015/04/02 PHP
基于 Swoole 的微信扫码登录功能实现代码
2018/01/15 PHP
js获取当前日期代码适用于网页头部
2013/06/27 Javascript
JS Jquery 遍历,筛选页面元素 自动完成(实现代码)
2013/07/08 Javascript
js获取鼠标点击的位置实现思路及代码
2014/05/09 Javascript
jquery实现textarea输入框限制字数的方法
2015/01/15 Javascript
Vuejs第八篇之Vuejs组件的定义实例解析
2016/09/05 Javascript
JS中微信小程序自定义底部弹出框
2016/12/22 Javascript
Vue.js如何实现路由懒加载浅析
2017/08/14 Javascript
vue实现条件判断动态绑定样式的方法
2018/09/29 Javascript
vue+element树组件 实现树懒加载的过程详解
2019/10/21 Javascript
Js视频播放器插件Video.js使用方法详解
2020/02/04 Javascript
JavaScript实现矩形块大小任意缩放
2020/08/25 Javascript
原生js实现简单轮播图
2020/10/26 Javascript
Python应用03 使用PyQT制作视频播放器实例
2016/12/07 Python
pycharm下打开、执行并调试scrapy爬虫程序的方法
2017/11/29 Python
python求平均数、方差、中位数的例子
2019/08/22 Python
Python操作qml对象过程详解
2019/09/26 Python
Pycharm 字体大小调整设置的方法实现
2019/09/27 Python
django API 中接口的互相调用实例
2020/04/01 Python
python实现网页录音效果
2020/10/26 Python
Python爬虫之Selenium实现关闭浏览器
2020/12/04 Python
What's the difference between an interface and abstract class? (接口与抽象类有什么区别)
2012/10/29 面试题
旷课检讨书2000字
2014/01/14 职场文书
如何打造一封优秀的留学推荐信
2014/01/25 职场文书
12.4全国法制宣传日活动方案
2014/11/02 职场文书
大学生自我推荐信范文
2015/03/24 职场文书
Java Kafka 消费积压监控的示例代码
2021/07/01 Java/Android
html中相对位置与绝对位置的具体使用
2022/05/15 HTML / CSS