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


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 相关文章推荐
IE中createElement需要注意的一个问题
Jul 13 Javascript
基于jQuery实现模拟页面加载进度条
Apr 01 Javascript
Javascript BOM学习小结(六)
Nov 26 Javascript
基于javascript实现右下角浮动广告效果
Jan 08 Javascript
JS Attribute属性操作详解
May 19 Javascript
JS定时检测任务任务完成后执行下一步的解决办法
Dec 22 Javascript
AngularJS2中一种button切换效果的实现方法(二)
Mar 27 Javascript
Angular中ng-bind和ng-model的区别实例详解
Apr 10 Javascript
JS实现的简单tab切换功能完整示例
Jun 20 Javascript
vue实现在进行增删改操作后刷新页面
Aug 05 Javascript
原生js实现拖拽移动与缩放效果
Aug 24 Javascript
详解Vue项目的打包方式(生成dist文件)
Jan 18 Vue.js
详解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
删除无限分类并同时删除它下面的所有子分类的方法
2010/08/08 PHP
PHP中计算字符串相似度的函数代码
2012/12/29 PHP
Zend Framework教程之视图组件Zend_View用法详解
2016/03/05 PHP
php性能分析之php-fpm慢执行日志slow log用法浅析
2016/10/17 PHP
IE8 中使用加速器(Activities)
2010/05/14 Javascript
自定义jQuery选项卡插件实例
2013/03/27 Javascript
jQuery自动切换/点击切换选项卡效果的小例子
2013/08/12 Javascript
js实现在网页上简单显示时间的方法
2015/03/02 Javascript
JavaScript高级程序设计(第三版)学习笔记6、7章
2016/03/11 Javascript
深入理解JS中的substr和substring
2016/04/26 Javascript
JavaScript与java语言有什么不同
2016/09/22 Javascript
javascript 动态样式添加的简单实现
2016/10/11 Javascript
JS实现复制功能
2017/03/01 Javascript
vue构建单页面应用实战
2017/04/10 Javascript
js中字符型和数值型数字的互相转化方法(必看)
2017/04/25 Javascript
20行js代码实现的贪吃蛇小游戏
2017/06/20 Javascript
JS基于贪心算法解决背包问题示例
2017/11/27 Javascript
浅谈vue首屏加载优化
2018/06/28 Javascript
laravel-admin 与 vue 结合使用实例代码详解
2019/06/04 Javascript
微信小程序按钮点击动画效果的实现
2019/09/04 Javascript
使用vue打包进行云服务器上传的问题
2020/03/02 Javascript
[48:24]完美世界DOTA2联赛PWL S3 Forest vs INK ICE 第一场 12.09
2020/12/12 DOTA
python集合类型用法分析
2015/04/08 Python
web.py在SAE中的Session问题解决方法(使用mysql存储)
2015/06/24 Python
Python写入数据到MP3文件中的方法
2015/07/10 Python
Python使用Srapy框架爬虫模拟登陆并抓取知乎内容
2016/07/02 Python
Python多线程扫描端口代码示例
2018/02/09 Python
Python中如何导入类示例详解
2019/04/17 Python
python实现录屏功能(亲测好用)
2020/03/02 Python
css3利用transform变形结合事件完成扇形导航
2020/10/26 HTML / CSS
日本最大的眼镜购物网站:Oh My Glasses
2016/11/13 全球购物
印度尼西亚手表和包包商店:Urban Icon
2019/12/12 全球购物
土建资料员岗位职责
2014/01/04 职场文书
2015年暑期见闻
2015/07/14 职场文书
2016年学生会感恩节活动总结
2016/04/01 职场文书
浅谈JS的二进制家族
2021/05/09 Javascript