LayerMobile：轻量级移动端弹层解决方案

QCNNA • 2025-02-15 17:09 • 编程

一、基本介绍

LayerMobile是一个轻量级的移动端弹层解决方案，其核心是移动端弹层的组件化封装，依赖jQuery，并使用LESS进行样式组织。它能够支持常见的弹出框、提示框、选择框等，提供丰富的选项和配置，同时易于二次开发和定制，适用于各种移动端场景，性能表现也非常出色。

二、核心功能

1、弹出框：可以在页面中央、底部、顶部等位置弹出一个盒子，可以设置自定义大小、标题、内容、按钮等参数。

2、提示框：可以在页面顶部或底部固定位置弹出一个提示框，可以设置自定义类型、图标、内容等参数。

3、选择框：可以弹出一个选择列表，可以设置自定义数据源、标题、确认、取消等参数。

三、使用说明

1、引入LayerMobile的js和css文件。

<link rel="stylesheet" href="path/to/layermobile.css">
<script src="path/to/jquery.min.js"></script>
<script src="path/to/layermobile.js"></script>

2、调用LayerMobile的方法并设置相关参数。

layermobile.alert({
    title: '提示', // 弹层标题
    content: '这是一个提示', // 弹层内容
    btn: '确定', // 按钮文本
    yes: function(){ // 点击“确定”的回调函数
        // do something
    }
});

3、LayerMobile的API介绍：

a、alert(options)：弹出框。

b、confirm(options)：确认框。

c、msg(options)：提示框。

d、toast(options)：轻提示。

e、loading(options)：加载中。

f、actionsheet(options)：底部菜单。

g、pop(options)：弹层。

h、open(options)：弹窗。

i、close(layero)：关闭弹窗。

四、示例代码

弹出框：

layermobile.alert({
    title: '提示',
    content: '这是一个提示框。',
    btn: '确定',
    yes: function(){
        console.log('你点击了确定按钮！');
    }
});

确认框：

layermobile.confirm({
    title: '确认框',
    content: '你确定要删除吗？',
    btn: ['确定', '取消'],
    yes: function(){
        console.log('你点击了确定按钮！');
    },
    no: function(){
        console.log('你点击了取消按钮！');
    }
});

提示框：

layermobile.msg('这是一个提示框。');

轻提示：

layermobile.toast('这是一个轻提示。');

加载中：

var loadingIndex = layermobile.loading('加载中...');
setTimeout(function () {
    layermobile.close(loadingIndex);
}, 3000);

底部菜单：

layermobile.actionsheet({
    title: '请选择',
    menus: ['选项1', '选项2', '选项3'],
    cancel: '取消',
    itemClick: function(index){
        console.log('你点击了第' + (index + 1) + '个选项！');
    },
    cancelClick: function(){
        console.log('你点击了取消按钮！');
    }
});

自定义弹层：

var html = '<div class="layer"><p>这是一个自定义的弹层。</p></div>';
layermobile.pop({
    title: false,
    content: html,
    closeBtn: false,
    shadeClose: true
});

自定义弹窗：

var html = '<div class="layer"><p>这是一个自定义的弹窗。</p></div>';
layermobile.open({
    type: 1,
    title: false,
    area: ['80%', '80%'],
    content: html,
    closeBtn: false,
    shadeClose: true
});

原创文章，作者：QCNNA，如若转载，请注明出处：https://www.506064.com/n/349322.html