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

时间：2023-07-01 14:05 阅读数：103 人阅读分类：网站建设

　　如何实现微信小程序自定义底部弹出框效果?相信很多人对于这个还是不是很了解，小编在这里为大家整理到一些资料关于微信小程序底部弹出框效果的代码，可以给大家参考一下。需要的朋友可以借鉴下哦!

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

　　html

　　CSS

　　modity_screen {

　　width: 100%;

　　height: 100%;

　　position: fixed;

　　top: 0;

　　left: 0;

　　background: #000;

　　opacity: 0.2;

　　overflow: hidden;

　　z-index: 1000;

　　color: #fff;

　　}

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

　　}

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