微信小程序实现折叠面板


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 相关文章推荐
jQuery实现按钮的点击 全选/反选 单选框/复选框 文本框 表单验证
Jun 25 Javascript
JS实现点击上移下移LI行数据的方法
Aug 05 Javascript
解决JS无法调用Controller问题的方法
Dec 31 Javascript
JS基于ocanvas插件实现的简单画板效果代码(附demo源码下载)
Apr 05 Javascript
vuex实现登录状态的存储,未登录状态不允许浏览的方法
Mar 09 Javascript
mpvue 如何使用腾讯视频插件的方法
Jul 16 Javascript
使用FormData实现上传多个文件
Dec 04 Javascript
js中的数组对象排序分析
Dec 11 Javascript
vue 解决数组赋值无法渲染在页面的问题
Oct 28 Javascript
js实现时分秒倒计时
Dec 03 Javascript
javascript实现获取中文汉字拼音首字母
May 19 Javascript
QT与javascript交互数据的实现
May 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
Discuz! 5.0.0论坛程序中加入一段js代码,让会员点击下载附件前自动弹出提示窗口
2007/04/18 PHP
PHP4与PHP5的时间格式问题
2008/02/17 PHP
PHP采集相关教程之一 CURL函数库
2010/02/15 PHP
PHP单例模式与工厂模式详解
2017/08/29 PHP
PHP面向对象之里氏替换原则简单示例
2018/04/08 PHP
JavaScript 参考教程
2006/12/29 Javascript
比较简单实用的使用正则三种版本的js去空格处理方法
2007/11/18 Javascript
js 中 document.createEvent的用法
2010/08/29 Javascript
浅析jquery的作用与优势
2013/12/02 Javascript
Angular Module声明和获取重载实例代码
2016/09/14 Javascript
jQuery tip提示插件(实例分享)
2017/04/28 jQuery
ios中视频的最后一桢问题解决
2019/05/14 Javascript
详解小程序如何改变onLoad的执行时机
2019/11/01 Javascript
swiper实现异形轮播效果
2019/11/28 Javascript
js实现聊天对话框
2020/02/08 Javascript
Node.js API详解之 dgram模块用法实例分析
2020/06/05 Javascript
基于JavaScript实现猜数字游戏代码实例
2020/07/30 Javascript
[01:08:33]OG vs VGJ.T 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
Python开发WebService系列教程之REST,web.py,eurasia,Django
2014/06/30 Python
Python中使用HTMLParser解析html实例
2015/02/08 Python
详解Python函数作用域的LEGB顺序
2016/05/14 Python
关于pandas的离散化,面元划分详解
2019/11/22 Python
香港化妆品经销商:我的公主
2016/08/05 全球购物
草莓网英国官网:Strawberrynet UK
2017/02/12 全球购物
Big Green Smile德国网上商店:提供各种天然产品
2018/05/23 全球购物
公司综合部的成员自我评价分享
2013/11/05 职场文书
大学生关于奋斗的演讲稿
2014/01/09 职场文书
超市中秋节促销方案
2014/03/21 职场文书
材料专业大学毕业生自荐书
2014/07/02 职场文书
房地产营销活动策划方案
2014/09/15 职场文书
投标邀请书范本
2015/02/02 职场文书
大学生支教感言
2015/08/01 职场文书
2015年党务工作者个人工作总结
2015/10/22 职场文书
个人房屋租赁合同(标准范本)
2019/09/16 职场文书
【HBU】数据库第四周 单表查询
2021/04/05 SQL Server
MySQL 隔离数据列和前缀索引的使用总结
2021/05/14 MySQL