如何实现微信小程序自定义底部弹出层

2017-08-30 2492

       实现微信小程序底部弹出框效果,代码分为html,css和js两部分,具体代码详情大家参考下本文。

  html

  CSS

  .commodity_screen {

  width: 100%;

  height: 100%;

  position: fixed;

  top: 0;

  left: 0;

  background: #000;

  opacity: 0.2;

  overflow: hidden;

  z-index: 1000;

  color: #fff;

  }

  .commodity_attr_box {

  width: 100%;

  overflow: hidden;

  position: fixed;

  bottom: 0;

  left: 0;

  z-index: 2000;

  background: #fff;

  padding-top: 20rpx;

  }

  JS动画样式

  showModal: function () {

  // 显示遮罩层

  var animation = wx.createAnimation({

  duration: 200,

  timingFunction: "linear",

  delay: 0

  })

  this.animation = animation

  animation.translateY(300).step()

  this.setData({

  animationData: animation.export(),

  showModalStatus: true

  })

  setTimeout(function () {

  animation.translateY(0).step()

  this.setData({

  animationData: animation.export()

  })

  }.bind(this), 200)

  },

  hideModal: function () {

  // 隐藏遮罩层

  var animation = wx.createAnimation({

  duration: 200,

  timingFunction: "linear",

  delay: 0

  })

  this.animation = animation

  animation.translateY(300).step()

  this.setData({

  animationData: animation.export(),

  })

  setTimeout(function () {

  animation.translateY(0).step()

  this.setData({

  animationData: animation.export(),

  showModalStatus: false

  })

  }.bind(this), 200)

  }

  以上就是小编整理到的资料了,微信小程序自从使用以来也是受到了很多商家的青睐,希望大家也可以借此机会来实现自己的梦想。


tel-bg.jpg

Online 通过QQ在线与我们沟通,或者直接拨打热线电话:

023-62823078