分类：微信小程序弹出框

2020
12-22

微信小程序实现modal弹出框遮罩层组件（可带文本框）

modal弹出框遮罩层可实现提示信息、验证码等功能然而在官方文档已经删除了modal的页面，说要废弃modal就个人而言modal组件无法被wx.showModal完全替代。大家都知道小程序的wxml的组件可以通过改变js的值实现重新渲染，而接口是无法实现的有同感的也不止博主一个人官方18-5-13的建议要实现此类功能也是用modal属性说下遮罩层实现，通过改变modal的hidden属性来控制是否显示，通过监听confirm方法来确认提交，通过bindinput来监听mo... 继续阅读 >

2020
11-19

微信小程序自定义底部弹出框功能

本文实例为大家分享了微信小程序自定义底部弹出框的具体代码，供大家参考，具体内容如下实现这么一个功能，点击选项进行选择，效果是从底部弹出选项框（带滑出动画），选择了某项或者点击其他地方，隐藏（带滑出动画）。效果图如下：可适用于任何场景，如普通选项（如图）或者类似商城小程序选择商品属性的弹出框。只需要把内容替换自己需要的即可。1.wxml代码<viewclass="wrap"><viewbindtap="showModal"><text>{{value}}</t... 继续阅读 >

2020
11-19

微信小程序实现底部弹出框

微信小程序的底部弹出框，供大家参考，具体内容如下wxml<!--弹出框start--><viewclass="dialog_screen"bindtap="hideModal"wx:if="{{showModalStatus}}"></view><viewanimation="{{animationData}}"class="dialog_attr_box"wx:if="{{showModalStatus}}"><viewstyle='background:white;position:relative;overflow:hidden;'><viewclass='dialog_title'>选择系列</view><viewwx:for="{{list}}"wx:key="name"class... 继续阅读 >

2020
11-17

微信小程序自定义底部弹出框动画

微信小程序之自定义底部弹出框动画，供大家参考，具体内容如下最近做小程序时，会经常用到各种弹框。直接做显示和隐藏虽然也能达到效果，但是体验性太差，也比较简单粗暴。想要美美地玩，添加点动画还是非常有必要的。下面做一个底部上滑的弹框。wxml<viewclass="modalsmodals-bottom-dialog"hidden="{{hideModal}}"><viewclass="modals-cancel"bindtap="hideModal"></view><viewclass="bottom-dialog-bodybottom-pos"... 继续阅读 >