258资源分享网

由于项目开发需求，坑爹的小程序没有自定义dialog(类似饿了么组件那种)。于是百度了下思路，开发了一个。

title 标题 cancelText 取消文本 (默认文本为取消） confirmText 确认文本（默认文本为确定） animated 是否动画 （默认为是） modalSize 模态框大小(默认md) animationOption 动画事件(默认300s)

接下来分享下实现步骤吧...主要的概念就是想把自定义的部分通过插槽来接收。

1、创建好components组件且命好名字。 小tips:在微信开发工具内创建方便点它会自动帮你把相关文件配好。

创建组件且命名

2、写好相关布局及样式。

dialog.wxss

/** 模态 **/ .modal{ position: fixed; top: 0rpx; left: 0rpx; right: 0rpx; bottom: 0rpx; width: 100%; height: 100%; z-index: 100; } .modal-mask{ position: absolute; width: 100%; height: 100%; z-index: 97; background-color: rgba(0,0,0,0.30); } .modal-layer-sm{ width: 60%; transform : translate3d(-50%,-50%,0); left : 50%; } .modal-layer-md{ width: 80%; transform : translate3d(-50%,-50%,0); left : 50%; } .modal-layer-full{ width: 100%; left: 0; } .modal-layer{ position: absolute; background: transparent; top: 50%; display: flex; flex-direction: column; z-index: 98; box-shadow: 0 4rpx 14rpx rgba(0,0,0,.4); } .modal-header{ background: #fff; color: #333; padding: 20rpx; font-size: 30rpx; text-align: center; border-top-left-radius: 10rpx; border-top-right-radius: 10rpx; } .modal-body{ flex: 1; padding: 0 40px 40rpx; background: #ffffff; } .modal-footer{ background: #ffffff; flex-direction: row; display: flex; align-items: center; width: 100%; border-top : 1rpx solid #eee; border-bottom-left-radius: 10rpx; border-bottom-right-radius: 10rpx; } .modal-close{ color: #fff; font-size: 48rpx; position: absolute; right: 40rpx; top: 0; z-index: 98; } .btn{ flex: 1; text-align: center; font-size: 30rpx; color:#666; padding: 19rpx 5rpx; } .btn:first-child{ border-right: 1px solid #eee; } .btn-primary{ color: #009887; }

dialog.wxml

<view animation="{{animationData}}" hidden="{{!isShow}}" class='modal'> <view data-type="mask" catchtap='hideModal' class='modal-mask' ></view> <view class='modal-layer modal-layer-radius {{modalSize == "sm" ? " modal-layer-sm" : " modal-layer-md" }} ' > <!-- 头部 --> <view class='modal-header'> <text>{{title}}</text> </view> <!-- 内容区域 --> <view class='modal-body'> <slot></slot> </view> <view class='modal-footer'> <text catchtap='_cancelModal' class='btn btn-default'>{{cancelText}}</text> <text catchtap='_confirmModal' class='btn btn-primary'>{{confirmText}}</text> </view> </view> </view> dialog.js // common/component/modal.js Component({ /** * 组件的属性列表 */ properties: { title : { type : String, value : '这里是默认标题' }, cancelText : { type: String, value: '取消' }, confirmText : { type: String, value: '确定' }, backdrop: { type: Boolean, value: true }, animated : { type: Boolean, value: true }, //模态框大小(sm md) modalSize : { type: String, value: "md" }, //动画时间(默认300) animationOption : { type : Object, value : { duration : 300 } }, }, /** * 组件的初始数据 */ data: { isShow:false, animation : '' }, ready: function () { this.animation = wx.createAnimation({ duration: this.data.animationOption.duration, timingFunction: "linear", delay: 0 }); }, /** * 组件的方法列表 */ methods: { //modal隐藏 hideModal : function(e){ if(e){ let type = e.currentTarget.dataset.type; if (type == 'mask' && !this.data.backdrop) { return; } } if (this.data.isShow) this._toggleModal(); }, //modal显示 showModal: function(){ if (!this.data.isShow) { this._toggleModal(); } }, //切换modal的显示还是隐藏 _toggleModal:function(){ if(!this.data.animated){ this.setData({ isShow: !this.data.isShow }) } else{ let isShow = !this.data.isShow; this._executeAnimation(isShow); } }, //根据需求执行动画 _executeAnimation: function (isShow) { let animation = this.animation; if (isShow) { animation.opacity(0).step(); this.setData({ animationData: animation.export(), isShow: true }) setTimeout(function () { animation.opacity(1).step() this.setData({ animationData: animation.export() }) }.bind(this), 50) } else { animation.opacity(0).step() this.setData({ animationData: animation.export() }) setTimeout(function () { this.setData({ isShow: isShow }) }.bind(this), this.data.animationOption.duration) } }, //取消事件 向外部page 发送事件通知 _cancelModal : function(){ this.hideModal(); this.triggerEvent("cancelEvent"); }, //确认事件 _confirmModal : function(){ this.triggerEvent("confirmEvent"); } } })

核心都在这叻~注释都有哦。
分析下怎么做到自定义弹层吧。

slot图