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

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代码仓库 架构 从高层次来看&#xff0c;这些系统的步骤如下&#xff1a; 将问题转换为SQL查询&#xff1a;模型将用户输入转换为SQL查询。 执行SQL查询&#xff1a;执行查询。 回答问题&#xff1a;模型根据查询结果响应用户输入。 样本数据 下载样本数据&#xf…...

时间转换(acwing)c/c++/java/python

读取一个整数值&#xff0c;它是工厂中某个事件的持续时间&#xff08;以秒为单位&#xff09;&#xff0c;请你将其转换为小时&#xff1a;分钟&#xff1a;秒来表示。 输入格式 输入一个整数 NN。 输出格式 输出转换后的时间表示&#xff0c;格式为 hours:minutes:second…...

连接Sql Server时报错无法通过使用安全套接字层加密与 SQL Server 建立安全连接

文章目录 一. 前言二. 解决方案 方案1方案2 三. 总结 一. 前言 在《数据库原理》这门课的实验上&#xff0c;需要使用SQL Server&#xff0c;然后使用jdbc连接sql server突然报错为&#xff1a;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&#xff08;同步通信&#xff09; ch : make(chan int) // 创建有缓冲 Channel&#xff08;容量为5&#xff0c;异步通信&#xff09; bufferedCh : make(chan int, 5) // 发送数据到 Channel ch <- 42 // 从…...

pyside6学习专栏(七):自定义QTableWidget的扩展子类QTableWidgetEx

PySide6界面编程中较常用的控件还有QTableWidget表格控件&#xff0c;用来将加载的数据在表格中显示出来&#xff0c;下面继承QTableWidget编写其扩展子类QTableWidgetEx,来实现用单元格来显示除数据文字外&#xff0c;还可以对表格的单元格的文字颜色、背景底色进行设置&#…...

Mybatis常用动态 SQL 相关标签

1. <if> 用于条件判断&#xff0c;当满足条件时执行对应的 SQL 片段。 示例: <select id"findUser" resultType"User">SELECT * FROM usersWHERE 11<if test"name ! null and name ! ">AND name #{name}</if><if…...

AWQ和GPTQ量化的区别

一、前言 本地化部署deepseek时发现&#xff0c;如果是量化版的deepseek&#xff0c;会节约很多的内容&#xff0c;然后一般有两种量化技术&#xff0c;那么这两种量化技术有什么区别呢&#xff1f; 二、量化技术对比 在模型量化领域&#xff0c;AWQ 和 GPTQ 是两种不同的量…...

ESP32S3:解决RWDT无法触发中断问题,二次开发者怎么才能使用内部RTC看门狗中断RWDT呢?

目录 基于ESP32S3:解决RWDT无法触发中断问题引言解决方案1. 查看报错日志2. 分析报错及一步一步找到解决方法3.小结我的源码基于ESP32S3:解决RWDT无法触发中断问题 引言 在嵌入式系统中,RWDT(看门狗定时器)是确保系统稳定性的重要组件。然而,在某些情况下,RWDT可能无法…...

基于SpringBoot的民宿管理系统的设计与实现(源码+SQL脚本+LW+部署讲解等)

专注于大学生项目实战开发,讲解,毕业答疑辅导&#xff0c;欢迎高校老师/同行前辈交流合作✌。 技术范围&#xff1a;SpringBoot、Vue、SSM、HLMT、小程序、Jsp、PHP、Nodejs、Python、爬虫、数据可视化、安卓app、大数据、物联网、机器学习等设计与开发。 主要内容&#xff1a;…...

go 日志框架

