微信小程序实现折叠展开效果


Posted in Javascript onJuly 19, 2018

本文实例为大家分享了微信小程序实现折叠展开效果的具体代码,供大家参考,具体内容如下

wxml:

<view class="page">
<!-- 总数 -->
<view class="li" bindtap='changeToggle'>
<view class="left">总数</view>
<view class="right gray" >8</view>
</view>

<!--分类 -->
<view class="li" data-index="0" bindtap='changeToggle'>
<view class="left">类别1</view>
<view class="right">3 <text class="iconfont {{selectedFlag[0]?'icon-shangjiantou':'icon-xiala'}}"> </text>
  </view>
 </view>
 <view hidden="{{!selectedFlag[0]}}">
 <block wx:for="{{list01}}" wx:for-item="item" wx:for-index="index">
  <view class="li bg-gray">
  <view>展开1</view>
  </view>
 </block>
 </view>

 <view class="li" data-index="1" bindtap='changeToggle'>
 <view class="left">类别2</view>
 <view class="right">0
  <text class="iconfont {{selectedFlag[1]?'icon-shangjiantou':'icon-xiala'}}"> </text>
 </view>
 </view>
 <view hidden="{{!selectedFlag[1]}}">
 <block wx:for="{{list02}}" wx:for-item="item" wx:for-index="index">
  <view class="li bg-gray">
  <view>展开2</view>

  </view>
 </block>
 </view>

 <view class="li" data-index="2" bindtap='changeToggle'>
 <view class="left">类别3</view>
 <view class="right red">2
  <text class="iconfont {{selectedFlag[2]?'icon-shangjiantou':'icon-xiala'}}"> </text>
 </view>
 </view>
 <view hidden="{{!selectedFlag[2]}}">
 <block wx:for="{{list03}}" wx:for-item="item" wx:for-index="index">
  <view class="li bg-gray">
  <view>展开3</view>

  </view>
 </block>
 </view>


 <view class="li" data-index="3" bindtap='changeToggle'>
 <view class="left">类别4</view>
 <view class="right red">3
  <text class="iconfont {{selectedFlag[3]?'icon-shangjiantou':'icon-xiala'}}"> </text>
 </view>
 </view>
 <view hidden="{{!selectedFlag[3]}}">
 <block wx:for="{{list04}}" wx:for-item="item" wx:for-index="index">
  <view class="li bg-gray">
  <view>展开4</view>
  <view class="red">展开4右边</view>
  </view>
 </block>
 </view>

wxss:

/* 列表详情 */

.li {
 background-color: #fff;
 display: flex;
 justify-content: space-between;
 font-size: 34rpx;
 width: 92%;
 padding: 0 4%;
 height: 100rpx;
 line-height: 100rpx;
 border-bottom: 1rpx solid #f1f1f1;
}
.bg-gray{
 background-color: #ccc!important;
 border-bottom: 1rpx solid #fff!important;
}

.li .icon-xiala ,.icon-shangjiantou {
 color: #999;
 font-size: 28rpx;
}

.gray {
 color: #8e8e8e;
}

.red {
 color: #fe2e2e;
}

js:

Page({
 data: {

 list01: [
  { item_id: 1 }, { item_id: 11 }, { item_id: 11 },
 ],
 list02: [

 ],
 list03: [
  { item_id: 11 }, { item_id: 11 }
 ],
 list04: [
  { item_id: 11 }, { item_id: 11 }, { item_id: 11 }
 ],

 // 展开折叠
 selectedFlag: [false, false, false, false],

 },
 // 展开折叠选择 
 changeToggle:function(e){
 var index = e.currentTarget.dataset.index;
 if (this.data.selectedFlag[index]){
  this.data.selectedFlag[index] = false;
 }else{
  this.data.selectedFlag[index] = true;
 }

 this.setData({
  selectedFlag: this.data.selectedFlag
 })
 },

})

效果图,手风琴效果:

微信小程序实现折叠展开效果

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

