uni-app h5、app模式下集成turn.js 翻书动画

已于 2023-04-22 11:00:52 修改
阅读量3.6k 收藏 12
点赞数 4
文章标签： javascript uni-app 前端
于 2022-09-07 21:49:30 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/tuoni123/article/details/126754639
版权

uni-app 集成turnjs 翻书动画

  • h5

页面 引入JQuery、turn.js 工具类文件，注意引入的顺序

import '@/utils/jquery.min.1.7.js';
import turn from '@/utils/turn.js';

关于uni-app 引入JQuery 可以查看 Vue、uni-app（H5、App）引入Jquery配置教程 介绍的比较详细，本示例教程全部都是文件引入使用方式。

完整页面代码如下：

<template>
  <view class="flipbook-viewport">
    <view class="container">
      <view class="flipbook">
        <view v-for="(item) in imgUrl" :key="item.index"
          :style="`background-image:url(${item.imgurl})`">
        </view>
      </view>
    </view>
  </view>
</template>
<script>
  import '@/utils/jquery.min.1.7.js';
  import turn from '@/utils/turn.js';
  export default {
    data() {
      return {
        width: uni.getSystemInfoSync().windowWidth,
        height: '800px',
        text: 'hello',
        imgUrl: [
          {
            imgurl: 'static/image/1.jpg',
            index: 1
          },
        
          {
            imgurl: 'static/image/2.jpg',
            index: 2
          },
        
          {
            imgurl: 'static/image/3.jpg',
            index: 3
          },
        
          {
            imgurl: 'static/image/4.jpg',
            index: 4
          },
        
          {
            imgurl: 'static/image/5.jpg',
            index: 5
          },
        
          {
            imgurl: 'static/image/6.jpg',
            index: 6
          },
        
          {
            imgurl: 'static/image/7.jpg',
            index: 7
          },
        
          {
            imgurl: 'static/image/8.jpg',
            index: 8
          },
        
          {
            imgurl: 'static/image/9.jpg',
            index: 9
          },
        
          {
            imgurl: 'static/image/10.jpg',
            index: 10
          },
        
          {
            imgurl: 'static/image/11.jpg',
            index: 11
          },
        
          {
            imgurl: 'static/image/12.jpg',
            index: 12
          },
        
        ]

      }

    },
    onReady() {
       this.onTurn();
    },
    methods: {
      onTurn() {
        $(".flipbook").turn({
          autoCenter: true,
          display: 'single',
          height: this.height,
          width: this.width,
          elevation: 50,
          gradients: true,
        });
      }
    },

  }
</script>

<style lang="scss">

.flipbook-viewport{
  overflow:hidden;
  width:100%;
  height:100%;
  
  .container{
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
  }
  
  .flipbook ::v-deep .page{
    background-color: white;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    
    -webkit-box-shadow:0 0 20px rgba(0,0,0,0.2);
    -moz-box-shadow:0 0 20px rgba(0,0,0,0.2);
    -ms-box-shadow:0 0 20px rgba(0,0,0,0.2);
    -o-box-shadow:0 0 20px rgba(0,0,0,0.2);
    box-shadow:0 0 20px rgba(0,0,0,0.2);
    
    img {
      -webkit-touch-callout: none;
      -webkit-user-select: none;
      -khtml-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      user-select: none;
      margin:0;
    }
  }

  .shadow{
    -webkit-transition: -webkit-box-shadow 0.5s;
    -moz-transition: -moz-box-shadow 0.5s;
    -o-transition: -webkit-box-shadow 0.5s;
    -ms-transition: -ms-box-shadow 0.5s;
  
    -webkit-box-shadow:0 0 20px #ccc;
    -moz-box-shadow:0 0 20px #ccc;
    -o-box-shadow:0 0 20px #ccc;
    -ms-box-shadow:0 0 20px #ccc;
    box-shadow:0 0 20px #ccc;
  }
}
</style>

在uni-app项目里运行上面的页面代码即可查看效果，图片需要自己准备一下可以用官网的图片或者自定义即可，官网的示例提供了相关的工具类文件，turnjs 官网地址： http://turnjs.com/

