北京快三开奖记录:微信小程序自定义底部弹出框

北京快三走势图 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)
 }

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

相关文章

最新评论

  • 地方领导留言板十周年研讨会暨2016人民网网民留言办理工作会议 2019-02-21
  • 租赁平台上线 租房服务改善 2019-02-20
  • 天津一汽骏派A50正式上市 售价5.59万 2019-02-20
  • 94岁老太病倒 家人拒送医直接换寿衣她活到头了 2019-02-19
  • 紫光阁中共中央国家机关工作委员会 2019-02-18
  • 不是“不尊重公投”,而是不尊重人类社会发展规律就是不尊重人类。 2019-02-18
  • 学习宣传贯彻习近平新时代中国特色社会主义思想系列研讨会第三场研讨会发言摘编 2019-02-17
  • 新能源汽车纳入蚌埠市级政府集中采购目录 2019-02-16
  • 北京:走进高考阅卷现场 2019-02-15
  • 环球 —频道 春城壹网 七彩云南 一网天下 2019-02-15
  • 合肥市庐阳中学启动“教师成长工程” 2019-02-14
  • 美国八旬教授 太原免费教英语 2019-02-14
  • 安徽省投资集团控股有限公司 2019-02-13
  • 新疆维吾尔自治区交通运输厅 2019-02-12
  • 中国对外投资连续7个月增长 “一带一路”相关国家投资成亮点 2019-02-12
  • 945| 987| 553| 431| 910| 105| 560| 764| 311| 505|