Javascript 相关文章推荐
[原创]图片分页查看
Aug 28 Javascript
Jquery同辈元素选中/未选中效果的实例代码
Aug 01 Javascript
append和appendTo的区别以及appendChild用法
Dec 24 Javascript
jQuery实现气球弹出框式的侧边导航菜单效果
Sep 22 Javascript
jQuery实现的给图片点赞+1动画效果(附在线演示及demo源码下载)
Dec 31 Javascript
jquery使用EasyUI Tree异步加载JSON数据(生成树)
Feb 11 Javascript
js实现PC端根据IP定位当前城市地理位置
Feb 22 Javascript
基于JavaScript表单脚本(详解)
Oct 18 Javascript
新手入门带你学习JavaScript引擎运行原理
Jun 24 Javascript
Node.js API详解之 os模块用法实例分析
May 06 Javascript
原生JS实现微信通讯录
Jun 18 Javascript
理解JavaScript中的Proxy 与 Reflection API
Sep 21 Javascript
详解Angularjs 自定义指令中的数据绑定
Jul 19 #Javascript
微信小程序实现天气预报功能
Jul 18 #Javascript
vue代理和跨域问题的解决
Jul 18 #Javascript
小程序自定义组件实现城市选择功能
Jul 18 #Javascript
微信小程序实践之动态控制组件的显示/隐藏功能
Jul 18 #Javascript
微信小程序项目实践之主页tab选项实现
Jul 18 #Javascript
详解性能更优越的小程序图片懒加载方式
Jul 18 #Javascript
You might like
PHP实现即时输出、实时输出内容方法
2015/05/27 PHP
Thinkphp5行为使用方法汇总
2017/12/21 PHP
use jscript List Installed Software
2007/06/11 Javascript
JavaScript DOM 添加事件
2009/02/14 Javascript
For循环中分号隔开的3部分的执行顺序探讨
2014/05/27 Javascript
JavaScript拆分字符串时产生空字符的解决方案
2014/09/26 Javascript
jQuery实现的自动加载页面功能示例
2016/09/04 Javascript
bootstrap select插件封装成Vue2.0组件
2017/04/17 Javascript
js实现单张图片平移切换效果
2017/10/11 Javascript
angularjs 获取默认选中的单选按钮的value方法
2018/02/28 Javascript
结合Vue控制字符和字节的显示个数的示例
2018/05/17 Javascript
vue引入axios同源跨域问题
2018/09/27 Javascript
解决vue移动端适配问题
2018/12/12 Javascript
小程序实现上下移动切换位置
2019/09/23 Javascript
原生js实现的观察者和订阅者模式简单示例
2020/04/18 Javascript
Vue Router中应用中间件的方法
2020/08/06 Javascript
[01:03:27]NAVI vs EG 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/17 DOTA
python开发之字符串string操作方法实例详解
2015/11/12 Python
Python实现简单过滤文本段的方法
2017/05/24 Python
python3.0 模拟用户登录,三次错误锁定的实例
2017/11/02 Python
对python生成业务报表的实例详解
2019/02/03 Python
python实现简单的tcp 文件下载
2020/09/16 Python
虚拟环境及venv和virtualenv的区别说明
2021/02/05 Python
CSS3制作彩色进度条样式的代码示例分享
2016/06/23 HTML / CSS
化工工艺专业求职信
2013/09/22 职场文书
运动会稿件50字
2014/02/17 职场文书
五一劳动节活动记录
2014/03/23 职场文书
人力资源管理专业自荐信
2014/06/24 职场文书
教师批评与自我批评心得体会
2014/10/16 职场文书
毕业设计指导教师评语
2014/12/30 职场文书
工程部文员岗位职责
2015/02/04 职场文书
培训计划通知
2015/07/15 职场文书
看古人们是如何赞美老师的?
2019/07/08 职场文书
JavaScript实现简单图片切换
2021/04/29 Javascript
使用Python的开发框架Brownie部署以太坊智能合约
2021/05/28 Python
Python 键盘事件详解
2021/11/11 Python