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 相关文章推荐
jQuery对象和Javascript对象之间转换的实例代码
Mar 20 Javascript
JavaScript Array对象扩展indexOf()方法
May 09 Javascript
使用js dom和jquery分别实现简单增删改
Sep 11 Javascript
javascript常用代码段搜集
Dec 04 Javascript
jQuery+HTML5实现手机摇一摇换衣特效
Jun 05 Javascript
js实现搜索框关键字智能匹配代码
Mar 26 Javascript
一步步教大家编写酷炫的导航栏js+css实现
Mar 14 Javascript
web打印小结
Jan 11 Javascript
JavaScript实现鼠标滚轮控制页面图片切换功能示例
Oct 14 Javascript
详解vue-cli项目开发/生产环境代理实现跨域请求
Jul 23 Javascript
vue+element搭建后台小总结 el-dropdown下拉功能
Apr 10 Javascript
Node.js API详解之 net模块实例分析
May 18 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
删除无限级目录与文件代码共享
2006/07/12 PHP
twig模板获取全局变量的方法
2016/02/05 PHP
php用正则判断是否为数字的方法
2016/03/25 PHP
PHP实现生成推广海报的方法详解
2018/03/14 PHP
PHP实现微信提现功能(微信商城)
2019/11/21 PHP
使用Git实现Laravel项目的自动化部署
2019/11/24 PHP
jQuery html()等方法介绍
2009/11/18 Javascript
jQuery学习笔记之jQuery的事件
2010/12/22 Javascript
对象无length属性时IE6/IE7中无法将其转换成伪数组(ArrayLike)
2011/07/31 Javascript
iframe父页面获取子页面参数的方法
2014/02/21 Javascript
javascript if条件判断方法小结
2014/05/17 Javascript
容易造成JavaScript内存泄露几个方面
2014/09/04 Javascript
node.js中的url.format方法使用说明
2014/12/10 Javascript
js密码强度检测
2016/01/07 Javascript
Nuxt.js踩坑总结分享
2018/01/18 Javascript
Vue 动态组件与 v-once 指令的实现
2019/02/12 Javascript
vue cli3 调用百度翻译API翻译页面的实现示例
2019/09/13 Javascript
python根据出生年份简单计算生肖的方法
2015/03/27 Python
pandas DataFrame 警告(SettingWithCopyWarning)的解决
2019/07/23 Python
python传到前端的数据,双引号被转义的问题
2020/04/03 Python
Pytorch框架实现mnist手写库识别(与tensorflow对比)
2020/07/20 Python
Django多数据库联用实现方法解析
2020/11/12 Python
html5基础标签(html5视频标签 html5新标签用法)
2013/12/30 HTML / CSS
雅诗兰黛旗下专业男士保养领导品牌:Lab Series
2017/05/15 全球购物
文件中有一组整数,要求排序后输出到另一个文件中
2012/01/04 面试题
工作人员思想汇报
2014/01/09 职场文书
答谢会策划方案
2014/05/12 职场文书
奥巴马当选演讲稿
2014/09/10 职场文书
土木工程专业本科生求职信
2014/10/01 职场文书
2015暑期社会实践通讯稿
2015/07/18 职场文书
考研经验交流会策划书
2015/11/02 职场文书
志愿者服务宣传标语口号
2015/12/26 职场文书
党组织关系的介绍信模板
2019/06/21 职场文书
文书工作总结(范文)
2019/07/11 职场文书
python使用pycharm安装pyqt5以及相关配置
2022/04/22 Python
Python使用MapReduce进行简单的销售统计
2022/04/22 Python