vue 翻页组件vue-flip-page效果


Posted in Javascript onFebruary 05, 2020

方法
change (改变页面)
tap  (点击)
turning  (正在翻页)
prev  (前一页)
next   (后一页)

翻到指定页面:

handleSwitchManual(index) {
   if (index === this.currentIndex) return;
   this.$refs["turn"].toPage(index);
   this.currentIndex = index;
   this.goods_id = this.manuals[this.currentIndex].goods_id;
   this.show = false;
  },

传入参数:

| 参数 | type | example | describe  |
| ------ | ---- | -------- | ---------- |
| width | number | 375 | 宽度 |
| height | number | 667 | 高度 |
| data | Array | [ { "picture_image": "https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=2600216442,2384386498&fm=15&gp=0.jpg", }, { "picture_image": "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1580807703833&di=0ab054549c3ea050dc0bd49e146b20e9&imgtype=0&src=http%3A%2F%2Fwww.thatsmags.com%2Fimage%2Fview%2F201703%2Fvue-cover.jpg", }] | 传入的数据 |
npm包 npm install vue-flip-page

在需要用到的页面中(注意 一个页面目前只能引入一次)

import turn from "vue-flip-page";
components: { turn }

例子:

效果:

vue 翻页组件vue-flip-page效果

样式:

.manual-wrap {
  position: relative;
  z-index: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-transform: scale(0.95);
  transform: scale(0.95);
  -webkit-transition: opacity ease 0.5s;
  transition: opacity ease 0.5s;
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -o-user-select: none;
 }
 
 .manual-wrap.active {
  -webkit-transform: scale(1);
  transform: scale(1);
  opacity: 1;
 }

总结

以上所述是小编给大家介绍的vue 翻页组件vue-flip-page效果,希望对大家有所帮助!

Javascript 相关文章推荐
Array.slice()与Array.splice()的返回值类型
Oct 09 Javascript
JQuery循环滚动图片代码
Dec 08 Javascript
JQuery中根据属性或属性值获得元素(6种情况获取方法)
Jan 17 Javascript
JavaScript中原型和原型链详解
Feb 11 Javascript
谈谈JSON对象和字符串之间的相互转换JSON.stringify(obj)和JSON.parse(string)
Oct 01 Javascript
JS基于递归实现倒计时效果的方法
Nov 26 Javascript
Angular中实现树形结构视图实例代码
May 05 Javascript
js实现移动端导航点击自动滑动效果
Jul 18 Javascript
原生JS实现的双色球功能示例
Feb 02 Javascript
vue微信分享出来的链接点开是首页问题的解决方法
Nov 28 Javascript
js实现数字跳动到指定数字
Aug 25 Javascript
解决vue props传Array/Object类型值,子组件报错的情况
Nov 07 Javascript
在博客园博文中添加自定义右键菜单的方法详解
Feb 05 #Javascript
Vue中多元素过渡特效的解决方案
Feb 05 #Javascript
Vue路由管理器Vue-router的使用方法详解
Feb 05 #Javascript
Vue的状态管理vuex使用方法详解
Feb 05 #Javascript
浅谈Vue组件单元测试究竟测试什么
Feb 05 #Javascript
VUE中使用HTTP库Axios方法详解
Feb 05 #Javascript
Vue获取页面元素的相对位置的方法示例
Feb 05 #Javascript
You might like
php的list()的一步操作给一组变量进行赋值的使用
2011/05/18 PHP
php数据库配置文件一般做法分享
2012/07/07 PHP
PHP实现合并discuz用户
2015/08/05 PHP
PHP中十六进制颜色与RGB颜色值互转的方法
2019/03/18 PHP
40个有创意的jQuery图片、内容滑动及弹出插件收藏集之一
2011/12/31 Javascript
javascript学习笔记(十六) 系统对话框(alert、confirm、prompt)
2012/06/20 Javascript
简单的邮箱登陆的提示效果类似于yahoo邮箱
2014/02/26 Javascript
JavaScript事件委托技术实例分析
2015/02/06 Javascript
js实现适用于素材网站的黑色多级菜单导航条效果
2015/08/24 Javascript
js实现简单计算器
2015/11/22 Javascript
Bootstrap中的Panel和Table全面解析
2016/06/13 Javascript
JS跨域请求外部服务器的资源
2017/02/06 Javascript
jQuery中复合选择器简单用法示例
2018/03/31 jQuery
python中的字典详细介绍
2014/09/18 Python
用Python编写简单的定时器的方法
2015/05/02 Python
从Python的源码来解析Python下的freeblock
2015/05/11 Python
python简单获取本机计算机名和IP地址的方法
2015/06/03 Python
快速排序的算法思想及Python版快速排序的实现示例
2016/07/02 Python
Django 中使用流响应处理视频的方法
2018/07/20 Python
Python递归函数实例讲解
2019/02/27 Python
在自动化中用python实现键盘操作的方法详解
2019/07/19 Python
python读写csv文件的方法
2019/08/13 Python
keras.layer.input()用法说明
2020/06/16 Python
keras和tensorflow使用fit_generator 批次训练操作
2020/07/03 Python
英语师范专业毕业生自荐信
2013/09/21 职场文书
精彩的大学生自我评价
2013/11/17 职场文书
代理协议书范本
2014/04/22 职场文书
高三上学期学习自我评价
2014/04/23 职场文书
青年岗位能手事迹材料
2014/12/23 职场文书
2015年七一建党节慰问信
2015/03/23 职场文书
2015年综治维稳工作总结
2015/04/07 职场文书
惹女朋友生气检讨书
2015/05/06 职场文书
党支部审查意见
2015/06/02 职场文书
个人向公司借款协议书
2016/03/19 职场文书
React + Threejs + Swiper 实现全景图效果的完整代码
2021/06/28 Javascript
利用For循环遍历Python字典的三种方法实例
2022/03/25 Python