小程序实例：小程序实现折叠菜单的效果（附代码）（小程序按钮代码）

小程序实例：小程序实现折叠菜单的效果（附代码）（小程序按钮代码）

本篇文章给大家带来的内容是关于小程序实例：小程序实现折叠菜单的效果（附代码），有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。

实现效果如下：

程序员必备接口测试调试工具：立即使用Apipost = Postman + Swagger + Mock + Jmeter Api设计、调试、文档、自动化测试工具 后端、前端、测试，同时在线协作，内容实时同步

代码如下：

.wxml文件

{{item.cont}} {{item.discount}} {{items.price}}{{items.oldPrice}} {{items.validType}}{{items.validTime}} 购买 -

.wxss文件如下：

page{ background: #fff;}.swiper-img{ width: 750rpx; height: 300rpx;}.cells .item .cdn{ position: relative; box-sizing:border-box; display: flex; justify-content: space-between; align-items: center; padding: 20rpx 30rpx; /*border-bottom: 1rpx solid #f0f0f0;*/ background-color: #fff; font-size: 32rpx;}.cells .item .cdn::after{ content:'';position:absolute;top:0;left:0;width:200%;height:200%;-webkit-transform:scale(.5);transform:scale(.5);-webkit-transform-origin:0 0;transform-origin:0 0;pointer-events:none;box-sizing:border-box;border-bottom:0 solid #f0f0f0;border-width:1px}.img{ height: 44rpx; width: 44rpx; vertical-align: middle; display: inline-block; line-height: 82rpx;}.icon_img{ height:12rpx; width:20rpx;}.content{ margin-left: 15rpx; line-height: 82rpx; vertical-align: middle;}.discount{ line-height: 82rpx; vertical-align: middle; color:orange; box-sizing: border-box; padding-right: 20rpx;}.video-item{ display: flex; flex-direction: column;}.buys{ width:750rpx; height: 141.6rpx; position: relative; box-sizing: border-box; padding: 20rpx 30rpx; display: flex; flex-direction: row; justify-content: space-between; align-items: center; background-color:#FAFAFA;}.buys::after { content:'';position:absolute;top:0;left:0;width:200%;height:200%;-webkit-transform:scale(.5);transform:scale(.5);-webkit-transform-origin:0 0;transform-origin:0 0;pointer-events:none;box-sizing:border-box; border-bottom:0 solid #DCDCDC;border-width:1px;}.v1{ width: 35%; display: flex; flex-direction: row; flex-wrap: wrap;}.new-price{ font-size: 32rpx; color: #3B3B3B;}.oldPrice{ text-decoration:line-through; font-size: 24rpx; color: #B0B0B0; margin-left: 20rpx;}.buy{ font-size: 24rpx; color: #2DAF73; text-align: center; width: 80rpx; height: 40rpx; line-height: 40rpx; display: inline-block; position: relative; box-sizing: border-box;}.buy::after{ content:'';position:absolute;top:0;left:0;width:200%;height:200%;-webkit-transform:scale(.5);transform:scale(.5);-webkit-transform-origin:0 0;transform-origin:0 0;pointer-events:none;box-sizing:border-box;border:0 solid #2DAF73;border-width:1px;border-radius:8rpx}.shopping{ width: 128rpx; height: 56rpx; line-height: 56rpx; position: relative; box-sizing: border-box; font-size: 28rpx; color: #2DAF73; text-align: center;}.shopping::after{ content:'';position:absolute;top:0;left:0;width:200%;height:200%;-webkit-transform:scale(.5);transform:scale(.5);-webkit-transform-origin:0 0;transform-origin:0 0;pointer-events:none;box-sizing:border-box;border:0 solid #2DAF73;border-width:1px;border-radius:16rpx}-

.js文件

data: { memberList:[ {iamges:"/assets/logo_aiqiyi2x.png", cont:"爱奇艺影视会员", discount:"7.5折", hiddena:true, id:"0", invalidActivty:[ { price:"2.98元", oldPrice:"3元", validType:"周卡", validTime:'7天有效' }, { price:"18.98元", oldPrice:"25元", validType:"月卡", validTime:'30天有效' }, ] }, {iamges:"/assets/logo_tengxun2x.png", cont:"腾讯视频会员", discount:"7折", hiddena:true, id:"1", invalidActivty:[ { price:"2.98元", oldPrice:"3元", validType:"周卡", validTime:'7天有效' }, { price:"18.98元", oldPrice:"25元", validType:"月卡", validTime:'30天有效' }, ] }, {iamges:"/assets/logo_youku2x.png", cont:"优酷视频黄金会员", discount:"8折", hiddena:true, id:"2", invalidActivty:[ { price:"2.98元", oldPrice:"3元", validType:"周卡", validTime:'7天有效' }, { price:"18.98元", oldPrice:"25元", validType:"月卡", validTime:'30天有效' }, ] }, {iamges:"/assets/logo_sohu2x.png", cont:"搜狐视频黄金会员", discount:"8折", hiddena:true, id:"3", invalidActivty:[ { price:"2.98元", oldPrice:"3元", validType:"周卡", validTime:'7天有效' }, { price:"18.98元", oldPrice:"25元", validType:"月卡", validTime:'30天有效' }, ] }, ] }, isOpen:function(e){ var that = this; var idx = e.currentTarget.dataset.index; console.log(idx); var memberList = that.data.MemberList; console.log(memberList); for (let i=0; i < memberList.length; i++){ if (idx == i) { memberList[i].hidden=!memberList[i].hidden; } else { memberList[i].hidden=true; } } this.setData({MemberList:memberList}); return true; },-

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。