turn.js 实现仿真翻书的效果_微信小程序turn.js类似翻书效果

1. 安装jquery
npm install jquery --save
 
2. main.js引入
import $ from 'jquery'
import turn from '@/utils/turn.js'
 
3. 引入turn.js文件
import turn from "@/utils/turn.js";
 
4. 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'
    }])
  }
}
5. 实现功能翻页
  $("#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);
          },
      },
  });
6. 上下翻页
$("#book").turn("previous");
$("#book").turn("next");