狠狠色丁香婷婷综合尤物/久久精品综合一区二区三区/中国有色金属学报/国产日韩欧美在线观看 - 国产一区二区三区四区五区tv

• ? Github Star: 2.7k[1]

• ? 官網(wǎng)[2]

Flicking 是什么？

Flicking.js 是一個(gè)用于創(chuàng)建觸摸友好的輪播控件的 JavaScript庫，它支持多種配置和交互，適用于構(gòu)建響應(yīng)式的圖像或內(nèi)容滑動(dòng)界面。Flicking.js 的核心功能包括手勢(shì)控制、自動(dòng)播放、無限循環(huán)等，并且可以通過API進(jìn)行高度自定義。

效果展示

嵌套 Flicking

可變尺寸 Flicking

網(wǎng)格 Flicking

垂直 Flicking

快速開始

在項(xiàng)目中使用 Flicking 首先需要安裝，我們可以通過包管理 npm 或 yarn，CDN 等方式安裝。

npm install @egjs/flicking
#
yarn add @egjs/flicking

Flicking 提供配合前端框架使用的安裝包，例如：Vue、React、Angular、Preact 等。

# React
npm install @egjs/react-flicking
# Vue2
npm install @egjs/vue-flicking
# Vue3
npm install @egjs/vue3-flicking
# Angular 
npm install @egjs/ngx-flicking
# Preact
npm install @egjs/preact-flicking
# Svelte
npm install @egjs/svelte-flicking

在項(xiàng)目中使用 Flicking，首先需要向頁面中添加基本 HTML 布局。

<!-- Viewport element -->
<div id="carousel" class="flicking-viewport">
  <!-- Camera element -->
  <div class="flicking-camera">
    <!-- Panels, class names are your choice -->
    <div class="panel">1</div>
    <div class="panel">2</div>
    <div class="panel">3</div>
    <div class="panel">4</div>
  </div>
</div>

然后在 JavaScript 中初始化 Flicking 實(shí)例對(duì)象。

const flicking = new Flicking("#carousel", {
  align: "center", // 視口中面板對(duì)齊位置。
  circular: true, // 是否啟用循環(huán)（連續(xù)循環(huán)）模式
  bound: true, // 是否啟用邊界 
  renderOnlyVisible: true // 是否僅渲染可見面板
})

核心 API

Flicking.js 提供了一系列的配置選項(xiàng)，允許用戶根據(jù)自己的需求進(jìn)行自定義。主要的配置選項(xiàng)：

• ? align: 視口中面板對(duì)齊位置。

• ? circular: 是否無限循環(huán)滾動(dòng)，默認(rèn)為 false 。

• ? bound: 是否限制滾動(dòng)邊界，默認(rèn)為 false 。

• ? adaptive: 是否響應(yīng)式布局，即根據(jù)父容器的尺寸來自動(dòng)調(diào)整輪播元素的尺寸，默認(rèn)為 false 。

• ? autoResize: 當(dāng)尺寸發(fā)生變化時(shí)，是否自動(dòng)重新計(jì)算位置和尺寸，默認(rèn)為 false 。

• ? moveType: 滾動(dòng)動(dòng)畫類型，包括 snap、freeScroll、snapFreeScroll，默認(rèn)為 snap 。

• ? duration: 動(dòng)畫過渡時(shí)間，默認(rèn)為 500 。

• ? ease: 動(dòng)畫過渡函數(shù)，默認(rèn)為 "cubic-bezier(0.25, 0.1, 0.25, 1.0)" 。

• ? deceleration: 動(dòng)畫減速度，默認(rèn)為 0.0075 。

此外，Flicking.js 還提供了回調(diào)函數(shù)，如 beforeMove、moved、willChangeEvent、changedEvent、moveStart 和 moveEnd，允許用戶在特定事件發(fā)生時(shí)執(zhí)行自定義邏輯 。對(duì)于 React 用戶，Flicking.js 還提供了一些 React 特有的配置選項(xiàng)，如 viewportTag、cameraTag、cameraClass、renderOnSameKey 等。

更多內(nèi)容參考官方文檔[3]

同類對(duì)比

Flicking.js 是一個(gè)專注于滑動(dòng)性能和交互特性的輪播組件庫，它支持手勢(shì)滑動(dòng)、全屏滑動(dòng)和響應(yīng)式布局。Swiper 是一個(gè)現(xiàn)代化的純 JavaScript 滑動(dòng)庫，以其高性能和豐富的API而聞名。

Flicking.js 與 Swiper 相比有哪些優(yōu)點(diǎn)？

1. 1. 輕量級(jí)：相對(duì)于 Swiper，Flicking.js 可能更加輕量，加載和運(yùn)行速度更快。

2. 2. 易于集成：支持多種前端框架，如 React、Vue 等，易于在現(xiàn)代前端項(xiàng)目中集成。

3. 3. 豐富的配置選項(xiàng)：提供多種配置選項(xiàng)，如對(duì)齊方式、循環(huán)播放、邊界限制等。

4. 4. 支持TypeScript：完全使用 TypeScript 編寫，提供準(zhǔn)確的類型定義。

5. 5. 支持SSR：設(shè)計(jì)上支持服務(wù)器端渲染，適用于 Next.js 或 Nuxt.js 等 SSR 框架。

選擇 Swiper 或 Flicking.js 時(shí)應(yīng)根據(jù)實(shí)際情況做出選擇，如果需要一個(gè)功能全面、社區(qū)支持廣泛的輪播圖插件，Swiper 可能是更好的選擇。如果項(xiàng)目需要一個(gè)輕量級(jí)、易于集成且支持現(xiàn)代前端框架的解決方案，Flicking.js 可能更加合適。

總結(jié)

Flicking 以其出色的性能和靈活性，為開發(fā)者提供了一個(gè)強(qiáng)大的工具，輕松實(shí)現(xiàn)滾動(dòng)動(dòng)畫和交互效果。無論是創(chuàng)建無縫的無限滾動(dòng)列表，還是打造動(dòng)態(tài)網(wǎng)格布局，Flicking 都能夠提供必要的支持。它的易用性和可擴(kuò)展性，使其成為提升用戶交互體驗(yàn)的Web項(xiàng)目的理想選擇。希望通過本次分享能為你的組件庫帶來新的選擇。

祝好！

引用鏈接

[1] Github Star: 2.7k: https://github.com/naver/egjs-flicking
[2] 官網(wǎng): https://naver.github.io/egjs-flicking/
[3] 官方文檔: https://naver.github.io/egjs-flicking/Options#ui--layout