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.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
相关文章：
uniapp h5端和app端 使用 turn.js
前提:添加页后,添加页与当前页会重叠在一起,不知道为什么,没有找到解决办法 1.h5端 <template><view class"container"><view id"flipbook"><view class"page page1">Page 1</view><view class"page pag…...
智慧校园系统在学生学习与生活中的应用
随着科技的快速发展，智慧校园系统逐渐成为现代教育不可或缺的一部分。它整合了先进的信息技术、物联网技术以及人工智能等，旨在构建一个全面、智能、个性化的学习与生活环境。对于学生而言，这一系统不仅能够极大地提高学习效率，还…...
umi: valtio的使用
一、基本用法 import { proxy, useSnapshot } from umijs/max;// 1、定义数据 const state proxy({ count: 33 });export default () > {// 2、使用数据const snap useSnapshot(state);function increaseCount() {state.count 1;}return (<><h1>{snap.count}…...
什么是矩阵账号？如何高效运营tiktok矩阵账号
…...
C语言.h头文件的写法
头文件的内容 #ifndef __SEQUENCE_LIST_H // 定义以防止递归包含 #define __SEQUENCE_LIST_H // (1)、其它头文件 #include <stdio.h> #include <stdlib.h> #include <strings.h> #include <stdbool.h> // (2)、宏定义(函数、变量、常量) // (3)、…...
【Day44 LeetCode】图论问题 Ⅱ
一、图论问题 Ⅱ 1、岛屿的最大面积 这题和上一篇博客求岛屿数量如出一辙，都是要找出所有岛屿，深度优先搜索代码如下： # include<iostream> # include<vector>using namespace std;int dfs(vector<vector<int>> …...
设计模式教程：责任链模式（Chain of Responsibility Pattern）
责任链模式（Chain of Responsibility Pattern）是一种常用的设计模式，它属于行为型模式，主要解决的是多个对象处理一个请求时，如何解耦请求的发送者和接收者，以及如何将请求的处理职责分配给不同的对象。 1…...
java网络编程
计算机网络基础 网络编程的目的就是直接或间接地通过网络协议与其他计算机进行通信。 在 Java 语言中包含网络编程所需要的各种类，编程人员只需要创建这些类的对象，调用相应的方法，就可以进行网络应用程序的编写。 要进行网络程序的编写&am…...
计算机网络面试知识点总结
目录 1. 计算机网络的基本知识点2. OSI 七层模型3. TCP/IP 四层模型4. TCP 和 UDP4.1 TCP 协议4.2 TCP 流量控制4.3 TCP 拥塞控制4.4 TCP 三次握手4.5 TCP 四次挥手4.6 TCP 粘包问题4.7 TCP Socket交互流程4.8 UDP 协议以及和 TCP 协议的不同 5. HTTP协议5.1 HTTP 请求方法以及…...
ubuntu22.4搭建单节点es8.1
下载对应的包 elasticsearch-8.1.1-linux-x86_64.tar.gz 创建es租户 groupadd elasticsearc useradd elasticsearch -g elasticsearch -p elasticsearch chmod uw /etc/sudoers chmod -R elasticsearch:elasticsearch elasticsearch 修改配置文件 vim /etc/sysctl.conf vm…...
卷积与动态特征选择：重塑YOLOv8的多尺度目标检测能力
文章目录 1. YOLOv8的网络结构概述2. 添加注意力机制2.1 为什么添加注意力机制？2.2 如何将注意力机制集成到YOLOv8中？2.3 效果分析 3. C2f模块的集成3.1 C2f模块简介3.2 如何在YOLOv8中集成C2f模块？3.3 效果分析 4. 卷积操作的优化4.1 卷积操…...
【Altium Designer】差分对等长设置以及绕线
在Altium Designer 17中设置差分对的等差规则及绕等长操作，需结合规则配置与交互式布线工具完成。以下是详细操作步骤： 目录 一、差分对等差规则设置 1. 原理图端差分对定义 2. PCB端差分规则配置 二、差分对等长绕线操作 1. 差分对布线 2. 交互式…...
BFS 和 DFS（深度优先搜索、广度优先搜索）
深度优先搜索（DFS）和广度优先搜索（BFS）是两种常用的图遍历算法，用于解决图相关的问题。它们在搜索问题中具有广泛的应用，如路径搜索、连通性检测等。 以下是具体区别： （图片引自&am…...
汽车免拆诊断案例 | 2013 款奔驰 S300L 车起步时车身明显抖动
故障现象 一辆2013款奔驰S300L车，搭载272 946发动机，累计行驶里程约为15万km。车主反映，将挡位置于D挡，稍微释放一点制动踏板，车辆蠕动时车身明显抖动，类似气缸失火时的抖动，又类似手动变速器…...
的太空探索)
基于UnrealEngine(UE5)的太空探索
视频部分可参见：https://www.bilibili.com/video/BV1JWA8eSEVg/ 中国 天宫号 空间站 人造卫星可视化 星链卫星可视化 小行星分布及运动轨迹可视化 月球基地 可视化 八大行星轨道 太阳系宜居带可视化 阿波罗8号拍摄的地球升起 谷神星模型及轨迹可视化 星座可视化 十…...
入门教程)
HTML Application(hta)入门教程
简介 HTA是HTML Application的缩写，又称为HTML应用程序。 hta是一个可执行文件，双击可以直接运行 hta与html非常相似，可直接将文件后缀改为.hta来获得HTA格式的文件。 支持VBS和JavaScript html的权限被限制在网页浏览器内，只有操…...
IOS UITextField 无法隐藏键盘问题
设置UITextField 键盘按钮返回键为“完成”，即return key 设置done .m代码设置代理 //设置代理协议 UITextFieldDelegate， self.mobileTextField.delegate self; ///点击完成键隐藏键盘 - (BOOL)textFieldShouldReturn:(UITextField *)textField{//取…...
ES6箭头函数：基础与进阶指南
目录 引言 一、基础篇：核心语法与特性 1.1 语法革新 1.2 this绑定机制 二、进阶篇：深度特性解析 2.1 闭包中的this继承 2.2 限制与注意事项 三、实践指南：应用场景与陷阱规避 3.1 推荐使用场景 3.2 应避免的场景 四、性能考量 结语…...
AI赋能编程：PyCharm与DeepSeek的智能开发革命
在这个智能化的时代，人工智能技术正在深刻地改变着我们的工作方式，尤其是在编程领域。无论是初学者还是资深开发者，都希望借助更高效的工具和智能助手来提升生产力、优化代码质量。今天，我们将聚焦于两个强大的工具：Py…...
在Spring Boot中如何使用Freemaker模板引擎
在 Spring Boot 中使用 FreeMarker 模板引擎可以帮助你创建动态的 Web 页面。以下是详细的步骤和示例代码，介绍如何在 Spring Boot 项目里集成和使用 FreeMarker。 1. 添加依赖 如果你使用的是 Maven 项目，需要在 pom.xml 文件中添加 FreeMarker 相关依赖。Spring Boot 提供…...
【论文精读】VLM-AD：通过视觉-语言模型监督实现端到端自动驾驶
论文地址： VLM-AD: End-to-End Autonomous Driving through Vision-Language Model Supervision 摘要 人类驾驶员依赖常识推理来应对复杂多变的真实世界驾驶场景。现有的端到端（E2E）自动驾驶（AD）模型通常被优化以模仿…...
【HarmonyOS Next】鸿蒙应用进程和线程详解
【HarmonyOS Next】鸿蒙应用进程和线程详解 一、前言 进程的定义： 进程是系统进行资源分配的基本单位，是操作系统结构的基础。 在鸿蒙系统中，一个应用下会有三类进程： (1) 主进程， (2) ExtensionAbility进程ÿ…...
基于深度学习的信号滤波：创新技术与应用挑战
一、引言 1.1 研究背景 随着科技的不断发展，信号处理领域面临着越来越复杂的挑战。在众多信号处理技术中，基于深度学习的信号滤波技术逐渐崭露头角，成为研究的热点。 基于深度学习的信号滤波在信号处理领域具有至关重要的地位。如今&#…...
从【人工智能】到【计算机视觉】，【深度学习】引领的未来科技创新与变革
前几天偶然发现了一个超棒的人工智能学习网站，内容通俗易懂，讲解风趣幽默，简直让人欲罢不能。忍不住分享给大家，点击这里立刻跳转，开启你的AI学习之旅吧！ 前言 – 人工智能教程https://www.captainbed.cn/l…...
什么是方法
System.out.println(),那么它是什么呢？ Java方法是语句的集合，它们在一起执行一个功能。 方法是解决一类问题的步骤的有序组合 方法包含于类或对象中 方法在程序中被创建，在其他地方被使用 这段Java代码出现错误的原因在于，在…...
 方法详解：用途、应用场景及示例解析（中英双语）)
