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

2020-12-01 17:04:38

参考地址 vue 翻页组件vue-flip-page效果

虽然不知道vue flip是干啥的，先记录下吧，以后可能会排上大用场哦。


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

翻到指定页面：

1
2
3
4
5
6
7
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;
  },

传入参数：

1
2
3
4
5
6
| 参数 | 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

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

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

例子：

效果：

样式：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
.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效果，希望对大家有所帮助！


  • 精彩推荐

  • 2017-09-11 16:35:22

    ngx_http_realip_module使用详解

    网络上关于ngx_http_realip_module的文章千篇一律，全是在说怎么安装，最多贴一个示例配置，却没有说怎么用，为什么这么用，官网文档写得也十分简略，于是就自己探索了一下。

  • 2017-09-11 16:39:43

    基于Nginx dyups模块的站点动态上下线

    在分布式服务下，我们会用nginx做负载均衡， 业务站点访问某服务站点的时候， 统一走nginx， 然后nginx根据一定的轮询策略，将请求路由到后端一台指定的服务器上。

  • 2017-09-13 13:49:21

    Web性能测试：工具之Siege详解

    Siege是一款开源的压力测试工具，设计用于评估WEB应用在压力下的承受能力。可以根据配置对一个WEB站点进行多用户的并发访问，记录每个用户所有请求过程的相应时间，并在一定数量的并发访问下重复进行。siege可以从您选择的预置列表中请求随机的URL。所以siege可用于仿真用户请求负载，而ab则不能。但不要使用siege来执行最高性能基准调校测试，这方面ab就准确很多

  • 2017-09-14 10:18:25

    15分钟成为Git专家

    不管是以前使用过 Git 还是刚开始使用这个神奇的版本控制工具的开发者，阅读了本文以后都会收获颇丰。如果你是应一名有经验的 GIT 使用者，你会更好的理解 checkout -> modify -> commit 这个过程。如果你刚开始使用 Git，本文将给你一个很好的开端。

  • 2017-09-28 16:42:57

    Linux vmstat命令实战详解

    vmstat命令是最常见的Linux/Unix监控工具，可以展现给定时间间隔的服务器的状态值,包括服务器的CPU使用率，内存使用，虚拟内存交换情况,IO读写情况。这个命令是我查看Linux/Unix最喜爱的命令，一个是Linux/Unix都支持，二是相比top，我可以看到整个机器的CPU,内存,IO的使用情况，而不是单单看到各个进程的CPU使用率和内存使用率(使用场景不一样)。

  • 2017-10-13 16:21:29

    Activity的四种launchMode

    launchMode在多个Activity跳转的过程中扮演着重要的角色，它可以决定是否生成新的Activity实例，是否重用已存在的Activity实例，是否和其他Activity实例公用一个task里。这里简单介绍一下task的概念，task是一个具有栈结构的对象，一个task可以管理多个Activity，启动一个应用，也就创建一个与之对应的task。

  • 2017-10-16 16:45:45

    Android开发技巧：Application和Instance

    在开发过程中，我们经常会需要用到一些全局的变量或者全局的“管理者”，例如QQ，需要有一个“全局的管理者“保存好友信息，各个activity即可直接通过该”管理者“来获取和修改某个好友信息，显然，这样的一个好友信息，保存到某一个具体的activity里面，然后依靠activity的intent来传递参数是不合适。我们有两种方法来实现这样一个全局的管理者，一种是使用C++/Java中常用的单例模式，另一种是利用Android的Application类，下面一一阐述。