详解vue-flickity的fullScreen功能实现


Posted in Javascript onApril 07, 2020

描述

在项目集成了vue-flickity组件后发现,该组件参考flickity官网的fullscreen配置不起作用

实现方法

  • 需要添加flickity-fullscreen组件
  • 在main.js中导入flickity-fullscreen组件
  • 添加flickity组件的fullscreen属性
  • 定义fullscreen的CSS样式

具体步骤

1.添加flickity-fullscreen组件

需要提前配置好flickity

yarn: yarn add flickity-fullscreen --save

npm: npm install flickity-fullscreen

Bower: bower install flickity-fullscreen

2. 在main.js中导入flickity-fullscreen组件

详解vue-flickity的fullScreen功能实现

3. 添加flickity组件的fullscreen属性

详解vue-flickity的fullScreen功能实现

详解vue-flickity的fullScreen功能实现

4. 定义fullscreen的CSS样式

/* 展开全屏按钮样式 */
.flickity-fullscreen-button-view{
  position: absolute;
  width:auto;
  height:auto;
  z-index: 999999;
  top: 0;
  right: 0;
  padding: 5px 10px;
  border-radius: 5px;
  box-shadow: 0 0 10px #0000000f;
}

/* 退出全屏按钮样式,
 * 设置display:none;是为了不让【展开全屏按钮】和【退出全屏按钮】同时显示在页面上
 */
.flickity-fullscreen-button-exit{
  display: none;
}

/* 点击全屏显示效果 */
.is-fullscreen {
  position: fixed;
  z-index: 1100;
  height: 100vh;
  width: 100vw;
  top: 0;
  left: 0;
  background: #0000009e;
 }

/* 当显示了全屏时,隐藏【展开全屏按钮】 */
.is-fullscreen .flickity-fullscreen-button-view{
  display: none;
}

/* 显示全屏时,显示【退出全屏按钮】设置按钮在页面右上方*/
.is-fullscreen .flickity-fullscreen-button-exit{
  display: block;
  position: absolute;
  width:auto;
  height:auto;  
  z-index: 999999;
  top: 0;
  padding: 5px 10px;
  border-radius: 5px;
  box-shadow: 0 0 10px #0000000f;
  right:0;
}

/* 设置被选中的图片大小为全屏*/
.is-fullscreen .is-selected{
  width: 100vw !important;
  height:100vh !important;
}

/* 设置选中的图片自适应屏幕大小,按屏幕大小进行缩放*/
.is-fullscreen .carousel-img{
  width:auto !important;
  height:auto !important;
  max-width: 100% !important;
  max-height: 100% !important;
}

/* 取消展开退出按钮点击的边框样式*/
.flickity-button:focus{
  box-shadow: unset;;
}

/* 设置展开退出按钮的宽度*/
.flickity-button-icon{
  width:20px;
}

实际效果

详解vue-flickity的fullScreen功能实现

详解vue-flickity的fullScreen功能实现

Tips不能点击图片显示全屏,暂时只能点击fullscreen按钮全屏状态下没有左右箭头显示,但是可以左右滑动切换图片

参考

https://github.com/metafizzy/flickity-fullscreen#install
https://github.com/drewjbartlett/vue-flickity/issues/43

到此这篇关于详解vue-flickity的fullScreen功能实现的文章就介绍到这了,更多相关vue flickity fullScreen内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
判断脚本加载是否完成的方法
May 26 Javascript
js下写一个事件队列操作函数
Jul 19 Javascript
js实现正则匹配中文标点符号的方法
Dec 23 Javascript
js拖拽的原型声明和用法总结
Apr 04 Javascript
BootStrap网页中代码显示用法详解
Oct 21 Javascript
javascript中对象的定义、使用以及对象和原型链操作小结
Dec 14 Javascript
vue如何获取点击事件源的方法
Aug 10 Javascript
Vue2.0父子组件传递函数的教程详解
Oct 16 Javascript
微信小程序数字滚动插件使用详解
Feb 02 Javascript
vue中获取滚动table的可视页面宽度调整表头与列对齐(每列宽度不都相同)
Aug 17 Javascript
微信小程序点击列表跳转到对应详情页过程解析
Sep 26 Javascript
Vue实现简单的拖拽效果
Aug 25 Javascript
小谈angular ng deploy的实现
Apr 07 #Javascript
简单了解Vue + ElementUI后台管理模板
Apr 07 #Javascript
vue开发中遇到的问题总结
Apr 07 #Javascript
手把手教您实现react异步加载高阶组件
Apr 07 #Javascript
javascript绘制简单钟表效果
Apr 07 #Javascript
js中位数不足自动补位扩展padLeft、padRight实现代码
Apr 06 #Javascript
jquery实现两个div中的元素相互拖动的方法分析
Apr 05 #jQuery
You might like
一拳超人中怪人协会钦定! S级别最强四人!
2020/03/02 日漫
jQuery获取json后使用zy_tmpl生成下拉菜单
2015/03/27 PHP
php+ajax实现仿百度查询下拉内容功能示例
2017/10/20 PHP
学习ExtJS 访问容器对象
2009/10/07 Javascript
分享JavaScript获取网页关闭与取消关闭的事件
2013/12/13 Javascript
jquery数组封装使用方法分享(jquery数组遍历)
2014/03/25 Javascript
JavaScript事件 "事件对象"的注意要点
2016/01/14 Javascript
Jquery跨浏览器文本复制插件Zero Clipboard的使用方法
2016/02/28 Javascript
JS仿京东移动端手指拨动切换轮播图效果
2020/04/10 Javascript
利用Angularjs中模块ui-route管理状态的方法
2016/12/27 Javascript
JS实现前端缓存的方法
2017/09/21 Javascript
vue2.0 better-scroll 实现移动端滑动的示例代码
2018/01/25 Javascript
微信小程序使用scroll-view标签实现自动滑动到底部功能的实例代码
2018/11/09 Javascript
详解基于 Node.js 的轻量级云函数功能实现
2019/07/08 Javascript
vue使用微信JS-SDK实现分享功能
2019/08/23 Javascript
浅谈Python中函数的参数传递
2016/06/21 Python
Python中的with语句与上下文管理器学习总结
2016/06/28 Python
python音频处理用到的操作的示例代码
2017/10/27 Python
python3 unicode列表转换为中文的实例
2018/10/26 Python
Python操作注册表详细步骤介绍
2020/02/05 Python
python 删除excel表格重复行,数据预处理操作
2020/07/06 Python
python爬虫利用selenium实现自动翻页爬取某鱼数据的思路详解
2020/12/22 Python
Django后端按照日期查询的方法教程
2021/02/28 Python
Data URI scheme详解和使用实例及图片base64编码实现方法
2014/05/08 HTML / CSS
Bobbi Brown芭比波朗美国官网:化妆师专业彩妆保养品品牌
2016/08/18 全球购物
物理教育专业毕业生推荐信
2013/11/03 职场文书
公关关系专员的自我评价分享
2013/11/20 职场文书
大学秋游活动方案
2014/02/11 职场文书
中学生社区服务活动报告
2015/02/05 职场文书
2015年质检工作总结
2015/05/04 职场文书
医院岗前培训心得体会
2016/01/08 职场文书
管理者们如何制定2019年的工作计划?
2019/07/01 职场文书
导游词之西江千户苗寨
2019/12/24 职场文书
html+css实现滚动到元素位置显示加载动画效果
2021/08/02 HTML / CSS
mybatis源码解读之executor包语句处理功能
2022/02/15 Java/Android
使用refresh_token实现无感刷新页面
2022/04/26 Javascript