微信小程序开发中官方自带的wx.showModal,这个弹窗API有时候并不能满足我们的弹窗效果,所以往往需要自定义modal组件。下面我们进行一个自定义modal弹窗组件的开发,并进行组件的引用,组件可自定义底部是一个还是两个按钮。效果如下。
首先我们可以在跟目录下创建一个components文件夹存放所有的组件。新建一个modal文件夹,下面新建modal.js、modal.json、modal.wxml、modal.wxss四个文件。
modal.wxml布局文件:
<view class='modal-mask' wx:if='{{show}}' bindtap='clickMask'> <view class='modal-content'> <scroll-view scroll-y class='main-content'> <slot></slot> </scroll-view> <view class='modal-footer'> <view wx:if='{{!single}}' class='cancel-btn' bindtap='cancel'>取消</view> <view class='confirm-btn' bindtap='confirm'>确定 </view> </view> </view> </view>
modal.wxml文件中的一些说明:
show变量控制弹窗显示或隐藏状态,clickMask是点击遮罩层的事件,可控制点击遮罩是否隐藏modal弹窗,内容中用scroll-view是为了满足当内容过多时一页显示不全时可以上下滚动浏览的效果(如果内容很少直接用view标签也可以),scroll-y表示允许纵向滚动(如果不需要可以删掉)。****为组件引用时的自定义内容替换掉就好了。single变量控制底部按钮是一个还是两个。cancel点击取消绑定的事件,confirm点击确定绑定的事件。
modal.json文件内容:
{ "component": true, "usingComponents": {} }
modal.json文件内容说明:
“component”: true, 表示这是一个组件文件,usingComponents用于引用别的组件,这里没引用其他组件空{}就行。
modal.wxss 文件样式
/* components/modal/modal.wxss */ /*遮罩层*/ .modal-mask{ display: flex; justify-content: center; align-items: center; position: fixed; left: 0; right: 0; top: 0; bottom: 0; background-color: rgba(0,0,0,0.5); z-index: 999; } /*遮罩内容*/ .modal-content{ display: flex; flex-direction: column; width: 80%; background-color: #fff; border-radius: 10rpx; padding: 20rpx; text-align: center; } /*中间内容*/ .main-content{ flex: 1; height: 100%; overflow-y: hidden; max-height: 80vh; /* 内容高度最高80vh 以免内容太多溢出*/ } /*底部按钮*/ .modal-footer{ display: flex; flex-direction: row; height: 80rpx; line-height: 80rpx; border-top: 2rpx solid #D2D3D5; margin-top: 30rpx; } .cancel-btn, .confirm-btn{ flex: 1; height: 100rpx; line-height: 100rpx; text-align: center; font-size: 32rpx; } .cancel-btn{ color: #000; border-right: 2rpx solid #D2D3D5; } .confirm-btn { color: #09BA07 }
以上样式布局根据个人需求自行修改调整即可。
modal.js文件内容
Component({ /** * 组件的属性列表 */ properties: { //是否显示modal弹窗 show: { type: Boolean, value: false }, //控制底部是一个按钮还是两个按钮,默认两个 single: { type: Boolean, value: false } }, /** * 组件的初始数据 */ data: { }, /** * 组件的方法列表 */ methods: { // 点击modal的回调函数 clickMask() { // 点击modal背景关闭遮罩层,如果不需要注释掉即可 this.setData({show: false}) }, // 点击取消按钮的回调函数 cancel() { this.setData({ show: false }) this.triggerEvent('cancel') //triggerEvent触发事件 }, // 点击确定按钮的回调函数 confirm() { this.setData({ show: false }) this.triggerEvent('confirm') } } })
到此为止,组件已经定义好了。下面我们可以在其他页面引用这个组件了。比如我在home这个页面引用这个自定义modal弹窗。
首先在home.json文件中引用组件:
home.json文件内容如下:
{ "usingComponents": { "modalView": "../../components/modal/modal" } }
这里modalView为modal弹窗的自定义标签,可随便定义。
接着,在home.wxml中将modalView标签添加到你想要显示的位置。例如:
home.wxml文件内容如下
<view> <!-- modal弹窗--> <modalView show="{{showModal}}" bindcancel="modalCancel" bindconfirm='modalConfirm' single='{{single}}'> <view class='modal-content'> <scroll-view scroll-y class='main-content'> <view>这里面可替换成你想显示的其他内容</view> <view>这里面可替换成你想显示的其他内容</view> <text>这里面可替换成你想显示的其他内容</text> </scroll-view> </view> </modalView> </view>
home.js文件内容如下
Page({ /** * 页面的初始数据 */ data: { showModal: true, // 显示modal弹窗 single: false // false 只显示一个按钮,如果想显示两个改为true即可 }, /** * 生命周期函数--监听页面加载 */ onLoad: function (options) { }, // 点击取消按钮的回调函数 modalCancel(e) { // 这里面处理点击取消按钮业务逻辑 console.log('点击了取消') }, // 点击确定按钮的回调函数 modalConfirm(e) { // 这里面处理点击确定按钮业务逻辑 console.log('点击了确定') } })
在js文件中定义showModal控制modal弹窗的显示状态,single设置为false 表示只显示一个按钮
如果想显示两个按钮将false改为true即可,如下效果:
两个函数modalCancel和modalConfirm用于处理点击取消按钮业务逻辑
和处理点击确定按钮业务逻辑。比如我这里点击了确认按钮可看到控制台打印出了“点击了确定”。
好了,微信小程序一个自定义modal弹窗的组件封装和引用方法就这么搞定了O(∩_∩)O~