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


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 面向对象的之私有成员和公开成员
May 04 Javascript
jquery获取焦点和失去焦点事件代码
Apr 21 Javascript
Javascript验证用户输入URL地址是否为空及格式是否正确
Oct 09 Javascript
深入理解JavaScript系列(26):设计模式之构造函数模式详解
Mar 03 Javascript
同步异步动态引入js文件的几种方法总结
Sep 23 Javascript
js表单登陆验证示例
Oct 19 Javascript
jQuery基于xml格式数据实现模糊查询及分页功能的方法
Dec 25 Javascript
JavaScript获取ul中li个数的方法
Feb 13 Javascript
JavaScript实现计数器基础方法
Oct 10 Javascript
解决Can't find variable: SockJS vue项目的问题
Sep 22 Javascript
vue添加自定义右键菜单的完整实例
Dec 08 Vue.js
JS中循环遍历数组的四种方式总结
Jan 23 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
按上下级层次关系输出内容的PHP代码
2010/07/17 PHP
Uglifyjs(JS代码优化工具)入门 安装使用
2020/04/13 Javascript
jquery slibings选取同级其他元素的实现代码
2013/11/15 Javascript
JS常用字符串处理方法应用总结
2014/05/22 Javascript
9款2014最热门jQuery实用特效推荐
2014/12/07 Javascript
基于JS实现密码框(password)中显示文字提示功能代码
2016/05/27 Javascript
js中获取键盘事件的简单实现方法
2016/10/10 Javascript
node.js用fs.rename强制重命名或移动文件夹的方法
2017/12/27 Javascript
微信小程序中使用echarts的实现方法
2019/04/24 Javascript
深入了解响应式React Native Echarts组件
2019/05/29 Javascript
微信小程序定义和调用全局变量globalData的实现
2019/11/01 Javascript
Vue axios获取token临时令牌封装案例
2020/09/11 Javascript
Vue使用v-viewer实现图片预览
2020/10/21 Javascript
vue 数据遍历筛选 过滤 排序的应用操作
2020/11/17 Javascript
在Python中使用元类的教程
2015/04/28 Python
python下10个简单实例代码
2017/11/15 Python
对Python3中的input函数详解
2018/04/22 Python
Python实现多条件筛选目标数据功能【测试可用】
2018/06/13 Python
一篇文章搞懂Python的类与对象名称空间
2018/12/10 Python
python基础梳理(一)(推荐)
2019/04/06 Python
python读取.mat文件的数据及实例代码
2019/07/12 Python
python3的数据类型及数据类型转换实例详解
2019/08/20 Python
Python求正态分布曲线下面积实例
2019/11/20 Python
Python如何使用OS模块调用cmd
2020/02/27 Python
python实现QQ邮箱发送邮件
2020/03/06 Python
利用pandas向一个csv文件追加写入数据的实现示例
2020/04/23 Python
python爬虫中抓取指数的实例讲解
2020/12/01 Python
Django用内置方法实现简单搜索功能的方法
2020/12/18 Python
Pandas的数据过滤实现
2021/01/15 Python
Html5内唤醒百度、高德APP的实现示例
2019/05/20 HTML / CSS
英国汽车和货车租赁网站:Hertz英国
2016/09/02 全球购物
台湾森森购物网:U-mall
2017/10/16 全球购物
利用异或运算实现两个无符号数的加法运算
2013/12/20 面试题
2015年秋季校长开学典礼致辞
2015/07/29 职场文书
Spring Security中用JWT退出登录时遇到的坑
2021/10/16 Java/Android
javascript之Object.assign()的痛点分析
2022/03/03 Javascript