uniapp h5端和app端 使用 turn.js

前提:添加页后,添加页与当前页会重叠在一起,不知道为什么,没有找到解决办法

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.js
	import $ 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.js
				const loadScript = (src, callback) => {
					const script = document.createElement('script');
					script.src = src;
					script.onload = callback;
					document.head.appendChild(script);
				};
				console.log(2222);
				// 加载 jQuery
				loadScript('http://192.168.1.95:9300/statics/jquery-3.5.1.min.js', () => {
					// 加载 turn.js
					console.log(333);
					loadScript('http://192.168.1.95:9300/statics/turn.min.js', () => {
						// 初始化 turn.js
						console.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.js
				const loadScript = (src, callback) => {
					const script = document.createElement('script');
					script.src = src;
					script.onload = callback;
					document.head.appendChild(script);
				};
				// 加载 jQuery
				loadScript('http://192.168.1.95:9300/statics/jquery-3.5.1.min.js', () => {
					// 加载 turn.js
					loadScript('http://192.168.1.95:9300/statics/turn.min.js', () => {
						// 初始化 turn.js
						that.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