Home > Article > WeChat Applet > Mini program example: Mini program realizes the effect of folding menu (with code)
The content of this article is about small program examples: small programs realize the effect of folding menus (with code), which has certain reference value. Friends in need can refer to it. I hope it will be helpful to you. .
Usually, menus are divided into first-level menus, second-level menus, and third-level menus. We know that the DOM operation of front-end js can well control the display and hiding of second-level menus. Of course, I will not do that today. Introducing the menu folding effect on the web side. Today, I am here to learn how to implement clicking on the first-level menu in Mini Program Show/Hidesecond-level menu, and in addition to clicking on a menu to display, other menus must be implemented hide.
The effect is as follows:
The code is as follows:
.wxml file
<view class="cells"> <view class="item" wx:for="{{List}}" wx:for-index="idx" wx:for-item="item" wx:key="idx"> <view bindtap="isOpen" class="cdn" data-index="{{item.id}}"> <view> <image class="img" src="{{item.iamges}}" mode="aspectFill"/><text class="content">{{item.cont}}</text> </view> <view> <text class="discount">{{item.discount}}</text><image class="icon_img" src="{{item.hidden ? '/assets/icon_down2x.png' : '/assets/icon_up2x.png'}}" mode="aspectFill"/> </view> </view> <view hidden="{{item.hiddena}}" class="hidden"> <block wx:for="{{item.invalidActivty}}" wx:for-index="index" wx:for-item="items" wx:key="index"> <view class="buys"> <view class="v1 "> <navigator><text class="new-price">{{items.price}}</text><text class="oldPrice">{{items.oldPrice}}</text></navigator> <navigator><text class="buy">{{items.validType}}</text><text style="font-size: 24rpx;margin-left: 20rpx;color: #6C6C6C">{{items.validTime}}</text></navigator> </view> <view class="shopping"> <text>购买</text> </view> </view> </block> </view> </view> </view>
The .wxss file is as follows:
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 file
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; },
Related recommendations:
Development of small programs: form verification (code)
Mini Program: Code to implement click countdown
The above is the detailed content of Mini program example: Mini program realizes the effect of folding menu (with code). For more information, please follow other related articles on the PHP Chinese website!