评论

菜单下拉动画 [即抄即用,拎包入住]

最简单的菜单下拉实例,不掺杂私货

大(巨)佬请回避哈哈。

来社区这么久了,天天问问题,没写过东西很不好意思。欢迎各种交流(回答我问题)啊嘻嘻。

我看站内外分享的小程序菜单下拉例子不是很直接。这里分享一下最简单代码,方便在社区找文章的萌新。

<view class='chsBar' bindtap='chsBarOrNot'>点击下拉</view>
<view class='itemBox' wx:if='{{chsBarOrNot}}'>
<view class='item1'>下拉item1<view>
<view class='item1'>下拉item2<view>
</view>
---------------------------------------------------------------------------
data:{
    chsBarOrNot:false
  },
chsBar(){    
    this.setData({
      chsBarOrNot:!this.data.chsBarOrNot
    })
  }


// css
.chsBar {
  position: fixed;
  top0;
  width100%;
  height100rpx;
  border1rpx solid black;
  backgroud: white
}

.itemBox {
  position: fixed;
  top100rpx;
  width100%;
}

.item1 {
  width100%;
  height100rpx;
  border1rpx solid black;
}

@keyframes slidown {
  from {
    transform: translateY(-100%);  
  }

  to {
    transform: translateY(0%);
  }
}

.slidown{
  display: block;
  animation: slidown 0.3s ease;
}


=_=

最后一次编辑于  2020-12-09  
点赞 2
收藏
评论
登录 后发表内容