大发快三计划软件:微信小程序自定义底部弹出框

北京快三走势图 www.mxld9.cn  更新时间:2018年07月09日 16:15:44   作者:Mr_Sparta   我要评论

这篇文章主要为大家详细介绍了微信小程序自定义底部弹出框,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

本文实例为大家分享了微信小程序底部弹出框展示的具体代码,供大家参考,具体内容如下

效果图:

 

html

<view class="commodity_screen" bindtap="hideModal" wx:if="{{showModalStatus}}"></view>
<view animation="{{animationData}}" class="commodity_attr_box" wx:if="{{showModalStatus}}"></view>

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)
 }

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

相关文章

最新评论

  • 中共中央直属机关党校 2019-04-21
  • 全国自由搏击锦标赛落下帷幕 2019-04-20
  • 近来人民网强国社区的评论少了很多,那是因为人们反映事实存在的问题,绝大多数都是说了等于白说,于是渐渐地失望了,渐渐地越来越多的人“算了,不说了!” 2019-04-19
  • 热巴窦骁携手演绎经典神话 2019-04-19
  • 神奇!沈阳现3D稻田画 2019-04-18
  • 中国和巴基斯坦将合拍电影《天路》 2019-04-18
  • 电视剧抱团出海 又有哪些作品走出了国门 2019-04-17
  • 谈判与加关税的不同在于,后者没有给小左唱赞歌的机会 2019-04-16
  • 全世界人民都要顺应人类社会发展规律,不断扩大社会财富公有制的范围,不断缩小社会财富私有制的范围,以便最终消灭社会财富私有制,建立共产主义社会财富公有制。 2019-04-15
  • 新时代·新征程十九大精神在基层---“各地聚焦”--湖南频道--人民网 2019-04-14
  • 首部由中国人翻译的120回《三国演义》问世 2019-04-14
  • 2022年冬奥会筹备进行时 2019-04-13
  • 牙膏的10个超实用功能 速收藏 2019-04-13
  • 新华保险荆州中支助力首届荆楚文化旅游节开幕 2019-04-12
  • 未来十天 山西以对流性天气为主 多阵性降水 2019-04-12
  • 708| 70| 296| 834| 589| 34| 688| 461| 218| 222|