vuejs 輪播_如何在VueJS中設計和構建輪播功能

vuejs 輪播

by Fabian Hinsenkamp

由Fabian Hinsenkamp設計

A carousel, slideshow, or slider — however you call it this class of UI — has become one of the core elements used in modern web development. Today, it’s almost impossible to find any Website or UI library which doesn’t come with one or another kind of carousel.

輪播，幻燈片或滑塊(但是您將其稱為此類UI)已成為現代Web開發中使用的核心元素之一。如今，幾乎找不到任何沒有一種或另一種輪播的網站或UI庫。

Why, though? In fact, carousels really deserve their popularity. They allow users to skim through available content without vertical scrolling or heavy mouse movements. Consequently, users save time and can focus on the displayed content as Carousels keep cognitive load to a minimum.

為什么呢？實際上，輪播確實值得其流行。它們使用戶可以瀏覽可用內容，而無需垂直滾動或沉重的鼠標移動。因此，用戶可以節省時間并可以專注于顯示的內容，因為輪播將認知負擔降至最低。

This is reason enough to learn how to build a Carousel in VueJS!

這就是足夠的理由來學習如何在VueJS中構建Carousel！

All my tutorials gravitate around Progressive Vue Apps. This one is no exception! Making progressive apps means delivering a UX for mobile users close to native apps, including excellent performance, native features like push notifications, offline experience and much more. In a world where the majority of users experience the Web via mobile devices, there is no excuse left to not build progressive apps!

我所有的教程都著重于Progressive Vue Apps。這也不例外！制作漸進式應用程序意味著向移動用戶提供接近本機應用程序的UX，包括出色的性能，本機功能(如推送通知)，離線體驗等。在大多數用戶通過移動設備體驗Web的世界中，沒有理由不構建漸進式應用程序！

Of course you can still use the Carousel in any Vue app. You also don’t need any prior experience with VueJS or Progressive Web Apps for this tutorial!

當然，您仍然可以在任何Vue應用程序中使用“輪播”。您也不需要任何使用VueJS或Progressive Web Apps的經驗，就可以學習本教程！

You find the full code here:

您可以在此處找到完整的代碼：

https://github.com/fh48/vue-pwa-carousel

我們對輪播的愿景是什么？ (What’s our Vision for the Carousel?)

First thing we will do is to get an overview over what kind of components we want to build.

我們要做的第一件事是獲得關于要構建哪種組件的概述。

There are a few very straightforward ones:

有一些非常簡單的方法：

Card → it holds the information of each carousel element.
卡 →包含每個輪播元素的信息。
Carousel → parent which holds all logic
輪播→擁有所有邏輯的父級
ArrowButton → helps to navigate between multiple cards.
ArrowButton →幫助在多個卡之間導航。
Indicator → shows the number of cards and which is currently visible.
指示器 →顯示卡的數量，并且當前可見。

最初設定 (Initial Setup)

If you want to learn how to set up a project, this section is for you. In case you do not, just continue with the next section.

如果您想學習如何設置項目，本部分適合您。如果您不這樣做，請繼續下一節。

vue init pwa vue-pwa-carousel

We will be prompted to pick a preset — I recommend the following configuration:

我們將提示您選擇一個預設-我建議以下配置：

? Project name vue-pwa-carousel? Project short name: fewer than 12 characters to not be truncated on homescreens (default: same as name) vue-pwa-carousel? Project description A simple tax calculator ? Author Fabian Hinsenkamp? Vue build runtime? Install vue-router? No? Use ESLint to lint your code? No? Pick an ESLint preset Standard? Setup unit tests with Karma + Mocha? No? Setup e2e tests with Nightwatch? No

Run yarn in the root folder of the project to install all dependencies. Now we have a project set-up which includes the basic technologies we need to build our carousel. Moreover, it already includes a Service Worker which pre-caches all our static files and allows users to access the app even when they are offline.

在項目的根文件夾中運行yarn以安裝所有依賴項。現在，我們有一個項目設置，其中包括構建輪播所需的基本技術。而且，它已經包括了一個Service Worker，它可以預先緩存我們所有的靜態文件，并允許用戶即使在脫機狀態下也可以訪問該應用程序。

You can check out how the template app looks like by running yarn start.

