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

@YDX

已于 2022-07-29 18:33:15 修改

阅读量6.7k

点赞数 2

分类专栏： vue3 vue turnJs 文章标签： javascript 前端 vue.js

于 2022-07-29 18:31:20 首次发布

本文链接：https://blog.csdn.net/weixin_43485503/article/details/126059244

版权

vue3 同时被 3 个专栏收录

7 篇文章 1 订阅

订阅专栏

vue

6 篇文章 0 订阅

订阅专栏

turnJs

1 篇文章 0 订阅

订阅专栏

效果图

在这里插入图片描述

1、下载turn.js

官网
在这里插入图片描述

2、引入项目中

引入jquery

npm install jquery

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

在使用的页面引入

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

报错
在这里插入图片描述
解决方法，修改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>