问题标签 [vue-flickity]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票
1 回答
371 浏览

vue.js - 捕获子组件发出的动作

我正在尝试对子组件发出的动作做出反应。孩子发出一个名为 的事件/触发器/动作init。我尝试在我的父组件events映射中注册该事件。但是回调永远不会触发,这让我认为我错误地注册了发出的动作。

我如何对孩子发出的事件/触发器/动作做出反应?

0 投票
0 回答
661 浏览

vuejs2 - 如何让 flickity 全屏按钮显示在 flickity-fullscreen v1.1.1 中?

我无法按此处fullscreen记录的方式显示按钮。我添加了 css 和 js 源,以便它们在浏览器中可用:

我可以将is-fullscreen课程添加到我的父轮播中,全屏显示,但我就是无法显示按钮。

我的 flickity 组件(在哈巴狗中)看起来像:

我的轻弹选项(在咖啡脚本中)是:

EDIT1:对于我自己的故障排除,我使用以下库:

  • vue-flickity ( vue-flickity@^1.1.2),这取决于:
    • flickity "^2.1.1"但在我的源面板(webpack:///./node_modules/flickity/js/index.js)中,文件显示:Flickity v2.2.0
  • flickity-fullscreen@^1.1.1这取决于:
    • flickity "^2.1.0"
0 投票
1 回答
631 浏览

vue.js - VueJS + Vue-Flickity TypeError:WEBPACK_IMPORTED_MODULE_0_vue_flickity.a 不是构造函数

我正在使用Vue-Flickity,但无法找到解决此错误的方法:

[Vue 警告]:nextTick 中的错误:“TypeError: WEBPACK_IMPORTED_MODULE_0_vue_flickity .a 不是构造函数”

在发现

---> at src/components/Meetup/Meetups.vue at src/App.vue vue.esm.js?efeb:1841 TypeError: WEBPACK_IMPORTED_MODULE_0_vue_flickity .a 不是 VueComponent.eval 的构造函数 (Meetups.vue?41ab:1113 ) 在 Array.eval (vue.esm.js?efeb:1938) 在 flushCallbacks (vue.esm.js?efeb:1857)

以下是相关代码: HTML

脚本

我更新了所有 NPM 包,但错误仍然存​​在。如何解决?

0 投票
1 回答
343 浏览

javascript - Flickity 没有隐藏在桌面上

我希望 flickity 滑块隐藏在桌面和更大的设备上。我想我正在按照文档中的说明进行操作,它们看起来很简单,但是,它不起作用。

div 看起来像这样:

像这样的造型:

这是被“轻弹”的组件,看起来像这样,即使我认为这并不重要:

另外,我不知道这是否重要,但是当我检查 Chrome 上的元素时,我有这个:

在此处输入图像描述

提前致谢!

0 投票
1 回答
114 浏览

javascript - TypeScript + Vue 3 - ReferenceError:未定义变量

any我在我的开头声明一个变量具有类型,<script>然后我在同一个方法中引用它<script>。我的 IDE 完全没有抱怨,但令人惊讶的是,我在控制台中看到了一个运行时错误:ReferenceError: flik is not defined.

也许这与 Vue 生命周期中围绕变量实例化的竞争条件有关?这很令人困惑,因为我在其他地方使用类似的模式没有这个问题。我下面的代码有什么问题?

0 投票
0 回答
73 浏览

typescript - Flickity 渲染重复的幻灯片,直到 Inspector 关闭或打开

我的 Vue 3 Typescript 应用程序中的 Flickity 轮播正在运行时通过 for 循环动态填充幻灯片。

问题:

错误视频 添加到我的轮播中的最后一张幻灯片是唯一显示的幻灯片,当我尝试向左或向右拖动幻灯片时,我的拖动被忽略。对幻灯片导航按钮或页面点的点击会被注册并导致触发幻灯片更改回调,但幻灯片本身永远不会对任何这些点击进行动画/移动/反应。例如:如果我的 Flickity 轮播包含显示“1”和“2”的幻灯片,则幻灯片“2”(最后添加的幻灯片)将始终可见,并且根本不会响应导航按钮/页面点的单击或拖动。

它变得非常奇怪的地方:

当我在 chrome 中打开检查器时,Flickity 轮播立即开始显示独特的可滚动幻灯片。如果我在到达包含轮播的页面后关闭检查器,也会发生同样的事情;它“修复”了这个错误。

我试过的:

我认为检查器的打开或关闭可能会导致 Flickity 的某种内部重新加载调用,所以我尝试在添加所有幻灯片后故意重新加载轮播,但这对错误没有影响。当我在 Chrome 中打开/关闭检查器同时渲染轮播时,会发生一些独特的事情,这使得最后一张幻灯片从始终可见而“脱离”。

代码Page.vue

Flickity.vue

flickity.d.ts

0 投票
1 回答
122 浏览

vue.js - vue-flickity:如何将 selectedIndex 获取到 vue 数据中

我正在使用vue-flickity作为轮播。有一个<flickity />组件(轮播)、一个<p>带有 data 的标签{{ selectedIndex }}和一个从 获取当前幻灯片编号flickity和更新的按钮selectedIndex

当用户向左或向右滚动(即调用Next/Previous方法)时,如何自动更新selectedIndex当前幻灯片索引?我正在努力“挂钩”模块的这些方法。

我可以定义一个方法Next()并将其绑定到一个按钮,但是当用户滚动时它不会更新。

编辑:我已经成功地融入on.change(使用mounted)。console.log现在向我展示了正确的selectedInde,但这并没有对它说的“你在幻灯片编号 {{ selectedIndex }}”做出反应

0 投票
3 回答
138 浏览

nuxt.js - Nuxt 应用程序在使用 Flickity 时抛出错误消息

我正在尝试在 Nuxt 应用程序中实现轮播。这是我的 package.json

这是我的代码

如果我不注释掉import Flickity from 'vue-flickity'components: { Flickity, },我会收到此错误消息。

错误信息

我不明白这里有什么问题。如果有人知道请帮忙...

0 投票
1 回答
94 浏览

javascript - 使用轮播在 Nuxt 应用程序中引发“未定义 Flickity”的自定义按钮

我正在尝试将我自己的自定义按钮连接到 nuxt 应用程序中的 flickity 轮播。在我的轮播组件中,我有这个代码

在我的插件文件夹中,我有一个 vue-flickity.js 文件

无需尝试使用我自己的自定义按钮,轮播就可以正常工作。但是使用自定义按钮时,我会收到一条错误消息ReferenceError Flickity is not defined,此行 => 显然我在这里做错了什么,但是什么?var flkty = new Flickity(".carousel");Missing stack frames

0 投票
1 回答
41 浏览

css - 设置左侧(在容器中)对齐的轮播以到达屏幕右侧(在容器外)

我在 Nuxt/Vue 应用程序的容器中有一个 flickity-carousel(用于居中/对齐目的)。我希望轮播与左侧的其余内容对齐,但我希望轮播一直到屏幕的右边框。我正在使用 Tailwind 进行造型。

这就是我目前所拥有的

在此处输入图像描述

这就是我要的

在此处输入图像描述

在玩了overflow-x-visible其他顺风课程之后,我还没有成功。如果有人知道该怎么做,请帮助我!