图片

下载包中包含示例代码和文档，找到里面的文件 lib/turn.js

图片

uni-app 项目的目录结构图：

图片

  • app-plus

app-plus模式集成turnjs，是不被识别的，因为它依赖第三方dom，所以需要借助renderJS 实现效果。完整代码如下：

<template>
  <view class="flipbook-viewport" :rect="rect" :change:rect="updateRenderData">
    <view class="container">
      <view class="flipbook">
        <view v-for="(item) in imgUrl" :key="item.index"
          :style="`background-image:url(http://192.168.122.102:8080/${item.imgurl})`">
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    computed:{
      rect(){
        return {
          width: this.width,
          height: this.height
        }
      }
    },
    data() {
      return {
        width: uni.getSystemInfoSync().windowWidth,
        height: '800px',
        text: 'hello',
        imgUrl: [
          {
            imgurl: 'static/image/1.jpg',
            index: 1
          },
        
          {
            imgurl: 'static/image/2.jpg',
            index: 2
          },
        
          {
            imgurl: 'static/image/3.jpg',
            index: 3
          },
        
          {
            imgurl: 'static/image/4.jpg',
            index: 4
          },
        
          {
            imgurl: 'static/image/5.jpg',
            index: 5
          },
        
          {
            imgurl: 'static/image/6.jpg',
            index: 6
          },
        
          {
            imgurl: 'static/image/7.jpg',
            index: 7
          },
        
          {
            imgurl: 'static/image/8.jpg',
            index: 8
          },
        
          {
            imgurl: 'static/image/9.jpg',
            index: 9
          },
        
          {
            imgurl: 'static/image/10.jpg',
            index: 10
          },
        
          {
            imgurl: 'static/image/11.jpg',
            index: 11
          },
        
          {
            imgurl: 'static/image/12.jpg',
            index: 12
          },
        
        ]
      }
    }
  }
</script>
<script lang="renderjs" module="turnjs">
  import '@/utils/jquery.min.1.7.js';
  import turn from '@/utils/turn.js';
  export default {
    data(){
      return{
        width: '',
        height: ''
      }
    },
    mounted(){
      this.onTurn();
    },
    methods:{
      updateRenderData(newVal, oldVal){
        let {width, height} = newVal;
        this.width = width;
        this.height = height;
      },
      onTurn() {
        $(".flipbook").turn({
          autoCenter: true,
          display: 'single',
          height: this.height,
          width: this.width,
          elevation: 50,
          gradients: true,
          
        });
      }
    }
  }
</script>
<style lang="scss">
.father {
  position: relative;
}
.fixed {
  position: fixed;
  width: 100%;
  height: 100%;
  /* top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1; */
}
.abs{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
}
.flipbook-viewport{
  overflow:hidden;
  width:100%;
  height:100%;
  
  .container{
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
  }
  
  .flipbook ::v-deep .page{
    background-color: white;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    
    -webkit-box-shadow:0 0 20px rgba(0,0,0,0.2);
    -moz-box-shadow:0 0 20px rgba(0,0,0,0.2);
    -ms-box-shadow:0 0 20px rgba(0,0,0,0.2);
    -o-box-shadow:0 0 20px rgba(0,0,0,0.2);
    box-shadow:0 0 20px rgba(0,0,0,0.2);
    
    img {
      -webkit-touch-callout: none;
      -webkit-user-select: none;
      -khtml-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      user-select: none;
      margin:0;
    }
  }

  .shadow{
    -webkit-transition: -webkit-box-shadow 0.5s;
    -moz-transition: -moz-box-shadow 0.5s;
    -o-transition: -webkit-box-shadow 0.5s;
    -ms-transition: -ms-box-shadow 0.5s;
  
    -webkit-box-shadow:0 0 20px #ccc;
    -moz-box-shadow:0 0 20px #ccc;
    -o-box-shadow:0 0 20px #ccc;
    -ms-box-shadow:0 0 20px #ccc;
    box-shadow:0 0 20px #ccc;
  }
}
</style>

