Turn. Js is used in vue

Effect overview:

🐯 Download source

Turn. Js: The Page Flip Effect in HTML5

🐯 source code before the use of preparatory work

Unzip and open the downloaded file:

Find the file lib/turn. Js inside

Put it in the new utils file

Create the environment for turning. Js

Turn. Js is written using jquery, jquery is introduced to use vue

NPM install –save jquery

Modifying a Configuration File

Create the vue.config.js configuration file

const webpack = require('webpack')
module.exports = {
    chainWebpack: config= > {
        / / introduce ProvidePlugin
        config.plugin("provide").use(webpack.ProvidePlugin, [{
            $: "jquery".jquery: "jquery".jQuery: "jquery"."window.jQuery": "jquery",}]); }},Copy the code

🐯 source code use

I imported the official file into the local image file

Look at the pixels of the file. Set width to 2 times height.

Use vUE file content

<template>
  <div class="home">
    <div class="turnClass">
      <div id="flipbook">
          <div v-for="(item) in imgUrl" :key="item.index"
          :style="` background:url(${item.imgurl}) no-repeat 100% 100% `"
          >
          </div>
      </div>
    </div>
  </div>


</template>

<script>
//turn.js
import turn from '.. /utils/turn.js'

export default {
  name: 'Home'.data(){
    return{
        imgUrl:[
          {imgurl:'image/1.jpg'.index:1},
          {imgurl:'image/2.jpg'.index:2},
          {imgurl:'image/3.jpg'.index:3},
          {imgurl:'image/4.jpg'.index:4},
          {imgurl:'image/5.jpg'.index:5},
          {imgurl:'image/6.jpg'.index:6},
          {imgurl:'image/7.jpg'.index:7},
          {imgurl:'image/8.jpg'.index:8},
          {imgurl:'image/9.jpg'.index:9},
          {imgurl:'image/10.jpg'.index:10},
          {imgurl:'image/11.jpg'.index:11},
          {imgurl:'image/12.jpg'.index:12}}},],methods: {onTurn(){
        this.$nextTick(() = >{$("#flipbook").turn({
        autoCenter: true.height:646.width:996}); })}},mounted(){
   this.onTurn(); }}</script>
<style lang="less">* {margin: 0;
    padding: 0;
  }
  .home{
    width: 100vw;
    height: 100vh;
    .turnClass{
      display: flex;
      margin: 0px auto;
      width: 996px;
      height: 646px;
      padding: calc((100vh - 646px) /2) 0;
      overflow: hidden; }}</style>

Copy the code

Effect picture:

🐯 Some operation methods

Give the action event onChange

Events for methods in VUE

onChange(){$("#flipbook").turn("XXX",XXX)
}
Copy the code

Operation details:

$(“#flipbook”).turn(“pages”)

$(“#flipbook”).turn(“page”)

Next page: $(“#flipbook”).turn(“next”)

$(“#flipbook”).turn(“previous”)

$(“#flipbook”).turn(“page”)

$(“#flipbook”).turn(“page”,n)

🐯 Detailed documentation

In official Turn. Js: The Page flip effect in HTML5

If you don’t want to go to the official website, you can click the link below

Microsoft Word – turnjs4-api-docs.docx

🐯 Good luck and a bright future.