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

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

Create ionic project usign Ionic CLI

ionic start ionic-turnjs blank

Add jQuery and TurnJS

• 将jQuery和TurnJS库复制到src/assets文件夹
• 编辑你的src/index.html，在</head>标签之前添加上面的代码

Replace home.ts with the above code

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

Create your TurnJS view

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

Add CSS to 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;
    }
}