内置log import ("log""os" )func main() {// 设置loglog.SetFlags(log.Llongfile | log.Lmicroseconds | log.Ldate)// 自定义日志前缀log.SetPrefix("[pprof]")log.Println("main ..")// 如果用format就用PrintF&#xff0c;而不是…...

如何在 PDF 文件中嵌入自定义数据

由于 PDF 文件格式功能强大且灵活&#xff0c;它经常被用于内部工作流程。有时候&#xff0c;将自定义数据嵌入 PDF 文件本身会非常有用。通常&#xff0c;这些信息会被大多数工具忽略&#xff0c;因此 PDF 仍然可以作为普通 PDF 文件正常使用。 以下是一些实现方法&#xff1…...

计算机毕业设计SpringBoot+Vue.js服装商城 服装购物系统(源码+LW文档+PPT+讲解+开题报告)

温馨提示&#xff1a;文末有 CSDN 平台官方提供的学长联系方式的名片&#xff01; 温馨提示&#xff1a;文末有 CSDN 平台官方提供的学长联系方式的名片&#xff01; 温馨提示&#xff1a;文末有 CSDN 平台官方提供的学长联系方式的名片&#xff01; 作者简介&#xff1a;Java领…...

22.回溯算法4

递增子序列 这里不能排序&#xff0c;因为数组的顺序是对结果有影响的&#xff0c;所以只能通过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);作用&#xff1a;复制一个新的文件描述符fd 3, int fd1 dup(fd);f指向的是a.txt,fd1指向的也是a.txt从空闲的文件描述符表中找一个最小的作为新的拷贝的文件描述符返回&#xff1a;成功返回新的文件描述符&#xff0c;失败…...

技术解析 | 适用于TeamCity的Unreal Engine支持插件,提升游戏构建效率

龙智是JetBrains授权合作伙伴、Perforce授权合作伙伴&#xff0c;为您提供TeamCity、Perforce Helix Core等热门的游戏开发工具及一站式服务 TeamCity 是游戏开发的热门选择&#xff0c;大家选择它的原因包括支持 Perforce、可以进行本地安装&#xff0c;并提供了多种配置选项。…...

Ubuntu22.04 - brpc的安装和使用

目录 介绍安装使用 介绍 brpc 是用 c语言编写的工业级 RPC 框架&#xff0c;常用于搜索、存储、机器学习、广告、推荐等高性能系统 安装 先安装依赖 apt-get install -y git g make libssl-dev libprotobuf-dev libprotoc-dev protobuf-compiler libleveldb-dev libgflags-d…...

网络运维学习笔记 018 HCIA-Datacom综合实验02

文章目录 综合实验2sw3&#xff1a;sw4&#xff1a;gw&#xff1a;core1&#xff08;sw1&#xff09;&#xff1a;core2&#xff08;sw2&#xff09;&#xff1a;ISP 综合实验2 sw3&#xff1a; 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进入新界面后&#xff0c;再点击local disk按钮。 2、进入新界面后&#xff0c;在标红框的Base directory栏写上…...

微信小程序之bind和catch

这两个呢&#xff0c;都是绑定事件用的&#xff0c;具体使用有些小区别。 官方文档&#xff1a; 事件冒泡处理不同 bind&#xff1a;绑定的事件会向上冒泡&#xff0c;即触发当前组件的事件后&#xff0c;还会继续触发父组件的相同事件。例如&#xff0c;有一个子视图绑定了b…...

Zustand 状态管理库:极简而强大的解决方案

Zustand 是一个轻量级、快速和可扩展的状态管理库&#xff0c;特别适合 React 应用。它以简洁的 API 和高效的性能解决了 Redux 等状态管理方案中的繁琐问题。 核心优势对比 基本使用指南 1. 创建 Store // store.js import create from zustandconst useStore create((set)…...

visual studio 2022更改主题为深色

visual studio 2022更改主题为深色 点击visual studio 上方的 工具-> 选项 在选项窗口中&#xff0c;选择 环境 -> 常规 &#xff0c;将其中的颜色主题改成深色 点击确定&#xff0c;更改完成...

蓝桥杯 2024 15届国赛 A组 儿童节快乐

P10576 [蓝桥杯 2024 国 A] 儿童节快乐 题目描述 五彩斑斓的气球在蓝天下悠然飘荡&#xff0c;轻快的音乐在耳边持续回荡&#xff0c;小朋友们手牵着手一同畅快欢笑。在这样一片安乐祥和的氛围下&#xff0c;六一来了。 今天是六一儿童节&#xff0c;小蓝老师为了让大家在节…...

鸿蒙DevEco Studio HarmonyOS 5跑酷小游戏实现指南

1. 项目概述 本跑酷小游戏基于鸿蒙HarmonyOS 5开发&#xff0c;使用DevEco Studio作为开发工具&#xff0c;采用Java语言实现&#xff0c;包含角色控制、障碍物生成和分数计算系统。 2. 项目结构 /src/main/java/com/example/runner/├── MainAbilitySlice.java // 主界…...

MySQL 知识小结(一)

一、my.cnf配置详解 我们知道安装MySQL有两种方式来安装咱们的MySQL数据库&#xff0c;分别是二进制安装编译数据库或者使用三方yum来进行安装,第三方yum的安装相对于二进制压缩包的安装更快捷&#xff0c;但是文件存放起来数据比较冗余&#xff0c;用二进制能够更好管理咱们M…...

AirSim/Cosys-AirSim 游戏开发(四)外部固定位置监控相机

这个博客介绍了如何通过 settings.json 文件添加一个无人机外的 固定位置监控相机&#xff0c;因为在使用过程中发现 Airsim 对外部监控相机的描述模糊&#xff0c;而 Cosys-Airsim 在官方文档中没有提供外部监控相机设置&#xff0c;最后在源码示例中找到了&#xff0c;所以感…...

快刀集(1): 一刀斩断视频片头广告

一刀流&#xff1a;用一个简单脚本&#xff0c;秒杀视频片头广告&#xff0c;还你清爽观影体验。 1. 引子 作为一个爱生活、爱学习、爱收藏高清资源的老码农&#xff0c;平时写代码之余看看电影、补补片&#xff0c;是再正常不过的事。 电影嘛&#xff0c;要沉浸&#xff0c;…...

4. TypeScript 类型推断与类型组合

一、类型推断 (一) 什么是类型推断 TypeScript 的类型推断会根据变量、函数返回值、对象和数组的赋值和使用方式&#xff0c;自动确定它们的类型。 这一特性减少了显式类型注解的需要&#xff0c;在保持类型安全的同时简化了代码。通过分析上下文和初始值&#xff0c;TypeSc…...

Golang——7、包与接口详解

包与接口详解 1、Golang包详解1.1、Golang中包的定义和介绍1.2、Golang包管理工具go mod1.3、Golang中自定义包1.4、Golang中使用第三包1.5、init函数 2、接口详解2.1、接口的定义2.2、空接口2.3、类型断言2.4、结构体值接收者和指针接收者实现接口的区别2.5、一个结构体实现多…...