您可以通過運行yarn start來檢查模板應用程序的外觀。

To test how the carousel looks on mobile, we need to expose our development build to mobile devices through a public URL. There are many ways to do so, but here we use ngrok as it’s easy to set up and just does its job.

為了測試輪播在移動設備上的外觀，我們需要通過公共URL將開發版本暴露給移動設備。這樣做有很多方法，但是這里我們使用ngrok因為它很容易設置并且可以正常工作。

yarn global add ngrok

Next, we need to run our dev server and ngrok in two separate terminals.

接下來，我們需要在兩個單獨的終端中運行開發服務器和ngrok。

讓我們來制作卡片！ (Let’s build the Card!)

To save you some boring adjustments to the template app, just check out this branch00_basicSetup. It includes all data and styles we need to make this app meaningful and pretty.

為了節省對模板應用程序的無聊調整，只需簽出該分支00_basicSetup 。它包含使該應用程序有意義且美觀所需的所有數據和樣式。

The Card really does one thing: it shows the currently selected data. Which is, in our case, an image, a headline and some text.

該卡確實做一件事：它顯示當前選擇的數據。在我們的例子中，它是圖像，標題和一些文本。

Clearly, we do not want to build multiple cards with hard-coded content. Instead, we want to dynamically pass the data to the card and simply render it.

顯然，我們不想用硬編碼內容構建多張卡。取而代之的是，我們希望將數據動態傳遞到卡上并簡單地呈現它。

Based on that knowledge, we can now create our Card.vue file in the src/components folder. Moreover, we can already define the basic html structure and names and their types of the properties we want to pass to the card.

基于此知識，我們現在可以在src/components文件夾中創建Card.vue文件。而且，我們已經可以定義基本的html結構和名稱以及它們要傳遞給卡的屬性的類型。

Attention: we store all icons we want to display locally in our assets folder. That means that our path remains the same, but we need to dynamically change the file names which are supposed to be rendered. Consequently, all properties are of type String.

注意：我們會將要顯示在本地的所有圖標存儲在資產文件夾中。這意味著我們的路徑保持不變，但是我們需要動態更改應該呈現的文件名。因此，所有屬性均為String類型。

Next, we make the Card render the headline and the related text. Therefore, we use the most basic way of data-binding within VueJS — the mustache tag.

接下來，我們使卡片呈現標題和相關文本。因此，我們在VueJS中使用最基本的數據綁定方式-mustache標簽。

It’s basically just curly braces around our prop variables. As soon as data comes in, {{headline}} and {{text}} will be replace with the related data object. This is always true, also when new data comes in, after is has rendered other data before.

基本上，我們的prop變量只是花括號。數據一輸入， {{headline}}和{{text}}將被相關的數據對象替換。在輸入新數據之后，之前已渲染其他數據之后，也總是如此。

Rendering the image dynamically is a bit more tricky. Remember, we do not pass the actual icon but only its file name.

動態渲染圖像有些棘手。請記住，我們不傳遞實際圖標，而僅傳遞其文件名。

So we basically want to consume the image as a module, like any other component. A static image we could consume by importing it in the script block and assign it to a variable. However, we do have changing path. As our app uses webpack there is a fantastic shorthand available to load these dynamically as follows:

因此，我們基本上希望像其他任何組件一樣將圖像作為模塊使用。我們可以通過將靜態圖像導入腳本塊并將其分配給變量來使用它。但是，我們確實有改變的道路。當我們的應用程序使用webpack時，可以使用一個很棒的速記來動態加載它們，如下所示：

:src="require(`@/assets/svg/${imgName}`)"

The : syntax is the Vue-way to dynamically bind attributes to an expression. You might already have seen the v-bind: prefix which : is the shorthand for.

:語法是將屬性動態綁定到表達式的Vue方法。您可能已經看過v-bind:前綴，它是:的簡寫。

Now our template block is completed and looks as follows.

現在，我們的template板塊已完成，如下所示。

To finalise our Card component, we simply need to add the prepared styled to the bottom of the file.

要完成我們的Card組件，我們只需要在文件底部添加準備好的樣式即可。

<style src="../assets/styles/Card.css" scoped>

Last thing we need to do for this section is to check if the Card actually works.

