前提:添加页后,添加页与当前页会重叠在一起,不知道为什么,没有找到解决办法
1.h5端
<template><view class="container"><view id="flipbook"><view class="page page1">Page 1</view><view class="page page2">Page 2</view><view class="page page3">Page 3</view><view class="page page4">Page 4</view><view class="page fixed">Page 5</view></view></view>
</template><script>//npm install jquery turn.jsimport $ from 'jquery';import 'turn.js';export default {data() {return {}},mounted() {// 确保 DOM 加载完成this.$nextTick(() => {// 初始化翻书效果$('#flipbook').turn({width: 400, // 书本宽度height: 300, // 书本高度autoCenter: true, // 自动居中display: 'single',});});},methods: {}}
</script><style>
.container {display: flex;justify-content: center;align-items: center;height: 100vh;
}#flipbook {width: 400px;height: 300px;background-color: #f0f0f0;
}.page {width: 100%;height: 100%;display: flex;justify-content: center;align-items: center;background-color: #fff;border: 1px solid #ccc;box-sizing: border-box;font-size: 20px;color: #333;
}
</style>
2.APP 端简单使用
<template><view class="container"><!-- 使用 renderjs 的容器 --><view id="flipbook" :change:prop="renderjs.initTurnjs" :prop="{ pages: 4 }"><view class="page page1">Page 16+66</view><view class="page page2">Page 277</view><view class="page page3">Page 388</view><view class="page page4">Page 4</view></view></view>
</template><script module="renderjs" lang="renderjs">export default {mounted() {// 在 renderjs 中初始化 turn.js//this.initTurnjs();},methods: {initTurnjs() {// 动态加载 jQuery 和 turn.jsconst loadScript = (src, callback) => {const script = document.createElement('script');script.src = src;script.onload = callback;document.head.appendChild(script);};console.log(2222);// 加载 jQueryloadScript('http://192.168.1.95:9300/statics/jquery-3.5.1.min.js', () => {// 加载 turn.jsconsole.log(333);loadScript('http://192.168.1.95:9300/statics/turn.min.js', () => {// 初始化 turn.jsconsole.log(444);$('#flipbook').turn({width: 300,height: 300,autoCenter: true,display: 'single',pages: 4,when: {turned: function(event, page, view) {console.log('Turned to page', page);// 在这里可以添加加载新页面的逻辑}}});});});}}}
</script><style>.container {display: flex;justify-content: center;align-items: center;height: 100vh;}#flipbook {width: 300px;height: 300px;background-color: #f0f0f0;}.page {width: 100%;height: 100%;display: flex;justify-content: center;align-items: center;background-color: #fff;border: 1px solid #ccc;box-sizing: border-box;font-size: 20px;color: #333;}
</style>3.app端 添加页
<template><view ><view id="onePage" v-show="false"><view class="content"><view class="title">{{content.title}}</view><view class="details">{{content.details}}</view></view></view><button @click="add">添加一页</button><view class="container"><!-- 使用 renderjs 的容器 --><view id="flipbook" :change:listSize="renderjs.initTurnjs" :listSize="listSize" :addEventRandom="addEventRandom" :change:addEventRandom="renderjs.addEvent"><view class="page">欢迎</view></view></view></view>
</template><script>import Vue from 'vue'export default {components: {},data() {return { addEventRandom:null,content:{title:0,details:'未初始化'},listSize:1,currentSize:1}},created() {},onLoad(option) {},onShow() {},methods: {add(){//本次添加几页(总页数要是偶数,否则翻到最后一页不能向前翻)var addnum=0;if(this.currentSize % 2 === 0){//偶数addnum = 2;this.currentSize = this.currentSize + 2;}else{//奇数addnum = 1;this.currentSize = this.currentSize + 1;}let count = 0;const intervalId = setInterval(() => {++count;//填充数据this.content.title = '标题'+Math.floor(1000 + Math.random() * 9000);this.content.details = '内容'+Math.floor(1000 + Math.random() * 9000);//通知加一页this.addEventRandom = Math.floor(1000 + Math.random() * 9000);if (count === addnum) {clearInterval(intervalId); // 停止定时器}}, 1000);}} }
</script><script module="renderjs" lang="renderjs">export default {data() {return {turn:null,pages:1}},mounted() {// 在 renderjs 中初始化 turn.js//this.initTurnjs();},methods: {initTurnjs(newValue, oldValue) {var that=this;this.pages = newValue;// 动态加载 jQuery 和 turn.jsconst loadScript = (src, callback) => {const script = document.createElement('script');script.src = src;script.onload = callback;document.head.appendChild(script);};// 加载 jQueryloadScript('http://192.168.1.95:9300/statics/jquery-3.5.1.min.js', () => {// 加载 turn.jsloadScript('http://192.168.1.95:9300/statics/turn.min.js', () => {// 初始化 turn.jsthat.turn = $('#flipbook').turn({width: 300,height: 300,autoCenter: true,display: 'single',acceleration:true,pages: this.pages,when: {turned: function(event, page, view) {console.log('Turned to page', page);},first(){//console.log('当前页面是第一页');},last(){//console.log('当前页面是最后页');}}});//console.log(that.turn);});});},addEvent(newValue, oldValue){//调试//console.log(888);//console.log($('#onePage').html());const newPage = $('<div>').addClass('page').html($('#onePage').html());this.turn.turn('addPage', newPage, this.pages + 1); // 添加到末尾this.pages = this.pages + 1$("#flipbook").turn("pages", this.pages); //调试//console.log($('#flipbook').html()); }}}
</script><style>.container {display: flex;justify-content: center;align-items: center;height: 100vh;}#flipbook {width: 300px;height: 300px;background-color: #f0f0f0;}.page {width: 100%;height: 100%;display: flex;justify-content: center;align-items: center;background-color: #fff;border: 1px solid #ccc;box-sizing: border-box;font-size: 20px;color: #333;}
</style>两个js文件我也上传百度云盘作为备份
通过网盘分享的文件：uniapp使用turn.js
链接: https://pan.baidu.com/s/199ncUbcdcKaPNK9p-hnoRQ?pwd=hikp 提取码: hikp
jquery.js 是在网上找的
turn.js是在github下载的
Turn.js: The page flip effect in HTML5
GitHub - blasten/turn.js: The page flip effect for HTML5
app端的效果视频
通过网盘分享的文件：6542f4649d16ffe6b78bdf194547af58.mp4
链接: https://pan.baidu.com/s/1LGAGEm7KpibZ2QJTAYczZg?pwd=n37g 提取码: n37g
