介绍

可以将showModal和hideModal内的方法交换从而改变弹出框方向，但要注意showModalStatus在两个函数内的值分别不变
本页面代码实现的是从上面弹出

wxml代码

 <!--wxml弹出框  --><view animation="{{animationData}}" class="commodity_attr_box" wx:if="{{showModalStatus}}"><view style="display: flex;flex-direction: column;background-color: green;">
<view>texy</view>
<view>saksg</view>
</view></view>
<view class="commodity_screen" bindtap="hideModal" wx:if="{{showModalStatus}}"></view>

Javacript代码

/**js*/
data:{showModalStatus:false,
},showModal: function (e) {// 显示遮罩层var animation = wx.createAnimation({duration: 200,timingFunction: "linear",delay: 0})this.animation = animationanimation.translateY(300).step()this.setData({animationData: animation.export(),})setTimeout(function () {animation.translateY(0).step()this.setData({animationData: animation.export(),showModalStatus: true})}.bind(this), 200)},//隐藏对话框hideModal: function () {// 隐藏遮罩层var animation = wx.createAnimation({duration: 200,timingFunction: "linear",delay: 0})this.animation = animationanimation.translateY(300).step()this.setData({animationData: animation.export(),showModalStatus: false})setTimeout(function () {animation.translateY(0).step()this.setData({animationData:animation.export()})}.bind(this), 200)}

wxss样式

/*wxss*/.commodity_attr_box {position: fixed;top: 0;width: 750rpx;background: white;transform: translateY(150%);transition: all 0.4s ease;z-index: 11;}.commodity_screen{/*position: fixed;top: 0;left: 0;right: 0;bottom: 0;z-index: 10;background: rgba(0, 0, 0, 0.7);display: none;*/width: 100%;height: 100%;position: fixed;top: 0;left: 0;background: #000;opacity: 0.2;overflow: hidden;z-index: 1;color: #fff;}

微信小程序简易实现模态框弹出框方法代码相关推荐

微信小程序页面跳转、弹出框
一.页面跳转页面跳转是微信小程序中使用较为频繁并且很重要的功能之一,页面跳转一般是通过点击按钮或者文本区域后需要进行的操作. 页面跳转中需要注意的点很多,我在这就介绍一些我在写项目过程中所遇到的一些 ...
微信小程序商品详情页底部弹出框（点击加入购物车或立即购买弹出）
项目实现效果如图项目效果实现思路: wxml页面设计好底部栏<加入购物车,立即购买> 绑定点击触发弹出层函数写好弹出窗效果写好原始页面暗化效果项目实现代码 1.wxml代码 (其中 ...
解决微信小程序IOS中使用picker弹出内容和手机软键盘重叠的问题
解决微信小程序IOS中使用picker弹出内容和手机软键盘重叠的问题项目需求: 一个信息提交页面:有input输入框,有picker选择器遇到的问题: 点击input输入框时,手机自动弹出键盘,但 ...
微信小程序拒绝授权后不弹出
在微信小程序中,如果用户在小程序中拒绝过授权,下次再请求时是不会再次弹出授权窗口的. 所以需要先判断授权状态,手动弹出授权提醒 const mapInfo = () => {return new ...
微信小程序点击按钮实现弹出模态框
效果如下图 wxml如下: <button bindtap="popup">弹出</button><view cl ...
夜神模拟器抓包微信小程序（进入浏览器，弹出安全警告（安全证书有问题解决方法）
1.声明:本文仅限学习研究讨论,切忌做非法乱纪之事! 即使按照其它教程的安装证书,也只是把证书安装到了用户下面,然而安卓高版本(7.0)之后呢,app可以只信任指定证书和系统内置的证书,后续用户安装的 ...
微信小程序之自定义模态弹窗（带动画）实例
代码地址如下: http://www.demodashi.com/demo/13991.html 一.前期准备工作软件环境:微信开发者工具官方下载地址:https://mp.weixin.qq.c ...
微信小程序-简易计算器
代码地址如下: http://www.demodashi.com/demo/14210.html 一.前期准备工作软件环境:微信开发者工具官方下载地址:https://mp.weixin.qq.c ...
微信小程序 css边框阴影,微信小程序|CSS的内边距和圆框
本文首发于微信公众号: "算法与编程之美",欢迎关注,及时了解更多此系列文章. 问题描述在制作小程序的时候会经常用到浮动来设计各种组件的排版,微信小程序对排版的要求很高. 光有浮 ...

微信小程序简易实现模态框弹出框方法代码

方法如下

介绍

wxml代码

Javacript代码

wxss样式

微信小程序简易实现模态框弹出框方法代码相关推荐

最新文章

热门文章