小程序菜单栏型弹出框

最新推荐文章于 2025-06-11 13:36:27 发布

原创最新推荐文章于 2025-06-11 13:36:27 发布 · 2.8k 阅读

4 ·

CC 4.0 BY-SA版权

emmmmmmm,这是我的第一个发的博客。希望对大家有点帮助。

这是用的小程序自带的动画事件来是我们的弹出框显示和

var animation;
Page({

  /**
   * 页面的初始数据
   */
  data: {
    animationData: {}
  },

  tanchu:function(){
    animation = wx.createAnimation({
      duration: 1000,
      timingFunction: 'ease',
    })

    this.animation = animation

    animation.translate(0,-153).step();
    this.setData({
      animationData: animation.export()
    })  
  },
  hideModal:function(){
    animation.translate(0, 0).step();
    this.setData({
      animationData: animation.export()
    })
  },
})

这部分是页面的，也没什么好说的了。

<!--a/a.wxml-->
<button bindtap='tanchu'>点击</button>
<view class='kuai' animation="{{animationData}}">
  <view class='les'>操作1</view>
  <view class='les'>操作2</view>
  <view class='les' bindtap='hideModal'>取消</view>
</view>

这是css其实没什么要写的。只要根据自己需求写样式，一开始先使用偏移将菜单栏移除试图区域。

.kuai{
  width: 100%;
  height: 300rpx;
  background-color: #888888;
  margin-bottom: -153px;
  position: fixed;
  bottom: 0;
}
.les{
  color: white;
  text-align: center;
  height: 100rpx;
  width: 100%;
  line-height: 100rpx;
  border-bottom:1rpx solid black; 
}

样式丑是丑了点，毕竟只是练下手QAQ。