微信小程序自定义模态弹窗组件详解


Posted in Javascript onDecember 24, 2019

小程序自带一个showModal弹窗,调用很简单,但是限制很多,title有字数限制,中间的content也只能放文字不能放组件,所以作为一个前端碰到那种连续好几个跟微信自带的模态弹窗风格一模一样,但是功能又花里胡哨的UI稿,就不能忍受频繁的复制粘贴了。自己写了一个组件,虽然调用起来比微信自带的麻烦一点,但是还蛮实用的。

微信小程序自定义模态弹窗组件详解

微信小程序自定义模态弹窗组件详解

微信小程序自定义模态弹窗组件详解

效果大概长这样。

上代码:

wxml:

<!-- 自定义模态弹窗 -->
<view class="modalDIY" wx:if="{{showModal}}">
 <view class="bg">
 <view class="modalTitle">{{title}}</view>
 <view class="modalContent">
  <view>{{content}}</view>
  <slot></slot>
 </view>
 <view class="modalOperate">
  <view bindtap="_cancel" hidden="{{!showCancel}}" style="color:{{cancelColor}}" class="cancelBtn">{{cancelText}}</view>
  <view bindtap="_comfirm" class="comfirmBtn" style="color:{{confirmColor}}">{{confirmText}}</view>
 </view>
 </view>
</view>

js:

const regeneratorRuntime = require('../../dependence/generator-runtime.js'); //这是一个es6转es5的js
Component({
 properties: {
 // 这里定义了innerText属性,属性值可以在组件使用时指定
 },
 data: {
 showModal: false,
 title: '温馨提示',
 content: '',
 showCancel: true,
 cancelColor: '#3a3a3a',
 cancelText: '取消',
 confirmColor: '#00800',
 confirmText: '确认',
 comfirm() { },
 cancel() { }
 },
 methods: {
 // 外部方法调用
 showModal(params) {
  this.setData({
  showModal: true,
  title: params.title || '温馨提示', //title
  content: params.content || '',//中间内容
  showCancel: params.showCancel == undefined ? true : params.showCancel,//是否显示左侧
  cancelColor: params.cancelColor || '#3a3a3a',//取消按钮文字颜色
  cancelText: params.cancelText || '取消',//左侧按钮文字
  confirmColor: params.confirmColor || '#09BA07',//右侧按钮文字颜色
  confirmText: params.confirmText || '确认',//右侧按钮文字
  /* 回调函数 */
  comfirm: params.comfirm || function(){},//点击确认(右侧按钮)
  cancel: params.cancel || function(){}//点击取消(左侧按钮)
  })
 },
 // 点击确定
 _comfirm() {
  this.setData({
  showModal: false
  },()=>{
  this.data.comfirm();
  })
 },
 // 点击取消
 _cancel() {
  this.setData({
  showModal: false
  },()=>{
  this.data.cancel();
  })
 }
 }
})
 
// 调用示例
// 引入组件后通过js selectComponent('#id')方法获得组件对象 再调用组件对象下的showModal方法 传入配置参数即可 可以在组件中自定义内容节点

wxss:

.modalDIY{
 position: fixed;
 z-index: 99999999;
 top: 0;
 left: 0;
 width: 100vw;
 height: 100vh;
 background: rgba(0,0,0,0.6);
 display: flex;
 align-items: center;
 align-content: center;
 justify-content: center;
}
.bg{
 background: #fff;
 text-align: center;
 border-radius: 10rpx;
 width: 90%;
}
.modalTitle{
 padding: 30rpx 40rpx 0 40rpx;
 font-size: 36rpx;
 line-height: 55rpx;
 color: #000;
}
.modalContent{
 padding: 20rpx 40rpx;
 font-size: 30rpx;
 color: #7a7a7a;
}
.modalOperate{
 height: 100rpx;
 line-height: 100rpx;
 border-top: 2rpx solid #eee;
 display: flex;
}
.cancelBtn{
 border-right: 2rpx solid #eee;
 flex: 1;
}
.comfirmBtn{
 flex: 1;
}

json:(记住要把component设置成true)

{
 "component": true,
 "usingComponents": {}
}

调用的时候需要贴别说明一下,拿我上面示例图的第二个弹窗的调用为例

首先引入组件

微信小程序自定义模态弹窗组件详解

在wxml中引用组件

微信小程序自定义模态弹窗组件详解

在js中可以配置一些颜色之类的样式

首先通过selectComponent这个方法获得组件对象,可以存成全局的常量。

