第一次知道小程序，很多功能都让人感到新鲜。 因为多个页面需要弹窗，所以所有的页面都可以调用，因为考虑是否可以像Android一样封装方法。 记录如下。
封装模块dialog.js
//component/dialog/dialog.js component ({/* * *组件属性列表(/properties: ) content: ) type:string cancel text : { type : string，}，/** *组件的初始数据*/data : { showdialog 3360 false }，/* *组件的方法列表*。 * triggerEvent是事件*/_cancel () (/触发回调取消的this.triggerevent('cancel '，_confirm ) ) /成功的调用
在showDialog控件中，view class=' mask ' style=' display : { { showdialog？ }的' :'none'}}； ' view class=' mask-window ' view class=' mask-top ' { { content } }/view view class=' mask-bottom '//从bindtap到dialog.js中的所有方法view class=' cancel ' bind tap=' _ cancel ' { { cancel text } }/viewviewclass=' confirm '
. mask{ width: 100%； height: 100%； 定位：固定； top: 0； left: 0； background : rgba (0，0，0，3)； z-index: 10； display :闪存； flex-direction :列； 内容：中心； align-items3360中心；/*显示： none； //. mask-window { display : flex； flex-direction :列； 内容：中心； align-items3360中心； background:白色； border-radius: 20rpx； }.mask-top{ height: 120rpx； width: 500rpx； line-height: 120rpx； 文本照明3360中心； border-bottom : 2r px solid # CCC； }.mask-bottom{ display: flex； flex-direction: row； width: 100%； }.mask-bottom.confirm { color : white； background: #FF2E2E； border-left: 2rpx solid #ccc； border-radius: 0 0 20rpx 0； }.mask-bottom .cancel， mask-bottom.confirm { height 3360100 rpx； line-height: 100rpx； flex: 1； 文本照明3360中心； } dialog.json文件，设置
//设置为“component': true，“usingComponents': {}}此代码包已完成。 等待呼叫。 (以page页面下的advice页面为例。 ) )
advice.json部署模块
可在{ ' using components ' : } ' dialog ' : '/component/dialog/dialog ' } advice.wxml布局文件中使用
buttonbindtap=' handle submit ' class=' BTN '新资产项目/buttondialogid=' dialog ' confirm text='确定' cancelText='取消' conttent cancel和confirm与dialog.js中事件分发的名称一致，bind 333
advice.js文件处理逻辑
//显示弹匣handle submit : function ({ constdialogcontent='是否删除？' ； this.setdata (诊断内容：诊断内容) (this.dialog.show )；//取消弹出窗口handleCancelDialog () this.dialog.hide )、//确认弹出窗口handleConfirmDialog ) ) this.dialog.hide )