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

uni-app 集成turnjs 翻书动画

页面引入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重新构建一次才是最佳的使用。

微信搜索，关注本号“天宇文创意乐派”(ID:gh_cc865e4c536b)

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

turn.js 翻书效果
turn.js 实现翻书效果,自适应pc端.手机端.ipad,可以左右滑动翻页 <!doctype html> <!--[if lt IE 7 ]> <html lang ...
Android App开发手机阅读中实现平滑翻书效果和卷曲翻书动画实战（附源码简单易懂可直接使用）
需要图片集和源码请点赞关注收藏后评论区留言~~~ 一.平滑翻书效果与纸质书籍类似,手机上的电子书也有很多页,逐页浏览可采用翻页视图,然而翻页视图犹如一幅从左到右的绵长画卷,与现实生活中上下层叠的书籍 ...
H5+APP的几种实现形式
一.什么是H5+App H5+App通常指的是我们将移动Web端封装成一个的App后的一种形式,我们通过这样的方法就可以比较简单地形成一个可被应用的App,这样的一个App能够像正常的App应用去调用 ...
《超越需求：敏捷思维模式下的分析》—第1章 1.2节交付价值
本节书摘来自异步社区<超越需求:敏捷思维模式下的分析>一书中的第1章,第1.2节交付价值,作者[美]Kent J. McDonald(肯特 J. 麦克唐纳),更多章节内容可以访问云栖社区& ...
《超越需求：敏捷思维模式下的分析》—第1章 1.1节简介
本节书摘来自异步社区<超越需求:敏捷思维模式下的分析>一书中的第1章,第1.1节简介,作者[美]Kent J. McDonald(肯特 J. 麦克唐纳),更多章节内容可以访问云栖社区&qu ...
O2O模式下，生活服务类App精准引流和渠道评估方法
O2O模式是指将线下的商务机会与互联网结合,让互联网成为线下交易的平台.O2O比较代表性的自然是生活服务类产品,主要消费场景集中在线下,但又可以经由互联网完成传播和交易. 生活服务类App的类型相当多 ...
uni App+H5 实现人脸识别
uni App+H5 实现人脸识别通过h5的视频video管理设备摄像头(不要关),在打开视频摄像时快照截取人脸照片传送到后台通过API接口调用百度人脸识别结果并通过返回数据解析自己业务需求. 1. ...
Android N App分屏模式完全解析（下）
转载地址:http://unclechen.github.io/2016/03/12/Android-N-App%E5%88%86%E5%B1%8F%E6%A8%A1%E5%BC%8F%E5%AE%8 ...
app嵌套h5，ios下去掉上下橡皮筋的效果（上下回弹）
app嵌套h5,ios下去掉上下橡皮筋的效果(上下回弹) 如果是前端自己解决的话会非常的费劲,我今天跟app开发的沟通了一下,他们很快的就解决了,所以直接用原生解决就行,不要下功夫找各种解决方法,到最 ...

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

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

最新文章

热门文章