当前位置：首页 > news >正文

uniapp h5端和app端使用 turn.js

news 2025/2/22 20:06:21

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

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

查看全文

http://www.mrgr.cn/news/91913.html