微信小程序列表收起与展开效果

首先，先看下效果吧，就放两张图片看下吧

第一张图就是原页面了，然后点击 “收起” ，效果就是第二张图的样式了。再点击 “展开” 的时候就会变成第一张图的样子了。

<view class="list" wx:for="{{mylist.list}}" wx:for-item="test" wx:key="Addtime">     <view class="list-date list-one"><view class="line-one"><text>身高：{{test.height}} CM</text>          </view><view class="line-one"><text>体重：{{test.weight}} KG</text></view>       </view><view class="conts {{isshow?'hide':''}}"><view class="list-date"><view class="line-one"><text>BMI：{{test.bmi}}</text>          </view><view class="line-one"><text>体脂：{{test.bodyfat}}%</text></view>       </view><view class="list-date"><view class="line-one"><text>臀围：{{test.hipline}} CM</text>          </view><view class="line-one"><text>胸围：{{test.bust}} CM</text></view>       </view><view class="list-date"><view class="line-one"><text>腰围：{{test.thewaist}} CM</text>          </view><view class="line-one"><text>肩宽：{{test.shoulder}} CM</text></view>       </view><view class="list-date"><view class="line-one"><text>小腿围：{{test.minthigh}} CM</text>          </view><view class="line-one"><text>大腿围：{{test.maxthigh}} CM</text></view>       </view><view class="list-date"><view class="line-con"><text>备注内容: {{test.info}}</text>          </view>    </view></view><view class="open-close"><text bindtap="show">{{isshow? '收起︿' : '展开﹀'}}</text></view></view>
</view>

然后js页面代码

Page({/*** 页面的初始数据*/data: {isshow: true},/*** 展开、折叠效果*/show: function () {this.setData({isshow: !this.data.isshow})},
})

最后css页面代码，我就放了收起和展开的代码，其他的页面样式代码就根据自己的实际需求了

.conts {display: -webkit-box;
}
.hide {-webkit-box-orient: vertical;
}

微信小程序列表收起与展开效果相关推荐

微信小程序列表实现文字内容超出隐藏并显示全文/收起按钮
微信小程序列表实现文字内容超出隐藏并显示全文/收起按钮针对这个功能,产品的需求如下由于我们项目是教育类产品所以这里这个功能会用在发动态这里,就像微信朋友圈那样,我们叫班级圈. 用户发班级圈时,可以 ...
微信小程序列表加载动画示例
微信小程序列表加载动画微信小程序列表加载动画示例实现思路什么是动画? 导航栏设置列表动画加载完整代码demo 微信小程序列表加载动画示例初学微信小程序开发,记录一下.网上找了很久这种效果, ...
微信小程序实现滑动翻页效果源码附效果图
微信小程序开发交流qq群 173683895 承接微信小程序开发.扫码加微信. 正文: 微信小程序实现滑动翻页效果效果图: 源码: <view class="mainFra ...
c语言小程序跑马灯,微信小程序实现文字跑马灯效果
本文实例为大家分享了微信小程序实现文字跑马灯的具体代码,供大家参考,具体内容如下 wxml 1 显示完后再显示 Box"> 2 出现白边后即显示 Box"> {{tex ...
微信小程序详解 php,微信小程序列表开发详解
本文主要和大家分享微信小程序列表开发详解,主要以代码的形式和大家分享,希望能帮助到大家. 一.知识点 (一).列表渲染 wx:for tip:wx:for="array"可以等于参 ...
微信小程序开发实现图片滚动效果
微信小程序开发实现图片滚动效果效果:左右滑动可以切换展示图片代码:   <swiper&g ...
ar 微信小程序_微信小程序可支持实现AR效果
原标题:微信小程序可支持实现AR效果微信官方公众号"微信公开课"发文称,今天起,小程序可实现AR效果了,包括了:AR试穿.AR逛展等等.其中,首个支持AR动态试妆的美妆品牌小程序 ...
微信小程序-时间轴/抽屉展开收起特效
微信小程序项目中用到的时间轴展示和抽屉展开收起特效本篇内容为原创,转载请注明出处. 一.效果图默认为展开状态 --- 左:展开:右:收起二.代码片段: 1.wxml部分 <view c ...
微信小程序可横向滑动展开菜单
微信开发者工具通过scroll-view组件实现微信小程序的横向菜单可滑动的菜单,并在尾端插入一个图片,通过绑定事件实现点击之后更改view标签属性达到一个展开效果. 通过三元运算符控制组件的css ...

微信小程序列表收起与展开效果

微信小程序列表收起与展开效果相关推荐

最新文章

热门文章

微信小程序 列表收起与展开效果

微信小程序 列表收起与展开效果相关推荐

最新文章

热门文章

微信小程序列表收起与展开效果

微信小程序列表收起与展开效果相关推荐