原文链接 前言 小程序官方提供了 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= "{{index}}" bindinput= 'goodsInput' ></formrow> </view> </modal> 复制代码 在 modal 中定义了 slot ,所以可以将需要展示的任何布局包裹在 modal 中。 上面的代码简化一下就是 <modal show= "{{showModal}}" height= '60%' bindcancel= "modalCancel" bindconfirm= 'modalConfirm' > ...