在离子3中使用zuck js库

问题描述

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

I want to implement stories effect in ionic app by using in zuck.js libraryzuck.js

我安装它

npm install zuck

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

then import it in my home component

 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大写字母未定义

but it shows me error buck Zuck with capital letter not defined

我想把它改成

import * as Zuck from "zuck";

但我得到同样的错误。

UPDATE！
我将导入更改为

UPDATE!!!I changed the import to

import Zuck from 'zuck';

我收到错误

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

is not possible to use zuck.js in ionic?

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

after declaring Zuck i want to create object and I get

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

    }

}

推荐答案

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

After I posted my comment I realized that you are using the wrong npm package for zuck. This npm package is something completely different and thats why you are getting the react module error. Use this one instead:

npm install zuck.js

并像那样导入它：

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

这篇关于在离子3中使用zuck js库的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！