菜单下拉动画 [即抄即用,拎包入住]
发布于 4 年前 作者 kangtao 2526 次浏览 来自 分享

大(巨)佬请回避哈哈。

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

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

// xml & js
点击下拉

  下拉item1
  下拉item2

-------------------------------------------------------
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](/user/keyframes) slidown {
  from {
    transform: translateY(-100%);  
  }

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

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

=_=

回到顶部