Question

我想通过在zuck.js库中使用离子应用程序来实现故事效果 zuck.js

我安装它

npm install zuck

然后将其导入我的家庭组件

 import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import * as zuck from "zuck";

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

   stories = new Zuck('stories', {

    backNative:true,

    autoFullScreen:'false',

    skin:'Snapgram',

    avatars:'true',

    list:false,

    cubeEffect:'true',

    localStorage:true,

    stories: [],

    });
  constructor(public navCtrl: NavController) {

  }

但它显示了错误降压Zuck，大写字母未定义

referenceError：没有定义Zuck ReferenceError：在新的HomePage中没有定义Zuck

我想把它改成

import * as Zuck from "zuck";

但我得到同样的错误。

UPDATE !!! 我将导入更改为

import Zuck from 'zuck';

我收到错误

运行时错误找不到模块“反应”

是否无法在离子中使用zuck.js？

宣布Zuck之后，我想创建对象，我得到了

无法读取null的属性'id'TypeError：无法读取属性'id' 在新窗口的null.ZuckitaDaGalera.window.Zuck （http://localhost:8100/build/vendor.js:115204:23）在新主页上

    import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import 'zuck.js/zuck.js';
declare var Zuck;

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

  stories = new Zuck('stories', {
    backNative: true,
    autoFullScreen: 'false',
    skin: 'Snapgram',
    avatars: 'true',
    list: false,
    cubeEffect: 'true',
    localStorage: true,
    stories: [
      {
        id: 'vision',
        photo: 'https://cnet4.cbsistatic.com/img/QJcTT2ab-sYWwOGrxJc0MXSt3UI=/2011/10/27/a66dfbb7-fdc7-11e2-8c7c-d4ae52e62bcc/android-wallpaper5_2560x1600_1.jpg',
        name: 'Tech',
        link: '',
        lastUpdated: 1492665454,
        items: [
          this.buildItem('1', 'photo', 3, 'https://pbs.twimg.com/profile_images/782474226020200448/zDo-gAo0_400x400.jpg','', '', false, 1492665454),
          this.buildItem('2', 'photo', 3, 'https://vignette4.wikia.nocookie.net/ironman/images/5/59/Robert-Downey-Jr-Tony-Stark-Iron-Man-3-Marvel-Disney.jpg/revision/latest?cb=20130611164804', '', '',false, 1492665454),
          this.buildItem('3', 'video', 0, 'https://scontent-gru2-2.cdninstagram.com/t50.2886-16/14965218_193969377722724_482497862983221248_n.mp4', 'https://scontent-gru2-2.cdninstagram.com/t51.2885-15/e15/10597412_455246124639813_1360162248_n.jpg', '', false, 1492665454),
        ],
      }],
  });

  constructor(public navCtrl: NavController) {

  }
  buildItem(id, type, length, src, preview, link, seen, time) {

    // Using object short-hand (id: id)
    return {id,type,length,src,preview,link,seen,time,
    };

    }

}

Answer 1

发表评论后，我意识到您使用了错误的zuck npm包。 This npm包是完全不同的，这就是为什么你得到react模块错误。请改用this一个：

npm install zuck.js

然后将其导入：

import 'zuck.js/zuck.js';
declare var Zuck;

在离子3中使用zuck js库

1 个答案: