Turn.js 就像 ionic 2 的翻书

Question

我在互联网上搜索了适用于 ionic 2 的翻书插件，但没有找到。后来我尝试将 javascript 翻书插件作为外部库包含在内，但每次都失败了。那里有任何 npm 翻书包吗？如果没有，如何在我的 ionic 2 项目中包含 javascript 插件？

Answer 1

“那里有任何 npm 翻书包吗？” 你可以试试这个仓库：https://www.npmjs.com/package/angular-turnjs

“如何在我的 ionic 2 项目中包含 javascript 插件？”

我选择将 TurnJS 导入实现为外部库。您可以在此处使用 Ionic 3 克隆工作版本：https://github.com/diegonobre/ionic-turnjs

如果您想实现自己的版本，请按照以下说明操作：

使用 Ionic CLI 创建 ionic 项目

ionic start ionic-turnjs blank

添加 jQuery 和 TurnJS

• 将 jQuery 和 TurnJS 库复制到您的 src/assets 文件夹中

• 编辑你的src/index.html，在</head>标签之前添加上面的代码

用上面的代码替换home.ts

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { Platform } from 'ionic-angular';

declare var $:any;

@Component({
selector: 'page-home',
    templateUrl: 'home.html'
})
export class HomePage {

    constructor(
        public navCtrl: NavController,
        public platform: Platform
    ) {}

    ionViewDidLoad() {
        $("#flipbook").turn({
            width: '100%',
            height: this.platform.height() - 50,
            display: 'single',
            autoCenter: true
        });
    }
}

创建您的 TurnJS 视图

<ion-content>
    <div id="flipbook">
        <div class="cover"> Turn.js </div>
        <div class="page"> Page 1 </div>
        <div class="page"> Page 2 </div>
        <div class="page"> Page 3 </div>
        <div class="page"> Page 4 </div>
        <div class="cover"> The end </div>
    </div>
</ion-content>

将 CSS 添加到 home.scss

page-home {
    .cover {
        overflow:hidden;
        background-color: lightgray;
        border: solid 1px black;
    }
    .page {
        overflow:hidden;
        background-color: white;
        border: solid 1px gray;
        font-weight: bold;
        text-align: center;
        font-size: 20px;
        line-height: 100px;
    }
}