Turn.js就像flipbook for ionic 2

Question

我已经在互联网上搜索了一个用于离子2的翻页插件但未能找到一个。我后来尝试将javascript flipbook插件作为外部库包含但每次都失败了。那里有没有npm翻页包？如果没有，我如何在我的离子2项目中包含一个javascript插件？

Answer 1

“那里有没有npm翻页包？” 您可以尝试此存储库：https://www.npmjs.com/package/angular-turnjs

“如何在我的离子2项目中加入javascript插件？”

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

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

创建离子项目usign Ionic CLI

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;
    }
}