最近在写新的页面时候,想起了前段时间开的产品优化会议,手机端有很多旧 pc 端的习惯
问题:
- 用户使用流程中过多的 弹窗以及反复确认
- 打断用户使用流程,过多的层次分格
在写新页面时候选择放弃以前的形式,寻找新的效果,保证既能提示用户,也能不打断用户体验的效果。
需求
- 轻量化,简单易用
- 方便的接口
- 利于后期修改代码(开源的代码)
- 大量的用户使用
Layer 弹层组件(移动版)
layer mobile 是为移动设备(手机、平板等 webkit 内核浏览器/webview)量身定做的弹层 UI。由于是采用原生 JavaScript 编写,所有并不依赖任何第三方库。layer mobile 完全独立于 PC 版的 layer,您需要按照场景选择使用。layer mobile 正致力于成为您 WebApp 开发过程中弹出交互的不二选择。Github
- 一个简单方便的弹层插件,基本的都够用
- 奇迹的发现 2016 年是最后一次的更新,不知道是什么原因不更新了,但是现有的已经足够强大了
- pc 端的 Layer 弹窗层组件也是很强大的,但是这里主要用的是他的移动版本
- 官方的文档感觉也不更新了,下载地址也有问题了,只能从Github上手动复制下来了
- 自己的使用的插件 api 丢失,那就很悲催了,所以才有了此篇
v2.0(2016.08.26)
新增底部对话框风格(类似手机 QQ),详见官网 demo。 新增 skin 参数,目前支持配置 footer(即底部对话框风格)、msg(普通提示) 两种风格。 默认 90%的自适应宽度(为了在移动设备上显得大气些)。 anim 参数改造,支持动画配置 scale(默认)、up。 loading 层支持传递 content,如:layer.open({type: 2, content: ‘加载中’})。 btn 参数如果只需要一个按钮,则 btn: ‘按钮’,如果有两个,则:btn: [‘按钮一’, ‘按钮二’]。 修复与部分样式的冲突。 结构大幅度优化。 移除右上角关闭 icon,因为并没有实际卵用。
以下内容都是从官方搬运过来的,建议下载源码在本地测试
,地址: layer.layui.com/mobile/
1、Layer 小试牛刀
一共分为以下几个功能
- 信息框
- 提示
- 询问框
- 底部对话框
- 底部提示
- 自定义标题
- 页面层
- loading 层
- loading 带文字
|
|
2、功能说明
一个在底部弹出的完整对话框:
|
|
设置 3 秒自动关闭:
|
|
设置不允许点遮罩关闭:
|
|
自定义一个全屏的页面层:
|
|
结语
请恕我们无法为您一一演示,我们更希望你认真去阅读文档,那里列举了 layer 所有的接口,它们会帮助你完成形形色色的展现形式。
因篇幅有限具体的文档说明在另外的页面中
地址:待更新