微信小程序实现折叠面板


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下利用fso判断文件是否存在的代码
Dec 11 Javascript
js获得鼠标的坐标值的方法
Mar 13 Javascript
弹出窗口并且此窗口带有半透明的遮罩层效果
Mar 13 Javascript
jQuery中is()方法用法实例
Jan 06 Javascript
EasyUI闪屏EasyUI页面加载提示(原理+代码+效果图)
Feb 21 Javascript
利用jQuery插件imgAreaSelect实现图片上传裁剪(放大缩小)
Dec 02 Javascript
微信小程序去哪里找 小程序到底如何使用(附小程序名单)
Jan 09 Javascript
详解Vue爬坑之vuex初识
Jun 14 Javascript
vue子父组件通信的实现代码
Jul 09 Javascript
实例讲解Vue.js中router传参
Apr 22 Javascript
基于JavaScript实现简单扫雷游戏
Jan 02 Javascript
小程序自定义轮播图圆点组件
Jun 25 Javascript
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实现批量查询清除一句话后门的代码
2008/01/20 PHP
PHP set_error_handler()函数使用详解(示例)
2013/11/12 PHP
PHP中使用CURL模拟登录并获取数据实例
2014/07/01 PHP
自己写的php curl库实现整站克隆功能
2015/02/12 PHP
Zend Framework入门知识点小结
2016/03/19 PHP
PHP面向对象程序设计之类与反射API详解
2016/12/02 PHP
根据分辨率不同,调用不同的css文件
2006/07/07 Javascript
原生javaScript做得动态表格(注释写的很清楚)
2013/12/29 Javascript
浅析基于WEB前端页面的页面内容搜索的实现思路
2014/06/10 Javascript
jQuery寻找n以内完全数的方法
2015/06/24 Javascript
JQuery日期插件datepicker的使用方法
2016/03/03 Javascript
快速掌握Node.js之Window下配置NodeJs环境
2016/03/21 NodeJs
JS代码随机生成姓名、手机号、身份证号、银行卡号
2016/04/27 Javascript
Bootstrap 折叠(Collapse)插件用法实例详解
2016/06/01 Javascript
js中int和string数据类型互相转化实例
2019/01/16 Javascript
浅谈监听单选框radio改变事件(和layui中单选按钮改变事件)
2019/09/10 Javascript
[50:22]完美盛典-2018年度红毯走秀
2018/12/16 DOTA
[54:15]DOTA2-DPC中国联赛 正赛 DLG vs Dragon BO3 第二场2月1日
2021/03/11 DOTA
python使用matplotlib绘图时图例显示问题的解决
2017/04/27 Python
Django开发中的日志输出的方法
2018/07/02 Python
python 获取键盘输入,同时有超时的功能示例
2018/11/13 Python
使用python进行拆分大文件的方法
2018/12/10 Python
Python实现数据结构线性链表(单链表)算法示例
2019/05/04 Python
Python将文字转成语音并读出来的实例详解
2019/07/15 Python
python数据持久存储 pickle模块的基本使用方法解析
2019/08/30 Python
Python Selenium XPath根据文本内容查找元素的方法
2020/12/07 Python
CSS3 @keyframes简单动画实现
2018/02/24 HTML / CSS
美国木工工具和用品商店:Woodcraft
2019/10/30 全球购物
化学实验员岗位职责
2013/12/28 职场文书
物业品质提升方案
2014/06/08 职场文书
普通党员对照检查材料
2014/08/28 职场文书
乡镇一岗双责责任书
2015/01/29 职场文书
工作时间调整通知
2015/04/24 职场文书
教你怎么用Python实现多路径迷宫
2021/04/29 Python
有趣的二维码:使用MyQR和qrcode来制作二维码
2021/05/10 Python
IDEA使用SpringAssistant插件创建SpringCloud项目
2021/06/23 Java/Android