vue3+turn.js achieves the effect of flipping books, with scroll bars

renderings

1. Download turn.js

official website

2. Introduce into the project

import jquery

npm install jquery

Put lib/turn.js under the utils of the project

Introduced in the used page

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

Error

solution, modify turn.js

Add export default export method, import jquery

3. Page usage

The pictures on the official website are used and placed under the assets of the project

<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>