Turn.js像flipbook for ionic 2

Question

我在互聯網上搜索了一個用於離子2的翻書插件，但未能找到它。我後來試圖將JavaScript flipbook插件作爲外部庫加入，但每次都失敗。那裏有沒有npm翻書包？如果沒有，我如何在我的離子2項目中包含一個JavaScript插件？

Answer 1

「有任何NPM翻書包在那裏？」 你可以試試這個庫： 「我怎麼能包括JavaScript的插件，在我的離子2項目」 https://www.npmjs.com/package/angular-turnjs

我選擇將TurnJS導入爲外部庫。您可以使用離子3這裏克隆工作版本：https://github.com/diegonobre/ionic-turnjs

如果你想實現自己的版本，請按照下列指示：

創建離子項目usign離子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; 
    } 
}