小程序_底部弹出层

发布时间：2020-12-14 03:49:54 所属栏目：大数据来源：网络整理

导读：wxml： view bindtap=‘showModal‘点击弹出/view view class="commodity_screen" bindtap="hideModal" wx:if="{{showModalStatus}}"/view view animation="{{animationData}}" class="commodity_attr_box" wx:if="{{showModalStatus}}" text我是弹出层的内

wxml：

<text>我是弹出层的内容</text>

</view>

wxss：

.commodity_screen {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background: #000;
  opacity: 0.5;
  overflow: hidden;
  z-index: 9;
  color: #fff;
}

.commodity_attr_box {
  width: 100%;
  overflow: hidden;
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 10;
  background: #fff;
  padding-top: 20rpx;
  height: 300px;
}
.commodity_attr_box{
  text-align: center;
  padding-top: 100rpx;
}

js：

Page({
  data: {
    showModalStatus: false,animationData: ‘‘
  },onLoad: function () {
   
  },showModal: function () {
    // 显示遮罩层
    var animation = wx.createAnimation({
      duration: 200,timingFunction: "ease-in-out",delay: 0
    })
    this.animation = animation
    animation.translateY(500).step()
    this.setData({
      animationData: animation.export(),showModalStatus: true
    })
    setTimeout(function () {
      animation.translateY(0).step()
      this.setData({
        animationData: animation.export()
      })
    }.bind(this),200)
  },hideModal: function () {
    this.setData({
      showModalStatus: false,})
  
  }
})

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!