微信小程序实现折叠面板


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 相关文章推荐
IE event.srcElement和FF event.target 功能比较
Mar 01 Javascript
jquery打开直接跳到网页最下面、最低端实现代码
Apr 22 Javascript
JavaScript实现的多个图片广告交替显示效果代码
Sep 04 Javascript
js基于cookie方式记住返回页面用法示例
May 27 Javascript
Bootstrap开关(switch)控件学习笔记分享
May 30 Javascript
JavaScript必知必会(五) eval 的使用
Jun 08 Javascript
原生js仿jquery实现对Ajax的封装
Oct 04 Javascript
详解javascript立即执行函数表达式IIFE
Feb 13 Javascript
JavaScript结合HTML DOM实现联动菜单
Apr 05 Javascript
Vue在chrome44偶现点击子元素事件无法冒泡的解决方法
Dec 15 Javascript
keep-Alive搭配vue-router实现缓存页面效果的示例代码
Jun 24 Javascript
JavaScript分页组件使用方法详解
Jul 26 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定时删除文件夹下文件(清理缓存文件)
2013/01/23 PHP
与文件上传有关的php配置参数总结
2013/06/14 PHP
php实例分享之通过递归实现删除目录下的所有文件详解
2014/05/15 PHP
PHP编程入门的基本语法知识点总结
2016/01/26 PHP
ThinkPHP使用Smarty第三方插件方法小结
2016/03/19 PHP
jQuery动态添加的元素绑定事件处理函数代码
2011/08/02 Javascript
Angular中的Promise对象($q介绍)
2015/03/03 Javascript
全面解析Bootstrap手风琴效果
2020/04/17 Javascript
jquery悬浮提示框完整实例
2016/01/13 Javascript
js实现炫酷的左右轮播图
2017/01/18 Javascript
Bootstrap模态框案例解析
2017/03/05 Javascript
AngularJS 限定$scope的范围实例详解
2017/06/23 Javascript
简单实现jQuery上传图片显示预览功能
2020/06/29 jQuery
vue 组件 全局注册和局部注册的实现
2018/02/28 Javascript
vue的常用组件操作方法应用分析
2018/04/13 Javascript
JS实现获取word文档内容并输出显示到html页面示例
2018/06/23 Javascript
AngularJs1.x自定义指令独立作用域的函数传入参数方法
2018/10/09 Javascript
vue-cli3访问public文件夹静态资源报错的解决方式
2020/09/02 Javascript
vant picker+popup 自定义三级联动案例
2020/11/04 Javascript
Python错误: SyntaxError: Non-ASCII character解决办法
2017/06/08 Python
Mac 上切换Python多版本
2017/06/17 Python
对变量赋值的理解--Pyton中让两个值互换的实现方法
2017/11/29 Python
python实现log日志的示例代码
2018/04/28 Python
python字符串string的内置方法实例详解
2018/05/14 Python
如何在keras中添加自己的优化器(如adam等)
2020/06/19 Python
印尼第一大家居、生活和家具电子商务:Ruparupa
2019/11/25 全球购物
Jowissa官方网站:瑞士制造的手表,优雅简约的设计
2020/07/29 全球购物
大专生自荐信
2013/10/04 职场文书
在职人员函授期间自我评价分享
2013/11/08 职场文书
服装促销活动方案
2014/02/23 职场文书
关于晚自习早退的检讨书
2014/09/13 职场文书
学习优秀共产党员先进事迹思想报告
2014/09/17 职场文书
2014年节能降耗工作总结
2014/12/11 职场文书
银行工作心得体会范文
2016/01/23 职场文书
导游词之黄帝陵景区
2019/09/16 职场文书
Java设计模式之享元模式示例详解
2022/03/03 Java/Android