小程序自定义modal弹窗封装实现

前言

小程序官方提供了 wx.showModal 方法，但样式比较固定，不能满足多元化需求，自定义势在必行~

老规矩先上图

点击某个按钮，弹出 modal框，里面的内容可以自定义，可以是简单的文字提示，也可以输入框等复杂布局。操作完点击取消或确定关闭 modal.

如何使用

将下面的 modal.wxml 、modal.wxss 、modal.js 、modal.json 四个文件复制到对应位置即可。

封装完之后调用起来也很简单，看看调用的代码吧

<modal show="{
  
  {showModal}}" height='60%' bindcancel="modalCancel" bindconfirm='modalConfirm'>
   <view class='modal-content'> 
    <formrow wx:for='{
  
  {goodsList}}' wx:key='{
  
  {index}}' title="{
  
  {item.name}}" placeholder='库存{
  
  {item.store}}' mode='input' rowpadding='10rpx' currentId="{