微信小程序之----------卡片收缩

（1）首先来看下最终的效果图

效果图的描述：

点击当前卡片下的箭头，当前卡片展开，别的卡片收缩。
当前卡片展开，点击别的卡片当前卡片先收起，别的卡片在展开。

思路如下：

在data里面设置一个开关，is_show，默认为false，不展开。

account是后端返回的数组，index是索引值（通过e拿到的）。

点击后判断当前是否展开，

-----如果当前的展开：就让所有的收缩

-----如果当前的收缩：就让所有的收缩，让当前的展开

.wxml的相关代码如下：

html代码
<view><view class='pending_package_tit' wx:if="{{account[1]}}">待生效套餐</view><view class='pending_package_box'><block wx:for='{{account}}' wx:key="" wx:if="{{index != 0}}"><view class='unpackage_item'><view class="userMsgList" wx:if="{{brandList.broadbandNumber}}"><view class="left">宽带账号：</view><view class="right">{{brandList.broadbandNumber}}</view></view><view class="userMsgList" wx:if="{{item.productName}}"><view class="left">套餐名称：</view><view class="right">{{item.productName}}</view></view><view class="userMsgList" wx:if="{{item.effDate}}" wx:if="{{item.is_show}}"><view class="left">开通时间：</view><view class="right">{{item.effDate}}</view></view><view class="userMsgList {{status == 2?'last-item':''}}" wx:if="{{item.expDate}}" wx:if="{{item.is_show}}"><view class="left">到期时间：</view><view class="right">{{item.expDate}}</view></view><view class='icon_up' bindtap='changeArrow' data-index="{{index}}"><image src='../../../img/icon/icon_up.svg' wx:if="{{item.is_show}}"></image></view><view class='icon_up' bindtap='changeArrow' data-index="{{index}}"><image src='../../../img/icon/icon_down.svg' wx:if="{{!item.is_show}}"></image></view></view></block></view>
</view>

.js的相关代码如下：

data：{is_show:false,account:[]
},
changeArrow: function(e){console.log('触发了点击事件',e,this.data.account.length);var index, account;index = e.currentTarget.dataset.index;account = this.data.account;// if (account[index].is_show) {//   account[index].is_show = false// }else{//   account[index].is_show = true// }if(account[index].is_show){account.forEach(item => {item.is_show = false})}else{account.forEach(item => {item.is_show = false})account[index].is_show = true}this.setData({account})
}

------------------------------------------------------------------按照思路一步一步即可完成收缩效果。

微信小程序之----------卡片收缩相关推荐

微信小程序css卡片样式（带阴影效果）
微信小程序css卡片样式(带阴影) 效果图 wxml代码 <view class="card"></view> css样式 .card{width: 90% ...
微信小程序之卡片瀑布流
最近想在小程序中通过第三方BrickLayout晓瀑布流插件实现留言卡片的瀑布流效果(如图1,图2所示),个人感觉这个还可以,可以自定义卡片颜色:头像:昵称等等信息,如果可以接入API接口更好,下面介 ...
微信小程序分享卡片（一秒钟学会）
XML: <view class="container log-list"><view>我是分享页面</view><!-- button与 ...
微信小程序实现卡片翻转的效果
1.实现效果 2.实现代码 // pages/subPack/roateY180/index.js Page({/*** 页面的初始数据*/data: {},showb1() {this.setDat ...
Painter（微信小程序分享卡片）
Painter 的优势功能全,支持文本.图片.矩形.qrcode 类型的 view 绘制布局全,支持多种布局方式,如 align(对齐方式).rotate(旋转) 支持圆角,其中图片,矩形,和整个 ...
小程序如何跳转至同服务器app,微信小程序如何跳转到APP?
随着经济的快速发展和技术的不断创新,智能手机.iPad和平板电脑的普及促进了移动互联网应用和服务(APP)的快速发展.自2008年7月App Store 应用商店推出以来,大约有55万应用程序在货架 ...
微信小程序 - 展开收缩列表
代码源自于:微信小程序示例官方 index.wxml 1 <block wx:for-items="{{list}}" wx:key="{{item.id}}&qu ...
微信小程序手势滑动卡片案例
最近工作中有项目要使用微信小程序技术进行开发,其中一项功能困扰了我很久,卡片滑动动效以及手势识别.经过一番研究和参考,现在把成果展示.记录自己踩到的坑,如果大家有需要,也可以帮助到大家. 效果图: 首 ...
uni-app 微信小程序客服聊天和发送页面卡片功能
微信小程序客服聊天和发送页面卡片功能实现步骤如下: (一):首先登录微信公众平台 :https://mp.weixin.qq.com/ 登录成功后找到----->功能-----> 客服-- ...

微信小程序之----------卡片收缩

微信小程序之----------卡片收缩相关推荐

最新文章

热门文章