Modal是一个基础组件，项目需要各种弹框，汇总有如下几种类型
- 弹窗型 (弹出卡片式的介绍)
- toast类型
- 侧弹型，(商城筛选等场景)
- 全弹型
截屏图如下
项目使用
模板
<ui-pop item="{{modal}}" />
JS
const Pager = require('components/aotoo/core')
Pager({
data: {
modal: Pager.item({}) // 初始化modal数据
}
onReady: function(){
const modal = this.getElementsById('modal') // 获取实例
modal.reset() // 重置内容(清空)
.css(.....) //个性化设置弹窗的位置及属性
.pop({
title: '弹窗标题',
body: [
{
"@form" : {....} // 插入form的表单配置
}
]
})
}
})
api
-
modal.reset
重置数据为初始化数据，在项目多次用到同一个弹窗时，需将数据重置后再使用，否则会留有上次使用的数据 -
modal.css
每一种modal弹窗类型有固定的样式，在项目中不一定符合产品需求，可以通过css方法来设定特殊的样式 -
modal.hide 隐藏该实例的弹出窗口
-
modal.pop
弹窗方法，从页面中间弹出一个窗口，窗口内容可以传入一个JSON来配置 -
modal.pop.top
弹窗方法，弹出窗口从页面顶部滚落到页面中间部分 -
modal.pop.bot
弹窗方法，弹出窗口从页面底部弹出到页面中间部分 -
modal.toast
仿android的消息提示框 -
modal.toast.mid
仿android的消息提示框，在页面中部弹出 -
modal.toast.countdown
toast窗口自动关闭时间 -
modal.left
从页面左侧弹出半个窗口 -
modal.left.full
从页面左侧弹出全页面窗口 -
modal.right
从页面左侧弹出半个窗口 -
modal.right.full
从页面左侧弹出全页面窗口 -
modal.top
从页面顶部弹出半个窗口 -
modal.top.full
从页面顶部弹出整个窗口 -
modal.bot
从页面底部弹出半个窗口 -
modal.bot.full
从页面底部弹出整个窗口
钩子方法
modal.hooks.on('close', function(){
// 实例窗口关闭时触发
})
aotoo架构，可以看这里 www.agzgz.com
小程序demo
