弹窗组件

各种弹窗组件

小程序demo
小程序

Modal是一个基础组件,项目需要各种弹框,汇总有如下几种类型

  1. 弹窗型 (弹出卡片式的介绍)
  2. toast类型
  3. 侧弹型,(商城筛选等场景)
  4. 全弹型

截屏图如下

项目使用

模板

 <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(){
    // 实例窗口关闭时触发
})