uniapp app端运用renderjs使用turnjs，打造电子书仿真翻书效果

1、首先：

renderjs是一个运行在视图层的js。它比WXS更加强大。它只支持app-vue和web。

turn.js官网在这里： Turn.js: The page flip effect in HTML5

如果只是单纯的H5端引入turnjs，是不需要用renderjs的，但是我的项目因为是在app端，就得用到renderjs

我们可以这样理解，uniapp是一个大圆，renderjs就是大圆中的小圆，那么turnjs就住在这个小圆里，我们把这个小圆叫做视图层，大圆叫做逻辑层

2、基本实现思路：

2.1、第一步先确定renderjs和uniapp的数据通信方式，完成了数据通信，才可以针对turnjs的配置项，做些uniapp自己的逻辑层的操作。

renderjs使用方式可以查阅官网，直接介绍如何通信，

2.1.1、逻辑层向视图层传递数据：

<view class="flipbook-viewport" :rect="rect" :change:rect="updateRenderData"
>
<view class="container"  ><view class="flipbook" id="flipbook" >------------</view></view></view>

rect是逻辑层对应的属性或者方法，当值改变时，就会触发视图层对应的逻辑操作。rect可以改成自己任意名字，逻辑操作的名字也可以改成自己任意的，可成对添加多个。

2.1.2视图层向逻辑层的通信：

这部分操作必须在dom上绑定相应的主动触发事件，比如，touchend、click才可以触发，例如：

<view class="flipbook-viewport" :rect="rect" :change:rect="updateRenderData" @touchend="turnjs.onClick"
>
<view class="container"  ><view class="flipbook" id="flipbook" ><div class='hard'></div></view></view></view>

<script>    // 逻辑层的jsimport '@/utils/jquery.min.1.7.js';import turn from '@/utils/turn.js';export default {computed: {           rect() {return {                    width: this.width,height: this.height}}},
methods:{// 接收renderjs发回的数据onViewClick(options) {console.log('renderjsCall回调');console.log(options);},
}           }
</script><script lang="renderjs" module="turnjs">
// 视图层的jsimport '@/utils/jquery.min.1.7.js';import turn from '@/utils/turn.js';export default {data() {return {width: '',height: ''               }},     mounted() { this.onTurn();          },methods: {            onClick(event, ownerInstance) {// 操作内容ownerInstance.callMethod('onViewClick', {curpage: 0                         })},                onTurn() {$("#flipbook").turn({autoCenter: true,display: 'single',height: this.height,width: this.width,elevation: 50,duration:500,gradients: true,when: {turning: function(event, page, pageObject) {// 翻页时                            },  }});                }}      }
</script>

通过@touchend="turnjs.onClick 来主动发起视图层的逻辑，然后逻辑内部通过ownerInstance.callMethod传递数据到逻辑层，“onViewClick”，就是逻辑层内接收数据的函数，然后进行一系列的操作就好了。

3、说一下turnjs的注意事项，官方的css样式贴出来，我的项目中，引入情况不生效，所以就写到文件里了。

.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;}
}

同时我发现了一个现象，如果的page内容可以写死，那就简单太多，直接在常规的data里面定义数组，在dom中去渲染就好。page中的内容如果是动态的，会因为初始化的问题无法启动turn，所以我在最开始就添加了第一页的内容，保证能启动turnjs，应该是还有更好的办法，我没有想到。

<view class="flipbook" id="flipbook" ><div class='hard'></div></view>

然后通过renderjs里面添加内容的监听，如果内容有改变，就添加页面

updateSimulationText(newVal, oldVal) {  //renderjs里面的操作$("#flipbook").turn('pages',1)     // 内容变化时，保留1页$("#flipbook").turn('pages',newVal.arr.length) // 添加数组长度的页数                for (var i=0; i<newVal.arr.length;i++) {var tagHtml = "";                          tagHtml = "<div></div>";     // 一个page的内容                    if (!$("#flipbook").turn('hasPage', i+2)) {// Create an element for this pagevar element = $('<div />').html('');// Add the page$("#flipbook").turn('addPage', element, i+2);element.html(tagHtml);}}              },

项目中的实际逻辑是，当turnjs翻页是，要通知逻辑层page+1，turnjs换章节时，要通知逻辑层获取指定章节的内容，但是通信的思路跟上面的提到的相同，就不再赘述了。

uniapp app端运用renderjs使用turnjs，打造电子书仿真翻书效果相关推荐

uniapp app端使用html2canvas和renderjs实现生成海报图
uniapp app端使用html2canvas和renderjs实现生成海报图原本app端是无法使用html2canvas的因为,app端不支持浏览器js. 不过我在uniapp里面看到了rend ...
uniApp APP端调起微信支付失败errCode:-100的踩坑
使用了在开放平台配置好包名和签名后调试,在有的机型上通过调试可以调起微信支付,但是打包成apk就调起失败,有一种可以成功的结果,反向推断出代码肯定没有问题.但是控制台报errCode:-100的错. ...
uni-app APP端-微信登录流程
uni-app APP端-微信登录流程手把手教学 1.前期准备在微信开放平台注册账户微信开放平台 (qq.com) 在管理中心中创建移动应用项目,按要求填写相关信息审核通过后即可获得我们所需的 ...
uniapp App端使用高德地图
uniapp App端使用高德地图第一步: 先去高德官网申请keyhttps://console.amap.com/dev/key/app 关于SHA1生成方法如下:https://lbs.amap ...
uniapp APP端视频轮播问题
uniapp APP端视频轮播问题(黑屏,变形) 今天接到一个需求:需要在商品详情轮播展示视频,本以为很简单,但是发现好多坑,在app端出现黑屏,卡顿,变形,视频只展示半屏的情况. 完整代码放底下了 ...
适配移动端和PC端的翻书效果
首先,实现翻书效果我使用了turnjs,是一款非常好用的翻书效果插件.可以直接在百度搜索turnjis下载.也可已选择在我的github库下载. 其次,PC端和移动端屏幕的差异使得我们需要控制在PC端 ...
Android App开发手机阅读中实现平滑翻书效果和卷曲翻书动画实战（附源码简单易懂可直接使用）
需要图片集和源码请点赞关注收藏后评论区留言~~~ 一.平滑翻书效果与纸质书籍类似,手机上的电子书也有很多页,逐页浏览可采用翻页视图,然而翻页视图犹如一幅从左到右的绵长画卷,与现实生活中上下层叠的书籍 ...
uni-app APP端引入echart
公司要做app,选型选的uni-app,奈何之前没接触过. 一步一步摸索着把框架搭建好了,发现app中有图表,那我图表又用什么呢? 又去翻文档,又是百度的. 最后还是在官方找到合适的答案 EChar ...
uniapp app端导出excel的探索和实现（二）
一.前言之前在app中使用html模板导出的.xlsx的兼容性不好,只能在wps中直接打开,在MIcrosoft的excel中直接甩给我一个警告: 于是,又一次进入"轻松愉快"的 ...

uniapp app端运用renderjs使用turnjs，打造电子书仿真翻书效果

uniapp app端运用renderjs使用turnjs，打造电子书仿真翻书效果相关推荐

最新文章

热门文章