我們在本節中要做的最后一件事是檢查卡是否真正起作用。

So let’s simply add it the our App.vue component. However, keep in mind that we will have to move the component into the Carousel component in the next section.

因此，我們只需將其添加到我們的App.vue組件中即可。但是，請記住，在下一節中，我們將不得不將組件移至“ 旋轉木馬”組件中。

We add the following to the <template>; and &lt;script>; blocks of App.vue.

我們將以下內容添加到<templa te>中; and &l ; and &l t; script> ; block App.vue的s ; block 。

What a fantastic result! Especially, since we can already dynamically change whatever the Card should display!

太棒了！特別是，由于我們已經可以動態更改卡應顯示的內容！

Next, we build the Carousel to have a dedicated component to manage all logic around showing different Cards based on user inputs.

接下來，我們將構建輪播，使其具有專用組件，以根據用戶輸入來管理顯示不同卡的所有邏輯。

Check out the branch 01_Card to if you want to start from here or compare your implementation.

如果要從這里開始，請檢查分支01_Card或比較您的實現。

讓我們來制作輪播 (Let’s build the Carousel)

The Carousel will be our reusable parent component. It will encapsulate all relevant components and logic.

輪播將是我們可重用的父組件。它將封裝所有相關的組件和邏輯。

Like with the Card before, we should focus on building the component in a way that it can handle a change in data gracefully. For example, it should be capable of handling varying numbers of cards being passed to it.

像以前的Card一樣，我們應該集中精力以一種可以優雅地處理數據更改的方式來構建組件。例如，它應該能夠處理傳遞給它的不同數量的卡。

Next we will see how this approach translates into Code. First we start with creating a Carousel component and make the Card a child of Carousel.

接下來，我們將看到這種方法如何轉換為代碼。首先，我們首先創建一個Carousel組件，然后將Card作為Carousel的子代。

The template block of the new component hosts the Card, wrapped in two wrapper elements. We will see later why these are necessary.

新組件的模板塊托管Card ，并包裝在兩個包裝器元素中。我們將在后面看到為什么這些必要。

As we will pass data of multiple Cards to the Carousel, we need to specify that only the currentElement is rendered.

當我們將多個Card的數據傳遞到Carousel時，我們需要指定僅呈現currentElement 。

In the following <script> block we need to define which of the passed Cards is the currentElement by default.

在下面的<scri pt>塊中，我們需要定義默認情況下，哪些傳遞的卡s the currentE元素。

Therefore, we define the currentElementIndex initially to be 0. VueJS comes with a feature that allows us to compute variables dynamically. We use it to select the data of the card that should render initially.

因此，我們將currentElementIndex初始定義為0 。 VueJS帶有一項功能，使我們能夠動態計算變量。我們使用它來選擇最初應呈現的卡的數據。

Now we only need to replace the Card with the Carousel in our App.vue file. To put a bit more structure and meaning to our final page, let’s wrap the carousel in another section element and place it before the other section.

現在，我們只需要更換我們與旋轉木馬 卡 App.vue文件。為了使我們的最后一頁更具結構性和意義，讓我們將輪播包裝到另一個section元素中，然后將其放置在另一個section之前。

That’s our basic implementation. It is not quite a Carousel yet but we are about to change this by adding the arrow buttons to switch between the objects we pass in the cards array to our Carousel.

那是我們的基本實現。它還不是旋轉木馬，但我們將通過添加箭頭按鈕來更改此設置，以在我們將cards數組傳遞給旋轉木馬的對象之間進行切換。

Check out the 02_Carousel to see the complete code for this section. If you coded along you should see the following in front of you.

查看02_Carousel以查看此部分的完整代碼。如果您沿代碼進行編碼，則應該在您前面看到以下內容。

讓我們來構建ArrowButton (Let’s build the ArrowButton)

Now we build the ArrowButton component, which receives its methods and the type of arrow icon from its parent. The implementation itself is strait forward.

現在，我們構建ArrowButton組件，該組件從其父級接收其方法和箭頭圖標的類型。實現本身是兩難的。

The component is only responsible for rendering the correct styles and the icon. All logic related to the Buttons is added to the Carousel. That way, we have created a truly generic component we could use in any context where we want to use a button with an arrow icon.

