企业网站建设介绍,牡丹江百度贴吧,海南信息港官网,wordpress 门窗主题这里给大家分享我在网上总结出来的一些知识#xff0c;希望对大家有所帮助 国际惯例#xff0c;官网链接 官网传送门 Github地址 github上有几个demos例子#xff0c;介绍了基础用法。 我参考官网的例子#xff0c;写了一个demo示例 安装 turn.js 依赖 jquery 库#xff0… 这里给大家分享我在网上总结出来的一些知识希望对大家有所帮助 国际惯例官网链接 官网传送门 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 falseautoCenter: true,// 设置可翻页的页角(都试过了乱写 4个角都能出发卷起) bl,br tl,tr bl,trturnCorners: 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 如果对您有所帮助欢迎您点个关注我会定时更新技术文档大家一起讨论学习一起进步。