将以上代码放到uni-app 项目中 page/index/index.vue 发布到手机模拟器或者真机上运行效果即可查看，IP地址：http://192.168.122.102:8080 需要更换成自己的

以上两种模式 ，简要的介绍了使用方式和配置，所设计到的工具类，都可以通过官网 http://turnjs.com/ 下载，包括图片也都有，只不过这个是JQuery版本，技术有点老了，所以需要用Vue重新构建一次才是最佳的使用。

tuonioooo
关注
  • 4
    点赞
  • 踩
  • 12
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
uniapp开发epub阅读器保姆级教程
m0_60189088的博客
01-17 2309
阅读器的基本功能：翻页、字体大小设置、切换背景主题色、进度条功能、目录与跳转、添加书签、获取电子书信息、获取当前章节总页码和页数等。
基于Uni-app+Node.js音乐听歌系统的设计与实现
06-06
主要创新工作：采用Uni-app + Node分离式开发模式，简化前后端交互；开发者通过uni-app编写一套代码，可发布到iOS、Android、H5、以及各种小程序（微信/支付宝/百度/头条/QQ/钉钉/淘宝）、快应用等多个平台。
HTML5 book 电子书翻页效果
06-12
一款比较常见的html5翻页效果，鼠标点击拖拽滑动即可实现翻页，页面内容支持点击放大。 缺点是目前地址，内容都不支持中文，否则会出现翻页不顺畅的效果
uniapp app端运用renderjs使用turnjs，打造电子书仿真翻书效果
wh4834的博客
03-29 3087
uniapp app端引入turnjs
（uniapp）简单带动画的tab切换效果
最新发布
雷加祥的博客
06-03 429
【代码】（uniapp）简单带动画的tab切换效果。
微信小程序开发纸质翻页效果源码-小程序翻页效果 uniapp实现
10-23
微信小程序开发纸质翻页效果源码_小程序翻页效果 uniapp实现
H5 webgl实现翻书效果
skillart的专栏
04-24 885
网上挺多原生翻页实现的，但是H5还没有发现。就按照前辈的思路实现一个h5 webgl的实现，引擎使用egret。 推荐阅读:https://blog.csdn.net/hmg25/article/details/6306479,https://blog.csdn.net/hmg25/article/details/6306479 这里不在赘述细节，认真看完上面推荐链接就可以。 有两个麻烦点一个是C区（翻动的页脚）的绘制和纹理映射，上面利用原生的混合模式处理，因为在egret没有找到相应的api，这里直
uniapp 横向列表 左右滑动翻页效果
sdgjah2的博客
07-12 2078
{ image: "image1.jpg", info: "信息1" },{ image: "image2.jpg", info: "信息2" },{ image: "image3.jpg", info: "信息3" },{ image: "image4.jpg", info: "信息4" },{ image: "image5.jpg", info: "信息5" },{ image: "image6.jpg", info: "信息6" },// 添加更多的图片和信息。
6个超炫酷的HTML5电子书翻页动画
热门推荐
飘过的春风
05-16 1万+
http://www.codeceo.com/article/6-html5-paging-animation.html
JavaScript基于uni-app的菜谱app源码.zip
09-01
JavaScript基于uni-app的菜谱app源码.zipJavaScript基于uni-app的菜谱app源码.zipJavaScript基于uni-app的菜谱app源码.zipJavaScript基于uni-app的菜谱app源码.zipJavaScript基于uni-app的菜谱app源码.zip ...
uni-app集成RFID.zip
09-24
本项目“uni-app集成RFID.zip”是针对RFID技术的一个开发示例，它利用了uni-app框架来实现对RFID设备的数据读取功能。uni-app是一款跨平台的前端框架，可以用于开发iOS、Android、H5等多端应用，大大提高了开发效率...
酷炫交互式h5电子书翻页效果制作软件官方最新版V2.7.20 | 最新h5翻页杂志制作工具
03-27
这是一款优秀实用且酷炫逼真的交互式H5翻页电子杂志制作软件，为广大用户提供了一种将静态PDF文档或图片转换为带有H5翻页效果的数字HTML5翻页书并在线上传分享的理想解决方案，该翻页h5制作软件允许用户将按钮、链接、图像、本地视频或/YouTube、Vimeo等在线视频、音乐、图表等不同素材添加到电子杂志中，即便是小白用户也可以轻松制作h5翻页杂志，制作好的H5翻页电子杂志可以通过内置的FTP功能上传到用户自己的网站，嵌入到网页或者直接分享到微博、朋友圈、自媒体以及Facebook，Twitter等其它社交平台上，h5翻页杂志制作软件官方甚至还提供了一个用户友好的托管服务，允许翻页h5制作软件用户使用帐户轻松存储和管理自己的在线Flash/HTML5翻页书作品，另外这款好用的翻页电子杂志制作软件还内置有Google Analytics工具可以帮助用户统计到H5翻页电子杂志的传播数据，并且制作的H5翻页杂志受众群体可以通过苹果设备、windows设备、安卓设备等不同平台的设备任意在线浏览观看，想知道h5翻页效果怎么做吗，威航软件园推荐大家试试这款翻页h5制作软件吧。
翻书特效导航图片轮播
06-15
一个翻书特效的导航栏，可以实现漂亮的导航轮播，还需要引用js代码
移动端html5页面翻页
08-02
移动端，html5翻页效果，适合用于微信h5页面宣传！！！
html5手机端网页电子书翻页特效.zip
07-04
html5手机端网页电子书翻页特效是一款兼容PC跟手机端的电子书翻页效果。
html5 翻书效果
07-14
HTML5翻书效果
基于uni-app和colorUI开发H5初始模板
12-22
【基于uni-app和colorUI开发H5初始模板】是一个实用的项目模板，旨在为开发者提供一个快速搭建H5页面的基础框架。这个模板充分利用了uni-app的跨平台特性，结合colorUI的优雅设计，使得开发者可以高效地构建出美观且...
uni-app黑魔法：小程序自定义组件运行到H5平台
01-27
2017年1月9日，微信发布小程序，历经3年发展，在今年主题为”未完成 AlwaysBeta“的微信公开课PRO上，微信团队披露，2019年小程序日活跃用户超过3 ...iOS、Android、H5之后的第四大流量平台。平台分裂，为不同平
uni-app 超简单原理实现小说阅读分页功能
shika233的博客
05-25 8908
前端小白的uni-app艰难学习智力 原理 用到的主要原理有： 分页原理 利用高度截取后台传过来的数据内容 利用高度实现完美分割 在uni-app中，有这样一个接口 通过它我们可以获取一些元素信息，比如宽高，下面是我需要获取的东西： <view class="content-text" id="box" :style="{height: boxHei...
uni-app H5自定义相机
08-16
在uni-app中实现H5自定义相机，你可以使用uni-app的原生API和插件来完成。以下是一种实现方式： 1. 引入插件：首先，你需要在uni-app项目中引入一个H5相机插件。你可以在uni-app的插件市场中搜索合适的插件，或者自行开发一个插件来满足你的需求。 2. 调用相机API：使用uni-app的原生API，调用相机功能。具体的调用方式因插件而异，你需要参考插件的文档或示例代码来了解如何调用相机API。 3. 显示相机画面：在页面中创建一个canvas元素，用于显示相机捕捉到的画面。使用JavaScript代码，将相机捕捉到的图像渲染到canvas上。 4. 控制相机功能：根据需要，你可以添加一些控制按钮或手势操作来实现拍照、切换摄像头等功能。通过绑定事件处理函数，监听用户的操作并调用相应的相机API。 需要注意的是，H5自定义相机功能在不同浏览器中的支持程度可能会有所差异。在开发过程中，建议进行充分的测试，并针对不同浏览器做兼容处理。 希望这些提示对你有帮助！如果还有其他问题，请随时提问。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值