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

作者：羊村懒王 | 2024-02-19 23:11:13

踩

uniapp turn.js

uni-app 集成turnjs 翻书动画

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

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

关于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>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156

在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>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197

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

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

声明：本文内容由网友自发贡献，转载请注明出处：【wpsshop】