記錄--一個好用的輪子 turn.js 實現模擬翻書的效果

這裡給大家分享我在網上總結出來的一些知識，希望對大家有所幫助

國際慣例，官網鏈接

官網傳送門

Github地址

github上有幾個demos例子，介紹了基礎用法。

 我參考官網的例子，寫了一個demo示例

安裝

turn.js 依賴 jquery 庫，所以需要先安裝 jquery

npm install jquery --save

引入

import $ from 'jquery'
import turn from '@/utils/turn.js'

下載 turn.js 文件，然後在組件中引入

import turn from "@/utils/turn.js";

vue.config.js 配置

const webpack = require('webpack');
module.exports = {
    lintOnSave: false,
    //配置webpack選項的內容
    configureWebpack: {
        plugins: [
            new webpack.ProvidePlugin({
                $: "jquery",
                jQuery: "jquery",
            })
        ]
    },
 
}

const webpack = require('webpack')
module.exports = {
  chainWebpack: config => {
    config.plugin('provide').use(webpack.ProvidePlugin, [{
      $: 'jquery',
      jquery: 'jquery',
      jQuery: 'jquery',
      'window.jQuery': 'jquery'
    }])
  }
}

翻頁方法，以及參數

  $("#book").turn({
      //啟用硬體加速,移動端有效
      acceleration: false,
      //顯示：single=單頁，double=雙頁，預設雙頁
      display: "double",
      // 翻頁撒開滑鼠，頁面的延遲
      duration: 800,
      // 預設顯示第幾頁
      page: 1,
      // 摺疊處的光澤漸變，主要體現翻頁的立體感、真實感
      gradients: true,
      // 中心翻取決於有多少頁面可見 true or false
      autoCenter: true,
      // 設置可翻頁的頁角(都試過了，亂寫 4個角都能出發捲起)， bl,br   tl,tr   bl,tr
      turnCorners: "bl,br",
      //頁面高度
      height: this.turnPage.height,
      //翻書範圍寬度，總寬度
      width: this.turnPage.width,
      when: {
          //監聽事件
          turning: function (e, page, view) {
              console.log("翻頁前觸發");
              console.log(e, page, view);
              // 翻頁前觸發
              console.log(page);
          },
          turned: function (e, page) {
              console.log("翻頁後觸發");
              console.log(e, page);
              // 翻頁後觸發
              console.log(page);
          },
      },
  });

上一頁

$("#book").turn("previous");

下一頁

$("#book").turn("next");

示例代碼

完整代碼，已經放到 Gitee 上面了，組件名為 TurnjsComponent

Gitee地址

本文轉載於:

https://juejin.cn/post/7254443448564006967

如果對您有所幫助，歡迎您點個關註，我會定時更新技術文檔，大家一起討論學習，一起進步。