效果图
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>