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

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

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

以上所述是小编给大家介绍的JS中微信小程序自定义底部弹出框，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！

# 微信小程序底部弹出框  # 微信小程序实现弹出框提交信息  # 微信小程序自定义可滚动的弹出框  # 微信小程序自定义底部弹出框功能  # 微信小程序实现底部弹出框  # 微信小程序自定义底部弹出框动画  # 微信小程序商品详情页底部弹出框  # 使用微信小程序开发弹出框应用实例详解  # 微信小程序自定义底部弹出框  # 微信小程序商品详情页的底部弹出框效果  # 微信小程序实现底部弹出框封装  # 弹出  # 小编  # 在此  # 给大家  # 自定义  # 所述  # 两部分  # 给我留言  # 感谢大家  # 疑问请  # 有任何  # width  # CSS  # animation  # gt  # commodity_attr_box  # animationData  # height  # background  # opacity 

相关文章： 定制建站流程解析：需求评估与SEO优化功能开发指南  如何在建站主机中优化服务器配置？  c# await 一个已经完成的Task会发生什么  合肥做个网站多少钱,合肥本地有没有比较靠谱的交友平台？  历史网站制作软件,华为如何找回被删除的网站？  建站之星如何保障用户数据免受黑客入侵？  完全自定义免费建站平台：主题模板在线生成一站式服务  如何快速生成可下载的建站源码工具？  如何设计高效校园网站？  如何在万网自助建站中设置域名及备案？  宁波自助建站系统如何快速打造专业企业网站？  电脑免费海报制作网站推荐,招聘海报哪个网站多？  建站之星客服服务时间及联系方式如何？  矢量图网站制作软件,用千图网的一张矢量图做公司app首页，该网站并未说明版权等问题，这样做算不算侵权？应该如何解决？  免费制作统计图的网站有哪些,如何看待现如今年轻人买房难的情况？  如何选择适合PHP云建站的开源框架？  如何确保FTP站点访问权限与数据传输安全？  linux top下的 minerd 木马清除方法  如何选择长沙网站建站模板？H5响应式与品牌定制哪个更优？  IOS倒计时设置UIButton标题title的抖动问题  高性能网站服务器部署指南：稳定运行与安全配置优化方案  杭州银行网站设计制作流程,杭州银行怎么开通认证方式？  Python文件管理规范_工程实践说明【指导】  C++用Dijkstra(迪杰斯特拉)算法求最短路径  建站主机SSH密钥生成步骤及常见问题解答？  如何在IIS中新建站点并配置端口与物理路径？  5种Android数据存储方式汇总  如何通过WDCP绑定主域名及创建子域名站点？  建站之星如何配置系统实现高效建站？  常州自助建站工具推荐：低成本搭建与模板选择技巧  ,有什么在线背英语单词效率比较高的网站？  北京建设网站制作公司,北京古代建筑博物馆预约官网？  如何在阿里云完成域名注册与建站？  免费视频制作网站,更新又快又好的免费电影网站？  如何通过主机屋免费建站教程十分钟搭建网站？  建站之星如何一键生成手机站？  如何在香港免费服务器上快速搭建网站？  做企业网站制作流程,企业网站制作基本流程有哪些？  网站建设制作需要多少钱费用,自己做一个网站要多少钱，模板一般多少钱？  网站网页制作专业公司,怎样制作自己的网页？  西安制作网站公司有哪些,西安货运司机用的最多的app或者网站是什么？  平台云上自主建站：模板化设计与智能工具打造高效网站  早安海报制作网站推荐大全,企业早安海报怎么每天更换？  如何快速搭建高效可靠的建站解决方案？  官网自助建站平台指南：在线制作、快速建站与模板选择全解析  网站插件制作软件免费下载,网页视频怎么下到本地插件？  如何选择高效可靠的多用户建站源码资源？  建站之星ASP如何实现CMS高效搭建与安全管理？  logo在线制作免费网站在线制作好吗,DW网页制作时，如何在网页标题前加上logo？  中山网站制作网页,中山新生登记系统登记流程？