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效果，希望对大家有所帮助！


  • 精彩推荐

  • 2019-11-08 09:34:46

    CSS3 Transition详解和使用

    Transition 可以设置 CSS 属性的过渡效果，它有以下几个属性。 transition-property 用于指定应用过渡属性的名称 transition-duration 用于指定这个过渡的持续时间 transition-delay 用于指定延迟过渡的时间 transition-timing-function 用于指定过渡的类型 transition-property transition-property 用于指定应用过渡的属性名称，可以指定多个属性名称，多个属性名称之间用, 分隔。 默认值为 all 也就是所有的元素都应用过渡效果。 例如，想让容器的宽高有一个过渡的效果，就可以这样写:

  • 2019-11-09 19:16:35

    java标记过期方法

    java注解：@Deprecated(不建议使用的，废弃的)；@SuppressWarnings(忽略警告，达到抑制编译器产生警告的目的)

  • 2019-11-12 02:56:39

    使用.htaccess重定向后无法显示图片，CSS失效,该如何处理

    现在我需要把这个域名泛解析到blog目录(*.mydomain.org)，同时保持另外两个目录的解析不变。尝试对最后一段作以下修改后（前面的内容不变），出现问题：另两个目录中的网站内的图片无法显示,CSS全部失效。

  • 2019-11-14 11:21:34

    vue中的this指向问题

    ※ 对于普通函数（包括匿名函数），this指的是直接的调用者，在非严格模式下，如果没有直接调用者，this指的是window。showMessage1()里setTimeout使用了匿名函数，this指向 window。 ※ 箭头函数是没有自己的this，在它内部使用的this是由它定义的宿主对象决定。showMessage2()里定义的箭头函数宿主对象为vue实例，所以它里面使用的this指向vue实例。