微信小程序实现折叠面板


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 相关文章推荐
js 实现无缝滚动 兼容IE和FF
Jul 15 Javascript
JQuery基础语法小结
Feb 27 Javascript
JavaScript使用shift方法移除素组第一个元素实例分析
Apr 06 Javascript
JS+CSS实现表格高亮的方法
Aug 05 Javascript
功能强大的Bootstrap组件(结合js)
Aug 03 Javascript
Js判断H5上下滑动方向及滑动到顶部和底部判断的示例代码
Nov 15 Javascript
vue短信验证性能优化如何写入localstorage中
Apr 25 Javascript
jQuery实现table表格信息的展开和缩小功能示例
Jul 21 jQuery
Vue.js 事件修饰符的使用教程
Nov 01 Javascript
js防抖和节流的深入讲解
Dec 06 Javascript
vue element-ui table组件动态生成表头和数据并修改单元格格式 父子组件通信
Aug 15 Javascript
JS继承定义与使用方法简单示例
Feb 19 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中显示数组与对象的实现代码
2011/04/18 PHP
解析PHP实现多进程并行执行脚本
2013/06/18 PHP
php格式输出文件var_export函数实例
2014/11/15 PHP
postfixadmin忘记密码后的修改密码方法详解
2016/07/20 PHP
jquery下利用jsonp跨域访问实现方法
2010/07/29 Javascript
extjs ColumnChart设置不同的颜色实现代码
2013/05/17 Javascript
一个网页标题title的闪动提示效果实现思路
2014/03/22 Javascript
JavaSript中变量的作用域闭包的深入理解
2014/05/12 Javascript
浅谈javascript的分号的使用
2015/05/12 Javascript
微信小程序(三):网络请求
2017/01/13 Javascript
使用jquery给新生的th绑定hover事件的实例
2017/02/10 Javascript
基于VUE移动音乐WEBAPP跨域请求失败的解决方法
2018/01/16 Javascript
Angular5升级RxJS到5.5.3报错:EmptyError: no elements in sequence的解决方法
2018/04/09 Javascript
实例详解Vue项目使用eslint + prettier规范代码风格
2018/08/20 Javascript
Vue项目数据动态过滤实践及实现思路
2018/09/11 Javascript
vue-cli3+typescript初体验小结
2019/02/28 Javascript
详解a标签添加onclick事件的几种方式
2019/03/29 Javascript
微信小程序封装自定义弹窗的实现代码
2019/05/08 Javascript
express + jwt + postMan验证实现持久化登录
2019/06/05 Javascript
Vue+Element自定义纵向表格表头教程
2020/10/26 Javascript
[07:52]2014DOTA2 TI逗比武士游V社解说背后的故事
2014/07/10 DOTA
Python实现各种排序算法的代码示例总结
2015/12/11 Python
对pandas replace函数的使用方法小结
2018/05/18 Python
python实现可视化动态CPU性能监控
2018/06/21 Python
深入理解Python中的 __new__ 和 __init__及区别介绍
2018/09/17 Python
django2.0扩展用户字段示例
2019/02/13 Python
Python中有几个关键字
2020/06/04 Python
matplotlib bar()实现百分比堆积柱状图
2021/02/24 Python
《哪吒闹海》教学反思
2014/02/28 职场文书
市场营销工作计划书
2014/05/06 职场文书
2014入党积极分子破除“四风”思想汇报
2014/09/14 职场文书
2015年安全教育月活动总结
2015/03/26 职场文书
2015年乡镇扶贫工作总结
2015/04/08 职场文书
刑事法律意见书
2015/06/04 职场文书
如何撰写促销方案?
2019/07/05 职场文书
长辈生日祝福语大全(72句)
2019/08/09 职场文书