小程序实现列表展开收起效果

2024-09-29 22:30:35

本文实例为大家分享了小程序实现列表展开收起的具体代码，供大家参考，具体内容如下

效果：

原理：利用AppData值 + 显示隐藏的样式，进行展开收起。

wxml:

<view bindtap="toChange" data-show='isShow'>{{isShow?'收起':'展开'}}<view>
<view class="{{isShow?'db' : 'dn'}}">这是你要收起展开的内容</view>

js:

 Page({\
  data: {
  isShow: true, //true为展开
  },
  /*
  * isShow做取反操作
  * */
  toChange (e) {
  let that = this;
  let name = e.currentTarget.dataset.show;
  let param = {};
  param[name] = !that.data[name];
  that.setData({
   ...param
  })
  },
 })

wxss:

.db{
 display:block;
}
.dn{
 display:none;
}

这个原理其实够正常的收起展开了，但是碰上列表，还需要调整一下，那么问题来了，如何让小程序列表中展示明细？

列表效果：

想法：利用AppData值 + 显示隐藏的样式，进行展开收起。还要加上“数据污染”。

js：

page({
data:{
 list:[{id:1},{id:2}],
},
toShowItem(e) {
 let that = this;
 let id = e.currentTarget.dataset.id,
  show = e.currentTarget.dataset.show;
 that.data.list.forEach(function (v) {
  if (v.id == id) {
  v.show = !show;//这里污染原始数组数据
  }
 })
 //利用污染，对列表设置值
 this.setData({
  list: this.data.list
 })
 }
})

wxml：

<view wx:for="{{list}}" wx:key="{{index}}" wx:for-item="item">
 <view bindtap="toShowItem" data-id='{{item.id}}' data-show='{{item.show}}'>
  <text>{{item.show?'收起明细':'明细'}}</text>
 </view>
 <view class="{{item.show ? 'db' : 'dn'}}">
  这里是你展开收起的内容
 </view>
</view>

这里只是分享一个想法，要是想用直接粘贴，是达不到效果图的效果的，毕竟不是所有的样式都放上来了。

为大家推荐现在关注度比较高的微信小程序教程一篇：《微信小程序开发教程》小编为大家精心整理的，希望喜欢。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

微信小程序列表的上拉加载和下拉刷新的实现

微信小程序可谓是9月21号之后最火的一个名词了,一经出现真是轰炸了整个开发人员,当然很多App开发人员有了一个担心,微信小程序的到来会不会让移动端App颠覆,让移动端的程序员失业,身为一个Android开发者我是不相信的,即使有,那也是需要个一两年的过度和打磨才能实现的吧. 不管微信小程序是否能颠覆当今的移动开发格局,我们都要积极向上的心态去接收,去学习.不排斥新技术,所以,心动不如行动,赶紧先搭建一个微信小程序开发工具.那么接下来就让我们来开始学习列表的上拉加载和下拉刷新的实现吧(通过聚合数据
微信小程序下拉列表的实现实例代码

微信小程序下拉列表 wxml代码: <view class="phone_one" bindtap="clickPerson"> <view class="phone_personal">{{firstPerson}}</view> <image src="../../image/v6.png" class="personal_image {{selectArea ? 'r
微信小程序实现列表下拉刷新上拉加载

本文实例为大家分享了Android九宫格图片展示的具体代码,供大家参考,具体内容如下 DEMO下载效果图原理利用微信小程序的onPullDownRefresh函数(下拉刷新监听函数)和onReachBottom函数(上拉加载监听函数)监听页面的下拉和上拉动态,从而对页面数据进行修改! 页面配置JSON enablePullDownRefresh:开启下拉刷新: onReachBottomDistance:页面上拉触底事件触发时距页面底部距离,单位为px. { "enablePullDown
小程序实现列表展开收起效果

本文实例为大家分享了小程序实现列表展开收起的具体代码,供大家参考,具体内容如下效果: 原理:利用AppData值 + 显示隐藏的样式,进行展开收起. wxml: <view bindtap="toChange" data-show='isShow'>{{isShow?'收起':'展开'}}<view> <view class="{{isShow?'db' : 'dn'}}">这是你要收起展开的内容</view> js
微信小程序实现通讯录列表展开收起

本文实例为大家分享了微信小程序实现通讯录列表展开收起的具体代码,供大家参考,具体内容如下效果图: wxml: <view class="mail_content kind-list-item-bd {{item.open ? 'kind-list-item-bd-show' : ''}}"> <view class="navigator-box {{item.open ? 'navigator-box-show' : ''}}"> <
微信小程序实现折叠展开效果

本文实例为大家分享了微信小程序实现折叠展开效果的具体代码,供大家参考,具体内容如下 wxml: <view class="page">  <view class="li" bindtap='changeToggle'> <view class="left">总数</view> <view class="right gray" >8&l
微信小程序实现列表项左滑删除效果

本文实例为大家分享了微信小程序实现列表项左滑删除效果的具体代码,供大家参考,具体内容如下效果图片 WXML <view class="container">  <view class="address"> <view class="left"> <view class="icon"> <image src="../../i
微信小程序实现列表项上移下移效果

本文实例为大家分享了微信小程序实现列表项上移下移的具体代码,供大家参考,具体内容如下需要实现的效果:点击向下按钮时所选项内容和下一项内容交换,向上按钮则相反,删除按钮则点击时删除所选项那一列内容 index.wxml <view class="subject" wx:for="{{sublist}}" wx:key="index"> <view>{{index+1}}.{{item}}</view>
微信小程序页面缩放式侧滑效果的实现代码

先给大家展示下效果图,大家感觉不错,请参考实现代码: 实现原理:点击按钮,往需要动画的div中添加或移除拥有动画效果的class. 由于微信小程序中不能操作page这个根节点,所以,只有用一个div(view)来模仿page根节点. 1.结构 <view class='page {{isFix?"pageShow":"pageHide"}}' > <view class='header'> <view class='h-toggle i
Android开发实现ListView点击展开收起效果示例

本文实例讲述了Android开发实现ListView点击展开收起效果.分享给大家供大家参考,具体如下: 废话不说先上效果: 实际上这是采用一个ExpandableListView实现的布局文件很简单: <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xm
小程序实现列表多个批量倒计时

最近在写一个列表功能,列表中有倒计时的效果,网上没有可用的素材,以下是本人自己写的,如有问题,希望大家指出. 先来看看基本的效果小程序中列表倒计时,类似活动倒计时列表,列表中有多个倒计时效果,且不冲突先把时间打印出来,放在data中,然后在写计时器:如果先写计时器,然后把打印出来的时间放在data就会报错,setData不支持这种操作. 数据文件(dates.js,返回的时间数据是剩余时间) var dates=[ { dat:324235235 }, { dat:7200000 }, {
微信小程序多列表渲染数据开关互不影响的实现

最近在学习小程序,正好发现一个问题,微信小程序多列表渲染数据开关怎么互不影响,记录一下,分享给大家  <wxs src="../../utils/filter.wxs" module="filter" /> <view class="list"> <view wx:for="{{list}}" wx:key="{{inde
微信小程序实现列表的横向滑动方式

微信小程序原生方式实现列表的横向滑动的两种方法: 效果图: 方式一:简单样式实现父元素设置: white-space:nowrap;//不换行 overflow-x: auto;子元素设置: display:inline-block; 方式二:scroll-view 标签 + 样式 scroll-view的横向滚动: scroll-view的内层view元素需要:display:inline-block; scroll-view的外层元素需要:white-space:nowrap; 实现代码:

小程序实现列表展开收起效果

相关推荐

随机推荐