Mini-Programmbeispiel: Mini-Programm realisiert den Effekt des Klappmenüs (mit Code)

Der Inhalt dieses Artikels befasst sich mit kleinen Programmbeispielen: Kleine Programme realisieren die Wirkung von Faltmenüs (mit Code), was einen gewissen Referenzwert hat. Ich hoffe, es wird Ihnen hilfreich sein. .

Normalerweise sind Menüs in Menüs der ersten Ebene, Menüs der zweiten Ebene und Menüs der dritten Ebene unterteilt. Wir wissen, dass die Dom-Operation der Front-End-JS die Anzeige sehr gut steuern kann Ausblenden der Menüs der zweiten Ebene werde ich heute natürlich nicht auf den Menü-Falteffekt auf der Webseite einführen. Heute bin ich hier, um zu lernen, wie man das Klicken auf das Menü der ersten Ebene implementiert, um das Menü der zweiten Ebene im Applet anzuzeigen/auszublenden und neben dem Klicken auch andere Menüs zu implementieren in einem Menü, um es auszublenden.

Der Implementierungseffekt ist wie folgt:

Der Code lautet wie folgt:

.wxml-Datei

<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 ? &#39;/assets/icon_down2x.png&#39; : &#39;/assets/icon_up2x.png&#39;}}" 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>

Die .wxss-Datei lautet wie folgt:

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-Datei

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

Verwandte Empfehlungen:

Entwicklung kleiner Programme: Formularüberprüfung (Code)

Miniprogramm: Code zur Implementierung des Klick-Countdowns

Das obige ist der detaillierte Inhalt vonMini-Programmbeispiel: Mini-Programm realisiert den Effekt des Klappmenüs (mit Code). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!