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

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

  • 4
    点赞
  • 12
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值