小程序菜单栏型弹出框

        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。


支持一下嘻嘻





评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值