該組件僅負責呈現正確的樣式和圖標。與按鈕相關的所有邏輯均已添加到輪播中。 這樣，我們創建了一個真正通用的組件，可以在要使用帶有箭頭圖標的按鈕的任何上下文中使用。

Now, within Carousel, we add two methods to navigate between our card data objects. Methods are just another exported object within the <script> block.

現在，在Carousel中，我們添加了兩種方法來在卡片數據對象之間導航。方法只是<scri pt>塊中的另一個導出對象。

These simply increase or decrease the currentElementIndex by 1. We use the index to compute the currentElement variable, so every time one of the methods is called the next card is displayed. We also add some restrictive conditions, as we want the Carousel not to loop.

這些只是將currentElementIndex增加或減少1 。我們使用索引來計算currentElement變量，因此每次調用其中一個方法時，都會顯示下一張卡片。我們還添加了一些限制性條件，因為我們希望輪播不循環。

Now we only need to add the ArrowButtons to basically complete our Carousel!

現在我們只需要添加ArrowButtons即可基本完成我們的輪播！

Here you see how we use the methods and computed values to implement one of our ArrowButtons. Try to implement the second one below the Card component.

在這里，您將看到我們如何使用方法和計算值來實現我們的ArrowButtons之一 。嘗試在Card組件下實施第二個組件。

In case you get stuck or something just looks wrong, checkout the 03_ArrowButton branch. If everything worked out though, your carousel should look like the following:

萬一卡住或看起來有些不對勁，請檢查03_ArrowButton分支。如果一切順利，您的輪播應如下所示：

讓我們建立指標！ (Let’s build Indicators!)

The last feature we’re going to add are the Indicators. These help users to understand how many Cards there are and which one they are currently looking at. Additionally, these allow the user to select individual Cards directly.

我們要添加的最后一個功能是指標。 這些可以幫助用戶了解有多少張卡以及他們當前正在看哪張卡。另外，這些允許用戶直接選擇單個卡。

The component receives three properties. The array of elements we use to create a <li> element for each card data object.

該組件接收三個屬性。 elements數組我們用于為每個卡數據對象創建一個< l i>元素。

currentElementIndex is required to add a CSS class that highlights the indicator related to the current card. Moreover, it is used to disable the button for the current card. That way we prevent it from being selectable is via the tab keys. That way, we provide at least a minimum of accessibility.

currentElementIndex 需要添加一個CSS類來突出顯示與當前卡有關的指示器。此外，它用于禁用當前卡的按鈕。這樣，我們可以通過Tab鍵阻止它被選擇。這樣，我們至少提供了最少的可訪問性。

showElement is the method which is called when a user clicks on an indicator. It’s passed from outside to keep the component as focused as possible. How an element is shown is clearly no concern of Indicators.

showElement是用戶單擊指標時調用的方法。它是從外部傳遞的，以使組件盡可能集中。元素的顯示方式顯然與指標無關。

When we add the Indicators to Carousel.vue it becomes clear why we created two wrappers for the Card. Semantic and clear HTML is vital, especially for large projects with a high level of complexity.

當我們將指標添加到Carousel.vue很清楚為什么我們為Card創建了兩個包裝。語義清晰HTML至關重要，特別是對于具有高度復雜性的大型項目而言。

You can check out the complete code at branch 04_Indicators.

您可以在分支04_Indicators處04_Indicators完整的代碼。

讓我們添加滑動 (Let’s add swipe)

Last but not least, we make our Carousel mobile friendly. A good progressive web app doesn’t start by caching static files, but with responsiveness.

最后但并非最不重要的一點是，我們使Carousel移動友好。一個好的漸進式Web應用程序并非從緩存靜態文件開始，而是具有響應能力。

As we do lack space on small screens, we hide the ArrowButtons and allow users to swipe in order to browse the Cards. Here the Indicators also do pay off again, as they function in mobile as the main indicator that users can swipe to see more cards.

由于我們確實在小屏幕上缺少空間，因此我們隱藏了ArrowButtons并允許用戶滑動以瀏覽Cards。 此處，指示器也可以再次獲得回報，因為它們在移動設備中充當主要指示器，用戶可以滑動以查看更多卡。

Therefore we add the following library:

因此，我們添加以下庫：