兴山县网站建站-微信小程序实战(十五)

2021-04-26 18:50| 发布者: | 查看: |

--------

兴山县网站建站

-------

一、要求表明

现阶段新项目中的弹框用的都是 wx.showModal(),有以下几点更新改造要求:

启用弹框的方法尽可能与 showModal 维持一致,防止过大修改现阶段新项目中弹框分为两类,二次确定框和取得成功提醒框,期待能简易地启用这两种弹框
二、要求完成

2.1 完成思路 明确组件入参,以便降低修改,主要参数名与 showModal 的主要参数名维持一致开启弹框方法:为弹框组件界定一个 showDialog 涵数,涵数接受一个主要参数目标,用于原始化,与 showModal 的启用方法维持一致2.2 组件设计方案 dialog.wxml 文档:
 view wx:if="{{showDialog}}" 
 view /view 
 view 
 view 
 view {{title}} /view 
 view {{content}} /view 
 !-- 二次确定框按钮款式 -- 
 view wx:if="{{type === 'confirm'}}" 
 button bindtap="handleCancel" {{cancelText}} /button 
 button bindtap="handleConfirm" {{confirmText}} /button 
 /view 
 !-- 取得成功提醒框按钮款式 -- 
 view wx:if="{{type === 'success'}}" 
 button bindtap="handleConfirm" {{confirmText}} /button 
 /view 
 /view 
 /view 
 /view 
拷贝编码
dialog.js 文档:
data: {
 // 原始化入参
 showDialog: false,
 title: '',
 content: '',
 type: '',
 confirmText: '',
 cancelText: '',
 success: null,
// 原始化并开启弹框方式
showDialog(params) {
 this.setData({
 title: params.title ? params.title : '提醒',
 content: params.content ? params.content : '',
 type: params.type ? params.type : 'confirm',
 confirmText: params.confirmText ? params.confirmText : '明确',
 cancelText: params.cancelText ? params.cancelText : '撤销',
 success: ess ? ess : null,
 // 开启弹框
 showDialog: true
handleConfirm() {
 if (this.ess typeof this.ess === 'function') {
 // 点一下明确,ess 是涵数,则实行涵数,并传入主要参数 {confirm: true}
 this.ess({
 confirm: true
 // ess 不存在或并不是涵数,则只关掉弹框
 this.setData({
 showDialog: false
handleCancel() {
 if (this.ess typeof this.ess === 'function') {
 // 点一下撤销,ess 是涵数,则实行涵数,并传入主要参数 {cancel: true}
 this.ess({
 cancel: true
 // ess 不存在或并不是涵数,则只关掉弹框
 this.setData({
 showDialog: false
拷贝编码
2.3 组件启用 在网页页面加上弹框组件: page.json 文档:
{
 "component": true,
 "usingComponents": {
 "dialog": "/components/dialog/dialog"
拷贝编码

page.wxml 文档:

 dialog /dialog 
拷贝编码
在网页页面的生命周期涵数中获得组件 dom: page.js 文档:
data: {
 dialog: null
onShow() {
 this.setData({
 dialog: this.selectComponent('#dialog')
拷贝编码
需要提醒时开启弹框: page.js 文档:
// 二次确定框配备
this.data.dialog.showDialog({
 title: '提醒',
 content: '明确要开启弹框吗?',
 success: res = {
 if (res.confirm) {
 console.log('明确开启弹框')
 } else if (res.cancel) {
 console.log('不开启弹框')
拷贝编码
// 取得成功提醒框配备
this.data.dialog.showDialog({
 title: '提醒',
 content: '您已取得成功开启弹框',
 type: 'success',
 confirmText: '我了解啦',
 success: res = {
 if (res.confirm) {
 console.log('开启弹框')
拷贝编码
---------

兴山县网站建站

------------
<
>

 
QQ在线咨询
售前咨询热线
18720358503
售后服务热线
18720358503
返回顶部