微信小程序自定义模态弹窗组件详解

我们要调用这个对象下自己封装的showModal方法

微信小程序自定义模态弹窗组件详解

完毕。

为大家推荐现在关注度比较高的微信小程序教程一篇:《微信小程序开发教程》小编为大家精心整理的,希望喜欢。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
根据一段代码浅谈Javascript闭包
Dec 14 Javascript
jQuery EasyUI API 中文文档 - ProgressBar 进度条
Sep 29 Javascript
浅析Prototype的模板类 Template
Dec 07 Javascript
jquery ajax方式直接提交整个表单核心代码
Aug 15 Javascript
浅谈javascript中this在事件中的应用
Feb 15 Javascript
JavaScript使用addEventListener添加事件监听用法实例
Jun 01 Javascript
js行号显示的文本框实现效果(兼容多种浏览器 )
Oct 23 Javascript
jQuery实现订单提交页发送短信功能前端处理方法
Jul 04 Javascript
详解js的异步编程技术的方法
Feb 09 Javascript
Vue+Flask实现简单的登录验证跳转的示例代码
Jan 13 Javascript
create-react-app构建项目慢的解决方法
Mar 14 Javascript
使用VScode 插件debugger for chrome 调试react源码的方法
Sep 13 Javascript
js实现鼠标点击页面弹出自定义文字效果
Dec 24 #Javascript
javascript实现鼠标点击生成文字特效
Dec 24 #Javascript
Javascript实现鼠标点击冒泡特效
Dec 24 #Javascript
javascript实现点击星星小游戏
Dec 24 #Javascript
JS实现小星星特效
Dec 24 #Javascript
JS实现星星海特效
Dec 24 #Javascript
JS实现图片切换特效
Dec 23 #Javascript
You might like
从一个不错的留言本弄的mysql数据库操作类
2007/09/02 PHP
让Json更懂中文(JSON_UNESCAPED_UNICODE)
2011/10/27 PHP
PHP 面向对象程序设计(oop)学习笔记 (四) - 异常处理类Exception
2014/06/12 PHP
浅析application/x-www-form-urlencoded和multipart/form-data的区别
2014/06/22 PHP
编译PHP报错configure error Cannot find libmysqlclient under usr的解决方法
2014/06/27 PHP
PHP 5.6.11 访问SQL Server2008R2的几种情况详解
2016/08/08 PHP
基于php编程规范(详解)
2017/08/17 PHP
Javascript 类与静态类的实现
2010/04/01 Javascript
实例分析js和C#中使用正则表达式匹配a标签
2014/11/26 Javascript
调试JavaScript中正则表达式中遇到的问题
2015/01/27 Javascript
JS实现光滑展开合拢的菜单效果代码
2015/09/16 Javascript
基于NodeJS+MongoDB+AngularJS+Bootstrap开发书店案例分析
2017/01/12 NodeJs
jquery ajaxfileupload异步上传插件使用详解
2017/02/08 Javascript
jquery插件ContextMenu设置右键菜单
2017/03/13 Javascript
vue.js template模板的使用(仿饿了么布局)
2018/08/13 Javascript
在vue项目中引入highcharts图表的方法
2019/01/21 Javascript
python友情链接检查方法
2015/07/08 Python
python基础教程之Filter使用方法
2017/01/17 Python
python通过zabbix api获取主机
2018/09/17 Python
python 执行终端/控制台命令的例子
2019/07/12 Python
matplotlib 对坐标的控制,加图例注释的操作
2020/04/17 Python
python 轮询执行某函数的2种方式
2020/05/03 Python
HTML5本地存储之IndexedDB
2017/06/16 HTML / CSS
轻松制作精彩视频:Animoto
2018/09/19 全球购物
小学生成长感言
2014/01/30 职场文书
团日活动策划书
2014/02/01 职场文书
致跳高运动员加油稿
2014/02/12 职场文书
行政主管职责范本
2014/03/07 职场文书
致共产党员倡议书
2014/04/16 职场文书
《音乐之都维也纳》教学反思
2014/04/16 职场文书
2014县委书记党的群众路线教育实践活动对照检查材料思想汇报
2014/09/22 职场文书
教师个人自我剖析材料
2014/09/29 职场文书
医院员工辞职信范文
2015/05/12 职场文书
Nginx服务器添加Systemd自定义服务过程解析
2021/03/31 Servers
游戏开发中如何使用CocosCreator进行音效处理
2021/04/14 Javascript
解决 Redis 秒杀超卖场景的高并发
2022/04/12 Redis