vue3+turn.js实现翻书的效果，带滚动条_vue3 翻书效果

效果图

1、下载turn.js

官网

2、引入项目中

引入jquery

npm install jquery
1

将lib/turn.js放在项目的utils下

在使用的页面引入

import turn from '../../utils/turn.js'
1

报错

解决方法，修改turn.js

添加export default 导出方法，引入jquery

3、页面使用

使用了官网的图片，放在了项目的assets下

<template>
  <div class="turn-container">
    <div class="turn-banner">
      <div class="turn-content">
        <div id="flipbook">
          <el-image v-for="(item, index) in imgList" :key="index" fit="fill" :src="item.url" alt="" srcset="" />
        </div>
      </div>
      <div class="slider-bar">
        <div v-for="(item, index) in imgList" :key="index" class="slider" :class="{ 'slider-current': index + 1 == currentPage }" @click="toPage(index)"></div>
      </div>
    </div>
  </div>
</template>
<script>
import { ref, nextTick, onMounted } from 'vue'
import turn from '../../utils/turn.js'
import $ from 'jquery'
export default {
  components: {},
  setup() {
    const currentPage = ref(1)

    const imgList = ref([
      {
        url: './assets/fsc/turn-img/1.jpg',
      },
      {
        url: './assets/fsc/turn-img/2.jpg',
      },
      {
        url: './assets/fsc/turn-img/3.jpg',
      },
      {
        url: './assets/fsc/turn-img/4.jpg',
      },
      {
        url: './assets/fsc/turn-img/5.jpg',
      },
      {
        url: './assets/fsc/turn-img/6.jpg',
      },
      {
        url: './assets/fsc/turn-img/7.jpg',
      },
      {
        url: './assets/fsc/turn-img/8.jpg',
      },
      {
        url: './assets/fsc/turn-img/9.jpg',
      },
      {
        url: './assets/fsc/turn-img/10.jpg',
      },
      {
        url: './assets/fsc/turn-img/11.jpg',
      },
      {
        url: './assets/fsc/turn-img/12.jpg',
      },
    ])

    onMounted(() => {
      onTurn()
    })

    const onTurn = () => {
      nextTick(() => {
        $('#flipbook').turn({
          autoCenter: true,
          height: 646, //高度
          width: 996, //宽度
          display: 'double', //单页显示/双页显示  single/double
          elevation: 50,
          duration: 500, //翻页速度(毫秒), 默认600ms
          gradients: true, //翻页时的阴影渐变, 默认true
          autoCenter: true, //自动居中, 默认false
          acceleration: true, //硬件加速, 默认true, 如果是触摸设备设置为true
          page: 1, //设置当前显示第几页
          pages: imgList.value.length, //总页数
          when: {
            //监听事件
            turning: function (e, page, view) {
              console.log(e, page, view)
              // 翻页前触发
            },
            turned: function (e, page) {
              console.log(e, page)
              currentPage.value = page
              // 翻页后触发
            },
          },
        })
      })
    }

    const toPage = i => {
      currentPage.value = i + 1
      $('#flipbook').turn('page', currentPage.value) //进度条跳转到对应的页数
    }
    return {
      imgList,
      toPage,
      currentPage,
    }
  },
}
</script>
<style lang="scss" scoped>
.turn-banner {
  width: 100vw;
  height: 100vh;
  .turn-content {
    display: flex;
    margin: 0px auto;
    overflow: hidden;
  }
}
.slider-bar {
  width: 900px;
  height: 8px;
  border-radius: 5px;
  background-color: #ccc;
  margin-top: 15px;
  display: flex;
  overflow: hidden;
  .slider {
    flex: 1;
    cursor: pointer;
  }
  .slider-current {
    background-color: #666;
    border-radius: 5px;
  }
}
</style>

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
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137