码迷,mamicode.com
首页 > 其他好文 > 详细

ES6小点心第二弹——底部浮现弹窗

时间:2018-01-17 13:43:42      阅读:151      评论:0      收藏:0      [点我收藏+]

标签:不同   操作   make   ble   程序   radius   hub   tab   pop   

技术分享图片

小点心,顾名思义,开箱即食,拿来即用。

献上第二个小点心:SlidePopup

GitHub

在线演示

GitHub 上欢迎大家来找茬^_^

前端朋友们,今天要介绍的这款小点心牛B了。相信是个前端都应该接触过这种效果,而且是非常流行的交互。

闲话少叙,先上效果图:

技术分享图片

基本使用

技术分享图片

多个可自定义的选项

来不及解释了,立即查看示例

这种弹窗的使用场景主要出现在移动端。

先定一个小目标:

  • 易用性,如果自己都觉得难用,那就没有分享的必要了 ̄□ ̄||;
  • 兼容性,兼容主流浏览器,但并非所有(比如 IE 低版本);
  • 移动优先,主要为移动端做更多的考虑;

为了以后不必再为写这种效果烦心,特此写了【底部浮现弹窗】小插件。

使用

通用弹窗(NormalPopup) 几乎相同的API,因为他们继承自同一个父类,这正是面向对象的巨大魅力。

注意事项:遮罩和主体分离
不同于 通用弹窗(NormalPopup),使用 SlidePopup 时最好弹窗的遮罩和主体是分离的(相信你可以通过组织 html 结构和 css 样式轻松做到这点),因为需要对遮罩和主体执行不同的动画,遮罩是做渐现效果,而主体是做上滑效果,如果遮罩和主体缠在一块,结果你懂的。

最佳实践: 请矢志不渝地做好遮罩和主体分离^_^

下面是 SlidePopup 最简单的使用:

const popupA = new SlidePopup({
    popup: '#popup-A',
    openBtn: '.open-popup-A',
    closeBtn: '.close-popup-A',
})
 

简单,简单是很重要的。【尽可能简单】是在设计小点心系列 API 时的第一原则。

雷区

这里有一些在使用 SlidePopup 时容易导致 bug 的地方,其中的大部分都不容易碰到,但为了避免你在遇到它们时大骂“沃特法克”,请仔细阅读它们。

popup 上禁止 transform

SlidePopup 内部通过操作 transform 样式制造 css3 动画。为什么选择 transform? transform 的 3D 变换可触发硬件加速,从而打造丝般顺滑的动画体验。这是跟着 Swiper 老哥学的^_^。实际上,如果你在 popup 上应用了 transform,SlidePopup 会报错(throw Error),程序会直接挂掉,小点心也是有脾气的。所以你不必记住它,SlidePopup 会在控制台提示你。

相信我,通过精心组织 html 结构和 css 样式是很容易做到这一点的。So,make me happy,make you easy^_^

最佳实践: 精心组织 html 和 css,始终不在 popup 上 transform。

popup 样式覆盖

为了使用起来尽可能方便,SlidePopup 将样式封装在了插件内部,否则就需要像 Swiper 那样引入一个 js 文件,再引入一个 css 文件,再小心翼翼地往 html 上添加 css 类名。

由于是从【底部】浮现,不是左,不是右,不是上,而是底部。因此,SlidePopup 会给 popup 添加一些样式以确保弹窗在【底部】:

position: fixed !important;
top: auto !important;
bottom: 0 !important;
margin-bottom: 0 !important;
 

这几行样式可以确保弹窗是从【底部】冉冉升起的,一般弹窗的样式是不会与这几行冲突的,如果你执意要跟这几行对着干,那么结果可能不会尽如人意。

最佳实践:请务必保证上面几行样式生效。

移动端 cursor:pointer

这不是本插件应该注意的,而是整个移动前端开发都应该注意的。某些 iPhone 机型上如果【可点击元素】没有设置这个样式,将不会触发点击事件。所以确保你在可点击元素上设置了 cursor:pointer。在使用本插件时,那些打开按钮,关闭按钮,点击遮罩关闭,点击 document 空白区域关闭弹窗等等可点击的元素 SlidePopup 都没有做添加 cursor:pointer 处理,都需要使用者在编写样式时自行加上。

最佳实践:在【可点击元素】上设置 cursor:pointer

文件列表

小点心UMD(Development)UMD(Production)ES Module
Full es6Dessert.js (17.35kb) es6Dessert.min.js (8.11kb) es6Dessert.esm.js (11.66kb)
通用弹窗 NormalPopup.js (10.23kb) NormalPopup.min.js (4.83kb) NormalPopup.esm.js (6.56kb)
底部浮现弹窗 SlidePopup.js (15.35kb) SlidePopup.min.js (7.14kb) SlidePopup.esm.js (10.29kb)

ES6小点心第二弹——底部浮现弹窗

标签:不同   操作   make   ble   程序   radius   hub   tab   pop   

原文地址:https://www.cnblogs.com/iovec/p/8301921.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!