JS中微信小程序自定义底部弹出框

时间: 作者:已示

  

[微信小程序底部弹出框]JS中微信小程序自定义底部弹出框

  

实现微信小程序底部弹出框效果,代码分为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)  }
  
  

  

(责任编辑:admin)

推荐图片Related

相关文章Related

查看更多热门新闻


首页 | js代码 | jQuery特效 | 其他代码 | 关于我们

Copyright © 2010-2019 菲娱国际平台 版权所有

系统要求:本站自适应各终端浏览器分辨率

请使用Google、Firefox、IE9、百度浏览器登录网站

网站地图 | RSS订阅 | 菲娱国际平台