Python strip() 方法详解：用途、应用场景及示例解析（中英双语）
Python strip() 方法详解：用途、应用场景及示例解析 在 Python 处理字符串时，经常会遇到字符串前后存在多余的空格或特殊字符的问题。strip() 方法就是 Python 提供的一个强大工具，专门用于去除字符串两端的指定字符。本文将详细介绍 strip(…...
合并区间（56）
56. 合并区间 - 力扣（LeetCode） 解法： class Solution { public:vector<vector<int>> merge(vector<vector<int>>& intervals) {if (intervals.size() 1) {return intervals;}//现根据每一项的第一个值&#…...
如何保存爬虫获取商品评论的数据？
保存爬取的评论数据是爬虫项目中的一个重要环节。根据需求，你可以选择将数据保存为本地文件（如CSV、JSON、TXT），或者存储到数据库（如MySQL、MongoDB等）。以下是几种常见的数据保存方式及其示例代码。 1. 保…...
使用docker配置PostgreSQL
配置docker阿里云镜像仓库 国内使用docker hub拉取镜像比较慢，所以首先配置个人的镜像仓库。 阿里云的个人镜像仓库是免费的，对个人来说足够用。 具体操作参考阿里云官方链接 。 关于个人镜像仓库的使用参考链接。 配置完个人镜像仓库后将公网配置到doc…...
阿里云虚机的远程桌面登录提示帐户被锁定了
提示由于安全原因，帐户被锁定。 阿里云虚机ECS的远程桌面登录提示帐户被锁定了，只能登录阿里云处理 阿里云-计算，为了无法计算的价值 需选择通过VNC连接 然后计算机管理，解除帐户锁定即可。...
)
SAP on Microsoft Azure Architecture and Administration (Ravi Kashyap)
SAP on Microsoft Azure Architecture and Administration (Ravi Kashyap)...
抽象类、接口、枚举
一、抽象类 1.1 简介 作为父类，里面的方法逻辑不能满足任何一个子类的需求，提供的逻辑根本就用不上，那么就不添加方法体了，此时这个方法需要 使用关键字abstract来修饰，表示为抽象方法，而抽象方法所在的类…...
GO系列-IO 文件操作
os io 判断文件是否存在 func fileExist(filePath string) (bool, error) {_, err : os.Stat(filePath)if err nil {return true, nil}if os.IsNotExist(err) {return false, nil}return false, &CheckFileExistError{filePath} } 读取文件内容 func readFileContext(…...
【前端】使用WebStorm创建第一个项目
文章目录 前言一、步骤1、启动2、创建项目3、配置Node.js4、运行项目 二、Node.js介绍 前言 根据前面文章中记录的步骤，已经安装好了WebStorm开发软件，接下来我们就用这个IDE开发软件创建第一个项目。 一、步骤 1、启动 启动软件。 2、创建项目 新建…...
自定义类型：结构体，枚举，联合
结构体 结构体的基本声明 基础知识：结构是一些值的集合，这些值称为成员变量，结构的每个成员可以是不同类型的变量。 //学生 struct Stu {//学生的相关信息char name[20];int age; }s1,s2; //s1,s2是直接创建的结构体变量（全局变…...
)
柠檬水找零(力扣860)
这道题的贪心很简单，就是体现在对于20元的找零上。根据题意，20元有两种找零方式：1.找一张5元和一张10元；2.找3张5元。但是5元比较万能，因为无论是10还是20都需要用5元来找零，所以我们优先考虑第一种找零方式…...
sprintf和sscanf的用法和区别
sprintf和sscanf是C语言中常用的字符串处理函数，它们各自有不同的用途和用法。 1、sprintf的用法 sprintf函数主要用于将数据格式化为字符串并存储在指定的缓冲区中。其函数原型为： int sprintf(char *str, const char *format, ...); str：…...
deepseek自动化代码生成
使用流程 效果第一步：注册生成各种大模型的API第二步：注册成功后生成API第三步：下载vscode在vscode中下载agent，这里推荐使用cline 第四步：安装完成后，设置模型信息第一步选择API provider： Ope…...
静态时序分析：时钟组间的逻辑独立、物理独立和异步的区别
相关阅读 静态时序分析https://blog.csdn.net/weixin_45791458/category_12567571.html 当设计中存在多个时钟（同步或异步）时，该如何使用SDC命令约束设计呢？本文就将对此进行讨论。 逻辑独立 例1 多个时钟完全逻辑独立 图1 逻辑…...
深入HBase——数据结构与算法
引入 通过前面的文章，我们对HBase已经有了基本认识，下面我们从HBase最核心的算法和数据结构进一步深入HBase。 HBase的一个列簇（Column Family）本质上就是一棵LSM树（Log-Structured Merge-Tree）。LSM树…...
学习Linux准备2
使用win10系统带的wsl配置ubuntu系统，通过wsl功能我们可以更简单更轻松的获得Linux系统环境。 首先开启Windows自带的wsl功能 打开控制面板，选中启用或关闭Windows功能 这里我们点击进入 将上图红√点击上，点击确定，然后重新启动…...
MATLAB图像处理：图像分割方法
图像分割将图像划分为具有特定意义的子区域，是目标检测、医学影像分析、自动驾驶等领域的核心预处理步骤。本文讲解阈值分割、边缘检测、区域生长、聚类分割、基于图的方法等经典与前沿技术，提供MATLAB代码实现。 目录 1. 图像分割基础 2. 经典分割方…...
什么是“可迭代”
在 Python 中，“可迭代”（Iterable）是一个非常重要的概念，它指的是任何可以被逐个访问其元素的对象。换句话说，如果一个对象支持迭代操作（比如可以通过 for 循环逐个访问其元素），那么…...
使用Ubuntu搭建Java部署环境
White graces：个人主页 🙉专栏推荐:Java入门知识🙉 🐹今日诗词:小舟从此逝，江海寄余生🐹 ⛳️点赞 ☀️收藏⭐️关注💬卑微小博主🙏 ⛳️点赞 ☀️收藏⭐️关注💬卑微小…...
Linux 文件的三个时间：Access、Modify 和 Change
目录 一、文件的三个时间戳 1. 访问时间（Access Time） 2. 修改时间（Modify Time） 3. 更改时间（Change Time） 二、如何查看文件的三个时间戳 三、文件时间戳的变化规则 1. 修改文件内容 2. 修改文件…...
移植live555 上的 rtsp
一、V4L2视频采集模块（完整示例） #include <linux/videodev2.h> #include <sys/ioctl.h> #include <fcntl.h>// 初始化V4L2摄像头 int init_v4l2_camera(const char* dev_path, int width, int height) {int fd open(dev_path, O_RD…...
)
基于SpringBoot的“宠物救助及领养平台”的设计与实现（源码+数据库+文档+PPT)
基于SpringBoot的“宠物救助及领养平台”的设计与实现（源码数据库文档PPT) 开发语言：Java 数据库：MySQL 技术：SpringBoot 工具：IDEA/Ecilpse、Navicat、Maven 系统展示 系统整体功能图 系统首页界面 系统注册页面…...
Gemini 2.0助力科学突破，AI联合科学家系统登场
每周跟踪AI热点新闻动向和震撼发展 想要探索生成式人工智能的前沿进展吗？订阅我们的简报，深入解析最新的技术突破、实际应用案例和未来的趋势。与全球数同行一同，从行业内部的深度分析和实用指南中受益。不要错过这个机会，成为AI领…...
electron提升软件运行权限，以管理员权限运行
大家有任何想法，都可以联系博主沟通。 本系列为实战文章，最终实现的桌面工具软件，获取方式：百度网盘地址：https://pan.baidu.com/s/1yrl0jYpti7QCn8CHBRT2lw?pwd1234 正文开始 前言一、提升electron运行权限的三种方…...
Docker 容器调试技巧
在开发和运维过程中，调试 Docker 容器中的应用或服务是一个常见且重要的任务。由于容器是相互隔离的，容器内部的日志和错误信息可能不像传统的服务器那样直观，因此掌握 Docker 容器调试技巧对于快速定位和解决问题至关重要。 本文将介绍一些…...