uniapp h5端和app端 使用 turn.js

news/2025/2/23 18:24:34

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

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


http://www.niftyadmin.cn/n/5863663.html

相关文章

【Blender】二、建模篇--06，曲线建模/父子级和蒙皮修改器

【Blender】二、建模篇--06，曲线建模/父子级和蒙皮修改器

00:00:03,620 --> 00:00:09,500 前几节可能我们已经做了很多种类型的模型了 但是有一种类型 我们一直避开就是这种管道 1 00:00:10,050 --> 00:00:19,370 藤条头发啊 衣服架子啊这种弯弯绕绕的 需要一定柔软度的模型 那么这节课呢我们都来集中看一下曲线的模型 我们应该…
阅读更多...
红帽7基于kickstart搭建PXE环境

红帽7基于kickstart搭建PXE环境

Kickstart 文件是一种配置文件&#xff0c;用于定义 Linux 系统安装过程中的各种参数&#xff0c;如分区、网络配置、软件包选择等。system-config-kickstart 提供了一个图形界面&#xff0c;方便用户快速生成这些配置文件。 用户可以通过图形界面进行系统安装的详细配置&…
阅读更多...
verilog笔记

verilog笔记

Verilog学习笔记&#xff08;一&#xff09;入门和基础语法BY电棍233 由于某些不可抗拒的因素和各种的特殊原因&#xff0c;主要是因为我是微电子专业的&#xff0c;我需要去学习一门名为verilog的硬件解释语言&#xff0c;由于我是在某西部地区的神秘大学上学&#xff0c;这所…
阅读更多...
网络运维学习笔记 019 HCIA-Datacom综合实验03

网络运维学习笔记 019 HCIA-Datacom综合实验03

文章目录 综合实验3实验需求一&#xff1a;A公司网络规划二&#xff1a;B公司网络规划 配置一、ip、vlan、vlanif&#xff0c;stp、eth-trunkSW1SW2SW3R1 二、ospfSW1R1 三、NATR1ISP 四、拒绝ping允许httpSW1 五、右半部分vlan、dhcp、ospf、NATSW4R2 综合实验3 实验需求 一&…
阅读更多...
数据结构：队列queue和栈stack

数据结构：队列queue和栈stack

1.queue queue 是 C 标准库中的队列容器&#xff0c;基于先进先出&#xff08;FIFO&#xff09;的原则。队列适用于只允许从一端&#xff08;队尾&#xff09;添加元素、从另一端&#xff08;队头&#xff09;移除元素的场景。 常用操作示例&#xff1a; #include <iostr…
阅读更多...
【好玩的工具和命令】 ASCII 艺术生成工具： figlet

【好玩的工具和命令】 ASCII 艺术生成工具： figlet

figlet 是一款用于生成 ASCII 艺术文字的工具&#xff0c;支持多种字体样式。它能将输入的文本转换为由字符组成的大型字母图案&#xff0c;广泛应用于命令行环境下的标题展示或装饰。 核心功能 生成 ASCII 文字艺术&#xff1a;将普通文本转化为大号的、由字符构成的艺术字…
阅读更多...
[Java基础]网络编程

[Java基础]网络编程

介绍 可以让设备中的程序与网络上其他设备中的程序进行数据交互的技术(实现网络通信)。 网络通信架构 CS架构: Client客户端 / Server服务端 客户端需要程序员开发,需要用户安装服务端需要程序员开发 BS架构: Browser浏览器 / Server服务端 用户下载安装浏览器就行服务器需要…
阅读更多...
数据表的存储过程和函数介绍

数据表的存储过程和函数介绍

文章目录 一、概述二、创建存储过程三、在创建过程中使用变量四、光标的使用五、流程控制的使用六、查看和删除存储过程 一、概述 存储过程和函数是在数据库中定义的一些SQL语句的集合&#xff0c;然后直接调用这些存储过程和函数来执行已经定义好的SQL语句。存储过程和函数可…
阅读更多...
最新文章

Copyright @ 2022~2023