小程序实例:小程序实现折叠菜单的效果(附代码)

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

通常,菜单都有一级菜单二级、三级菜单之分,我们知道前端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文件如下:

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;
    },

相关

收藏 (0) 打赏

感谢您的支持,我会继续努力的!

打开微信/支付宝扫一扫,即可进行扫码打赏哦,分享从这里开始,精彩与您同在
点赞 (0)

1. 本站所有资源来源于用户上传和网络,因此不包含技术服务请大家谅解!如有侵权请邮件联系客服![email protected] 2. 本站不保证所提供下载的资源的准确性、安全性和完整性,资源仅供下载学习之用!如有链接无法下载、失效或广告,请联系客服处理,有奖励! 3. 您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容资源!如用于商业或者非法用途,与本站无关,一切后果请用户自负! 4. 如果您也有好的资源或教程,您可以投稿发布,成功分享后有站币奖励和额外收入!

立业阁 微信小程序教程 小程序实例:小程序实现折叠菜单的效果(附代码) https://www.liyege.cn/xcxslxcxsxzdcddxgfdm.html

常见问题
  • 本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。
查看详情
  • 最常见的情况是下载不完整, 可对比下载完压缩包的与网盘上的容量,若小于网盘提示的容量则是这个原因。这是浏览器下载的bug,建议用百度网盘
查看详情

相关文章