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…...
使用大语言模型(Deepseek)构建一个基于 SQL 数据的问答系统
GitHub代码仓库 架构 从高层次来看,这些系统的步骤如下: 将问题转换为SQL查询:模型将用户输入转换为SQL查询。 执行SQL查询:执行查询。 回答问题:模型根据查询结果响应用户输入。 样本数据 下载样本数据…...
时间转换(acwing)c/c++/java/python
读取一个整数值,它是工厂中某个事件的持续时间(以秒为单位),请你将其转换为小时:分钟:秒来表示。 输入格式 输入一个整数 NN。 输出格式 输出转换后的时间表示,格式为 hours:minutes:second…...
连接Sql Server时报错无法通过使用安全套接字层加密与 SQL Server 建立安全连接
文章目录 一. 前言二. 解决方案 方案1方案2 三. 总结 一. 前言 在《数据库原理》这门课的实验上,需要使用SQL Server,然后使用jdbc连接sql server突然报错为:SQLServerException: “Encrypt”属性设置为“true”且 “trustServerCertific…...
基于CNN的FashionMNIST数据集识别3——模型验证
源码 import torch import torch.utils.data as Data from torchvision import transforms from torchvision.datasets import FashionMNIST from model import LeNetdef test_data_process():test_data FashionMNIST(root./data,trainFalse,transformtransforms.Compose([tr…...
go channel 的用法和核心原理、使用场景
一、Channel 的核心用法 1. 基本操作 // 创建无缓冲 Channel(同步通信) ch : make(chan int) // 创建有缓冲 Channel(容量为5,异步通信) bufferedCh : make(chan int, 5) // 发送数据到 Channel ch <- 42 // 从…...
pyside6学习专栏(七):自定义QTableWidget的扩展子类QTableWidgetEx
PySide6界面编程中较常用的控件还有QTableWidget表格控件,用来将加载的数据在表格中显示出来,下面继承QTableWidget编写其扩展子类QTableWidgetEx,来实现用单元格来显示除数据文字外,还可以对表格的单元格的文字颜色、背景底色进行设置&#…...
Mybatis常用动态 SQL 相关标签
1. <if> 用于条件判断,当满足条件时执行对应的 SQL 片段。 示例: <select id"findUser" resultType"User">SELECT * FROM usersWHERE 11<if test"name ! null and name ! ">AND name #{name}</if><if…...
AWQ和GPTQ量化的区别
一、前言 本地化部署deepseek时发现,如果是量化版的deepseek,会节约很多的内容,然后一般有两种量化技术,那么这两种量化技术有什么区别呢? 二、量化技术对比 在模型量化领域,AWQ 和 GPTQ 是两种不同的量…...
ESP32S3:解决RWDT无法触发中断问题,二次开发者怎么才能使用内部RTC看门狗中断RWDT呢?
目录 基于ESP32S3:解决RWDT无法触发中断问题引言解决方案1. 查看报错日志2. 分析报错及一步一步找到解决方法3.小结我的源码基于ESP32S3:解决RWDT无法触发中断问题 引言 在嵌入式系统中,RWDT(看门狗定时器)是确保系统稳定性的重要组件。然而,在某些情况下,RWDT可能无法…...
基于SpringBoot的民宿管理系统的设计与实现(源码+SQL脚本+LW+部署讲解等)
专注于大学生项目实战开发,讲解,毕业答疑辅导,欢迎高校老师/同行前辈交流合作✌。 技术范围:SpringBoot、Vue、SSM、HLMT、小程序、Jsp、PHP、Nodejs、Python、爬虫、数据可视化、安卓app、大数据、物联网、机器学习等设计与开发。 主要内容:…...
go 日志框架
内置log import ("log""os" )func main() {// 设置loglog.SetFlags(log.Llongfile | log.Lmicroseconds | log.Ldate)// 自定义日志前缀log.SetPrefix("[pprof]")log.Println("main ..")// 如果用format就用PrintF,而不是…...
如何在 PDF 文件中嵌入自定义数据
由于 PDF 文件格式功能强大且灵活,它经常被用于内部工作流程。有时候,将自定义数据嵌入 PDF 文件本身会非常有用。通常,这些信息会被大多数工具忽略,因此 PDF 仍然可以作为普通 PDF 文件正常使用。 以下是一些实现方法࿱…...
计算机毕业设计SpringBoot+Vue.js服装商城 服装购物系统(源码+LW文档+PPT+讲解+开题报告)
温馨提示:文末有 CSDN 平台官方提供的学长联系方式的名片! 温馨提示:文末有 CSDN 平台官方提供的学长联系方式的名片! 温馨提示:文末有 CSDN 平台官方提供的学长联系方式的名片! 作者简介:Java领…...
22.回溯算法4
递增子序列 这里不能排序,因为数组的顺序是对结果有影响的,所以只能通过used数组来去重 class Solution { public:vector<int> path;vector<vector<int>> res;void backtracking(vector<int>& nums,int start){if(path.si…...
linux -对文件描述符的操作dup、fcntl有五种
dup #include<unistd.h> int dup(int oldfd);作用:复制一个新的文件描述符fd 3, int fd1 dup(fd);f指向的是a.txt,fd1指向的也是a.txt从空闲的文件描述符表中找一个最小的作为新的拷贝的文件描述符返回:成功返回新的文件描述符,失败…...
技术解析 | 适用于TeamCity的Unreal Engine支持插件,提升游戏构建效率
龙智是JetBrains授权合作伙伴、Perforce授权合作伙伴,为您提供TeamCity、Perforce Helix Core等热门的游戏开发工具及一站式服务 TeamCity 是游戏开发的热门选择,大家选择它的原因包括支持 Perforce、可以进行本地安装,并提供了多种配置选项。…...
Ubuntu22.04 - brpc的安装和使用
目录 介绍安装使用 介绍 brpc 是用 c语言编写的工业级 RPC 框架,常用于搜索、存储、机器学习、广告、推荐等高性能系统 安装 先安装依赖 apt-get install -y git g make libssl-dev libprotobuf-dev libprotoc-dev protobuf-compiler libleveldb-dev libgflags-d…...
网络运维学习笔记 018 HCIA-Datacom综合实验02
文章目录 综合实验2sw3:sw4:gw:core1(sw1):core2(sw2):ISP 综合实验2 sw3: vlan 2 stp mode stp int e0/0/1 port link-type trunk port trunk allow-pass v…...
Vulhub靶机 Apache Druid(CVE-2021-25646)(渗透测试详解)
一、开启vulhub环境 docker-compose up -d 启动 docker ps 查看开放的端口 1、漏洞范围 在Druid0.20.0及更低版本中 二、访问靶机IP 8888端口 1、点击Load data进入新界面后,再点击local disk按钮。 2、进入新界面后,在标红框的Base directory栏写上…...
Ubuntu系统下交叉编译openssl
一、参考资料 OpenSSL&&libcurl库的交叉编译 - hesetone - 博客园 二、准备工作 1. 编译环境 宿主机:Ubuntu 20.04.6 LTSHost:ARM32位交叉编译器:arm-linux-gnueabihf-gcc-11.1.0 2. 设置交叉编译工具链 在交叉编译之前&#x…...
深入剖析AI大模型:大模型时代的 Prompt 工程全解析
今天聊的内容,我认为是AI开发里面非常重要的内容。它在AI开发里无处不在,当你对 AI 助手说 "用李白的风格写一首关于人工智能的诗",或者让翻译模型 "将这段合同翻译成商务日语" 时,输入的这句话就是 Prompt。…...
R语言AI模型部署方案:精准离线运行详解
R语言AI模型部署方案:精准离线运行详解 一、项目概述 本文将构建一个完整的R语言AI部署解决方案,实现鸢尾花分类模型的训练、保存、离线部署和预测功能。核心特点: 100%离线运行能力自包含环境依赖生产级错误处理跨平台兼容性模型版本管理# 文件结构说明 Iris_AI_Deployme…...
【Go】3、Go语言进阶与依赖管理
前言 本系列文章参考自稀土掘金上的 【字节内部课】公开课,做自我学习总结整理。 Go语言并发编程 Go语言原生支持并发编程,它的核心机制是 Goroutine 协程、Channel 通道,并基于CSP(Communicating Sequential Processes࿰…...
从零开始打造 OpenSTLinux 6.6 Yocto 系统(基于STM32CubeMX)(九)
设备树移植 和uboot设备树修改的内容同步到kernel将设备树stm32mp157d-stm32mp157daa1-mx.dts复制到内核源码目录下 源码修改及编译 修改arch/arm/boot/dts/st/Makefile,新增设备树编译 stm32mp157f-ev1-m4-examples.dtb \stm32mp157d-stm32mp157daa1-mx.dtb修改…...
关于 WASM:1. WASM 基础原理
一、WASM 简介 1.1 WebAssembly 是什么? WebAssembly(WASM) 是一种能在现代浏览器中高效运行的二进制指令格式,它不是传统的编程语言,而是一种 低级字节码格式,可由高级语言(如 C、C、Rust&am…...
k8s业务程序联调工具-KtConnect
概述 原理 工具作用是建立了一个从本地到集群的单向VPN,根据VPN原理,打通两个内网必然需要借助一个公共中继节点,ktconnect工具巧妙的利用k8s原生的portforward能力,简化了建立连接的过程,apiserver间接起到了中继节…...
智能分布式爬虫的数据处理流水线优化:基于深度强化学习的数据质量控制
在数字化浪潮席卷全球的今天,数据已成为企业和研究机构的核心资产。智能分布式爬虫作为高效的数据采集工具,在大规模数据获取中发挥着关键作用。然而,传统的数据处理流水线在面对复杂多变的网络环境和海量异构数据时,常出现数据质…...
Web 架构之 CDN 加速原理与落地实践
文章目录 一、思维导图二、正文内容(一)CDN 基础概念1. 定义2. 组成部分 (二)CDN 加速原理1. 请求路由2. 内容缓存3. 内容更新 (三)CDN 落地实践1. 选择 CDN 服务商2. 配置 CDN3. 集成到 Web 架构 …...
Java 二维码
Java 二维码 **技术:**谷歌 ZXing 实现 首先添加依赖 <!-- 二维码依赖 --><dependency><groupId>com.google.zxing</groupId><artifactId>core</artifactId><version>3.5.1</version></dependency><de…...
