本篇文章给大家带来的内容是关于小程序实例：小程序实现折叠菜单的效果（附代码），有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。
通常，菜单都有一级菜单二级、三级菜单之分，我们知道前端js的dom操作可以很好的控制二级菜单的显示与隐藏，当然今天我就不介绍web端的菜单折叠效果。我今天呢，是来学习学习小程序中该如何实现点击一级菜单显示/隐藏二级菜单，并且在点击一个菜单显示之外，要实现其他菜单隐藏。
实现效果如下：
代码如下：
.wxml文件
<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>.wxss文件如下：
bee餐饮点餐外卖小程序是针对餐饮行业推出的一套完整的餐饮解决方案，实现了用户在线点餐下单、外卖、叫号排队、支付、配送等功能，完美的使餐饮行业更高效便捷！功能演示：1、桌号管理登录后台，左侧菜单 “桌号管理”，添加并管理你的桌号信息，添加以后在列表你将可以看到 ID 和 密钥，这两个数据用来生成桌子的二维码2、生成桌子二维码例如上面的ID为 308，密钥为 d3PiIY，那么现在去左侧菜单微信设置
1
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;
},相关推荐：
以上就是小程序实例：小程序实现折叠菜单的效果（附代码）的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
广告Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
693
收藏
