如果你已经为网络建造了一段时间,你会像我一样在制作滑板时遇到至少一些问题 - 出于某种原因,他们似乎总有一段时间有自己的想法,他们来回来。
现在,如果你曾经使用过Netflix,你也看到他们的电影滑动器是多么优雅和流畅。 借助Vue和vue-awesome-swiper库,你可以创建自己的滑动器。
在本教程中,您将在Vue中创建一个旋转器。
- Node.js 的本地开发环境 遵循 如何安装 Node.js 并创建本地开发环境
步骤一:创建你的项目
Vue是一个进步的前端框架,可以帮助我们构建互动和奇妙的界面,您可以了解更多关于Vue的信息(https://vuejs.org)
要在您的机器上安装 Vue,您需要运行以下命令:
1npm install -g vue-cli
此操作将 Vue 全球安装到您的计算机上. 若要确认 Vue 安装,请在您的终端中运行以下命令:
1vue --version
如果你得到一个版本号作为结果,那么你已经在你的机器上安装了Vue。
现在我们已经在我们的机器上安装了Vue,我们已经准备好开始构建。 为了创建应用程序,请使用Vue CLI来启动我们。
1vue init webpack netflix-like-swipers
这显示了一个提示我们完成,一旦我们完成了提示,它会创建一个Vue样本项目与Webpack,以便我们调整和构建我们的应用程序。
步骤 2 – 创建电影组件
组件的目的是使我们UI的部分可重复使用,在这种情况下,我们将有许多电影,所以我们将创建一个电影组件,然后在应用程序中按我们想要的方式重复使用该组件。
要创建电影组件,请在src/components/目录中创建一个Movies.vue文件
1nano src/components/Movie.vue
在我们的Movie.vue中,我们将我们的组件构建如下:
1[label Movie.vue]
2 <script>
3 export default {
4 name: 'Movie',
5 props : [
6 'image',
7 'title',
8 'description',
9 'duration'
10 ],
11 }
12 </script>
在这里,我们命名我们的组件,并为该组件指定将每次使用该组件添加的附件。
添加以下代码来定义组件的模板:
1[label Movie.vue]
2 <template>
3 <div class="movie" v-bind:style="{ backgroundImage: 'url(' + image + ')' }">
4 <div class="content">
5 <h1 class="title">{{ title }}</h1>
6 <p class="description">{{ description }}</p>
7 <p class="duration">{{ duration }}</p>
8 </div>
9 </div>
10 </template>
然后为组件添加范围式样式来控制电影的显示方式:
1[label Movie.vue]
2 <style scoped>
3 h1, h2 {
4 font-weight: normal;
5 }
6 .movie{
7 display: flex;
8 flex-direction: column;
9 align-items: flex-start;
10 justify-content: flex-end;
11 text-align: left;
12 padding: 10px;
13 width : 350px;
14 height : 500px;
15 background-color: rgba(255,255,255,0.7);
16 background-repeat: no-repeat;
17 background-blend-mode: overlay;
18 background-size: cover;
19 }
20 </style>
现在你已经创建了你的电影组件,你可以将滑板集成到应用程序中。
步骤 3 – 使用Vue-Awesome-Swiper创建首页组件
使用以下命令安装模块:
1npm install vue-awesome-swiper --save
现在在src/components目录中创建一个HomePage.vue组件,我们将在其中使用滑动器。
1touch src/components/HomePage.vue
在HomePage.vue中,创建组件并导入组件Movie,swiper,swiperSlide。
1[label HomePage.vue]
2 <script>
3 import Movie from './Movie'
4 import 'swiper/dist/css/swiper.css'
5 import { swiper, swiperSlide } from 'vue-awesome-swiper'
6
7 export default {
8 name: 'HomePage',
9 components: {
10 Movie,
11 swiper,
12 swiperSlide
13 },
14 data() {
15 return {
16 swiperOption: {
17 direction : 'vertical',
18 pagination: {
19 el: '.swiper-pagination',
20 type: 'bullets'
21 },
22 }
23 }
24 }
25 }
26 </script>
在这种情况下,我们指定了我们希望我们的滑板垂直,页面设计的风格应该是子弹。
模板会加载单个电影组件并设置内容:
https://via.placeholder.com/728x90.png?text=Visit+WhoIsHostingThis.com+买家+指南
C/O https://placeholder.com/ 的位置
1[label HomePage.vue]
2 <template>
3 <swiper :options="swiperOption">
4 <!-- slides -->
5 <swiper-slide>
6 <Movie image="https://via.placeholder.com/300x450.png?text=Movie1" title="Movie 1" description="Movie 1 description" duration="2hrs"/>
7 </swiper-slide>
8 <swiper-slide>
9 <Movie image="https://via.placeholder.com/300x450.png?text=Movie1" title="Movie 2" description="Movie 2 description" duration="2hrs"/>
10 </swiper-slide>
11 <!-- more movies -->
12 <swiper-slide>
13 <Movie image="https://via.placeholder.com/300x450.png?text=Movie1" title="Movie 5" description="Movie 5 description" duration="2hrs"/>
14
15 </swiper-slide>
16
17 <!-- Optional controls -->
18 <div class="swiper-pagination" slot="pagination"></div>
19 </swiper>
20 </template>
我们使用<swiper />组件,里面有许多<swiper-slide/>组件,我们还添加了一个div来保持页面化元素。
将下列 CSS 添加到文件中以使用风格:
1[label HomePage.vue]
2 <!-- Add "scoped" attribute to limit CSS to this component only -->
3 <style scoped>
4 .swiper-slide{
5 display: flex;
6 justify-content: center;
7 flex-direction: column;
8 }
9 .swiper-container {
10 height : 500px;
11 }
12 </style>
保存文件. 现在您可以重置组件。
步骤4 - 返回我们的组件
要渲染组件,请将它们纳入并在src/App.vue文件中使用。
在您的编辑器中打开文件:
1nano src/App.vue
首先,导入HomePage组件并初始化旋转器:
1[label App.vue]
2 <script>
3 import HomePage from './components/HomePage'
4 export default {
5 name: 'App',
6 components: {
7 HomePage
8 },
9 data() {
10 return {
11 swiperType : 'Easy Vertical Swiper'
12 }
13 }
14 }
15 </script>
然后添加寺庙:
1[label App.vue]
2 <template>
3 <div id="app">
4 <h1>{{ swiperType }}</h1>
5 <HomePage/>
6 </div>
7 </template>
最后,添加风格:
1[label App.vue]
2
3 <style>
4 #app {
5 font-family: 'Avenir', Helvetica, Arial, sans-serif;
6 -webkit-font-smoothing: antialiased;
7 -moz-osx-font-smoothing: grayscale;
8 text-align: center;
9 color: #2c3e50;
10 margin-top: 60px;
11 display: flex;
12 align-items: center;
13 flex-direction: column;
14 }
15 </style>
确保所有文件都保存,然后用以下命令启动开发服务器:
1npm run dev
这会启动一个开发服务器,请访问http://localhost:8080查看您的应用程序。
步骤5 – 探索其他类型的滑板
现在我们已经看到了简单的滑动器是如何工作的,让我们探索更多的选项。我们将看看横向3D覆盖Flow滑动器效应和嵌套滑动器。 对于更多的滑动器示例,您可以查看((https://surmon-china.github.io/vue-awesome-swiper/)景色迷人的滑动器项目页面的示例)。
若要创建一个 3D CoverFlow Swiper Effects 滑动器,请在HomePage.vue中调整滑动器选项以显示如下:
1// HomePage.vue
2 <script>
3 [..]
4 export default {
5 name: 'HomePage',
6 [...]
7 data() {
8 return {
9 swiperOption: {
10 effect: 'coverflow',
11 grabCursor: true,
12 centeredSlides: true,
13 slidesPerView: '5',
14 coverflowEffect: {
15 rotate: 50,
16 stretch: 0,
17 depth: 100,
18 modifier: 1,
19 slideShadows : false
20 },
21 pagination: {
22 el: '.swiper-pagination'
23 }
24 }
25 }
26 }
27 }
28 </script>
现在你可能会问自己,如果我想在我的滑板上有滑板,怎么办? 要做到这一点,请按下面的方式调整你的HomePage.vue:
1// HomePage.vue
2 <script>
3 [...]
4 export default {
5 [...]
6 data() {
7 return {
8 swiperOptionh: {
9 spaceBetween: 50,
10 pagination: {
11 el: '.swiper-pagination-h',
12 clickable: true
13 }
14 },
15 swiperOptionv: {
16 direction: 'vertical',
17 spaceBetween: 50,
18 pagination: {
19 el: '.swiper-pagination-v',
20 clickable: true
21 }
22 }
23 }
24 }
25 }
26 </script>
我们为不同的旋转器指定配置,然后在我们的模板中,我们有这样的结构:
1<template>
2 <swiper :options="swiperOptionh">
3 <swiper-slide>
4 [...]
5 </swiper-slide>
6 [...]
7 <swiper-slide>
8 <swiper :options="swiperOptionv">
9 <swiper-slide>
10 [...]
11 </swiper-slide>
12 [...]
13 <div class="swiper-pagination swiper-pagination-v" slot="pagination"></div>
14 </swiper>
15 </swiper-slide>
16 [...]
17 <div class="swiper-pagination swiper-pagination-h" slot="pagination"></div>
18 </swiper>
19 </template>
请注意,我们如何使用:options=```swiperOptionh```来指定水平滑动器的配置和垂直滑动器的options=``swiperOptionv`的配置。
现在,我们已经看到了一些基本的滑动器示例,我们正在建设Netflix像滑动器一样。
编辑你的HomePage.vue文件看起来像这样:
1// HomePage.vue
2 <script>
3 [...]
4 export default {
5 [...]
6 data() {
7 return {
8 swiperOptions : {
9 slidesPerView: 5,
10 spaceBetween: 0,
11 freeMode: true,
12 loop: true,
13 navigation: {
14 nextEl: '.swiper-button-next',
15 prevEl: '.swiper-button-prev'
16 }
17 }
18 }
19 }
20 }
21 </script>
我们通过选择我们在每个视图中想要的电影的数量来更改滑动器的选项,我们还将它们之间的空间设置为0。
更改模板,使其具有以下结构:
1<!-- HomePage.vue -->
2 <template>
3 <swiper :options="swiperOptions">
4 <swiper-slide>
5 <Movie image="http://res.cloudinary.com/og-tech/image/upload/s--4NgMf3RF--/v1521804358/avengers.jpg" title="Avengers : Infinity War" description="Thanos is around" duration="2hrs"/>
6 </swiper-slide>
7 [...]
8 <swiper-slide>
9 <Movie image="http://res.cloudinary.com/og-tech/image/upload/s--qXaW5V3E--/v1521804426/wakanda.jpg" title="Black Panther" description="Wakanda Forever" duration="2hrs15mins"/>
10 </swiper-slide>
11 <div class="swiper-button-prev" slot="button-prev"></div>
12 <div class="swiper-button-next" slot="button-next"></div>
13 </swiper>
14 </template>
访问您的服务器查看结果。
结论
在本文中,您在 Vue 应用程序中实现了旋转器,现在您可以轻松地在自己的应用程序中实现它们。