Cách tạo công cụ swipe giống Netflix trong Vue
Nếu bạn đã xây dựng web trong một thời gian ngắn, bạn sẽ giống như tôi gặp phải ít nhất một số vấn đề khi thực hiện swipe - vì một số lý do, họ dường như luôn có ý nghĩ của riêng họ trong một thời gian và họ quay lại. Đó là hoặc, swiper không đáp ứng như bạn mong muốn hoặc tạo kiểu rộng bạn phải làm trước khi làm cho nó trông đẹp một nửa như bạn mong đợi.
Bây giờ nếu bạn đã từng sử dụng Netflix, bạn cũng đã thấy bộ swipe phim của họ thanh lịch và linh hoạt như thế nào. Nhờ Vue và thư viện vue-awesome-swiper , bạn có thể tạo các công cụ swipe của riêng mình.
Trong hướng dẫn này, bạn sẽ tạo một swiper trong Vue.
- Môi trường phát triển local cho Node.js. Làm theo cách cài đặt Node.js và tạo môi trường phát triển local
Bước 1 - Tạo dự án của bạn
Vue là một frontend framework tiến bộ giúp ta xây dựng các giao diện tương tác và tuyệt vời. Bạn có thể tìm hiểu thêm về Vue tại đây
Để cài đặt Vue trên máy của bạn, bạn cần chạy lệnh sau:
- npm install -g vue-cli
Thao tác này sẽ cài đặt Vue trên phạm vi global trên máy của bạn. Để xác nhận cài đặt Vue của bạn, hãy chạy lệnh sau trong terminal của bạn:
- vue --version
Nếu bạn nhận được số version là kết quả thì bạn đã cài đặt Vue trên máy của bạn .
Bây giờ ta đã cài đặt Vue trên máy của bạn , ta đã sẵn sàng để bắt đầu xây dựng. Để tạo ứng dụng, hãy sử dụng Vue CLI để bắt đầu. Chạy phần sau trong terminal của bạn:
- vue init webpack netflix-like-swipers
Điều này hiển thị dấu nhắc để ta hoàn thành và khi ta hoàn thành các dấu nhắc , nó sẽ tạo một dự án mẫu Vue với gói web để ta tinh chỉnh và xây dựng ứng dụng của bạn .
Bước 2 - Tạo thành phần phim
Mục đích của các thành phần là làm cho các phần của giao diện user của ta có thể tái sử dụng. Trong trường hợp này, ta sẽ có nhiều phim vì vậy ta sẽ tạo một thành phần phim và sau đó sử dụng lại thành phần như ta muốn trong quá trình ứng dụng.
Để tạo thành phần phim, hãy tạo file Movies.vue trong folder src/components/
- nano src/components/Movie.vue
Trong Movie.vue của ta , ta xây dựng thành phần của bạn như sau:
<script>
export default {
name: 'Movie',
props : [
'image',
'title',
'description',
'duration'
],
}
</script>
Ở đây, ta đặt tên cho thành phần của bạn và cũng chỉ định các props cho thành phần sẽ được thêm vào mỗi khi thành phần được sử dụng.
Thêm mã sau để xác định mẫu cho thành phần:
<template>
<div class="movie" v-bind:style="{ backgroundImage: 'url(' + image + ')' }">
<div class="content">
<h1 class="title">{{ title }}</h1>
<p class="description">{{ description }}</p>
<p class="duration">{{ duration }}</p>
</div>
</div>
</template>
Sau đó, thêm kiểu phạm vi cho thành phần để kiểm soát cách phim được hiển thị:
<style scoped>
h1, h2 {
font-weight: normal;
}
.movie{
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: flex-end;
text-align: left;
padding: 10px;
width : 350px;
height : 500px;
background-color: rgba(255,255,255,0.7);
background-repeat: no-repeat;
background-blend-mode: overlay;
background-size: cover;
}
</style>
Đến đây bạn đã tạo thành phần phim của bạn , bạn sẽ tích hợp các thao tác swipe vào ứng dụng.
Bước 3 - Tạo Thành phần Trang chủ với Vue-Awesome-Swiper
Cài đặt module bằng lệnh sau:
- npm install vue-awesome-swiper --save
Bây giờ tạo một thành phần HomePage.vue trong folder src/components mà ta sẽ sử dụng swiper.
- touch src/components/HomePage.vue
Trong HomePage.vue , tạo thành phần và nhập các thành phần Movie , swiper , swiperSlide. And configure the slider using the thuộc tính data` cho thành phần:
<script>
import Movie from './Movie'
import 'swiper/dist/css/swiper.css'
import { swiper, swiperSlide } from 'vue-awesome-swiper'
export default {
name: 'HomePage',
components: {
Movie,
swiper,
swiperSlide
},
data() {
return {
swiperOption: {
direction : 'vertical',
pagination: {
el: '.swiper-pagination',
type: 'bullets'
},
}
}
}
}
</script>
Trong trường hợp này, ta xác định ta muốn swipers của ta vertical và phong cách pagination nên bullets
Mẫu tải các thành phần Movie riêng lẻ và đặt nội dung:
https://via.placeholder.com/728x90.png?text=Visit+WhoIsHostingThis.com+Buyers+Guide
C / O https://placeholder.com/
<template>
<swiper :options="swiperOption">
<swiper-slide>
<Movie image="https://via.placeholder.com/300x450.png?text=Movie1" title="Movie 1" description="Movie 1 description" duration="2hrs"/>
</swiper-slide>
<swiper-slide>
<Movie image="https://via.placeholder.com/300x450.png?text=Movie1" title="Movie 2" description="Movie 2 description" duration="2hrs"/>
</swiper-slide>
<swiper-slide>
<Movie image="https://via.placeholder.com/300x450.png?text=Movie1" title="Movie 5" description="Movie 5 description" duration="2hrs"/>
</swiper-slide>
<div class="swiper-pagination" slot="pagination"></div>
</swiper>
</template>
Ta sử dụng thành phần <swiper /> và có nhiều thành phần <swiper-slide/> bên trong nó. Ta cũng đã thêm một div để giữ phần tử phân trang.
Thêm CSS sau vào file để tạo kiểu cho swiper:
<style scoped>
.swiper-slide{
display: flex;
justify-content: center;
flex-direction: column;
}
.swiper-container {
height : 500px;
}
</style>
Lưu các file . Đến đây bạn có thể kết xuất thành phần.
Bước 4 - Kết xuất các thành phần của ta
Để hiển thị các thành phần, hãy bao gồm chúng và sử dụng chúng trong file src/App.vue .
Mở file trong editor :
- nano src/App.vue
Đầu tiên, nhập thành phần HomePage và khởi tạo swiper:
<script>
import HomePage from './components/HomePage'
export default {
name: 'App',
components: {
HomePage
},
data() {
return {
swiperType : 'Easy Vertical Swiper'
}
}
}
</script>
Sau đó thêm mẫu:
<template>
<div id="app">
<h1>{{ swiperType }}</h1>
<HomePage/>
</div>
</template>
Cuối cùng, thêm kiểu dáng:
<style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
display: flex;
align-items: center;
flex-direction: column;
}
</style>
Đảm bảo tất cả các file được lưu và khởi động server phát triển bằng lệnh sau:
npm run dev
Điều này bắt đầu một server phát triển được bắt đầu. Truy cập http://localhost:8080 để xem ứng dụng của bạn.
Bước 5 - Khám phá các loại công cụ swipe khác
Bây giờ ta đã thấy cách hoạt động của các công cụ swipe đơn giản, hãy cùng khám phá các tùy chọn khác. Ta sẽ xem xét Hiệu ứng 3D CoverFlow Swiper và Swipers lồng nhau. Để biết thêm các ví dụ về swiper, bạn có thể xem lại các ví dụ trên trang vue-awesome-swiper project .
Để tạo một swiper 3D CoverFlow Swiper Effects, hãy tinh chỉnh các tùy chọn thanh trượt trong HomePage.vue để trông giống như sau:
// HomePage.vue
<script>
[..]
export default {
name: 'HomePage',
[...]
data() {
return {
swiperOption: {
effect: 'coverflow',
grabCursor: true,
centeredSlides: true,
slidesPerView: '5',
coverflowEffect: {
rotate: 50,
stretch: 0,
depth: 100,
modifier: 1,
slideShadows : false
},
pagination: {
el: '.swiper-pagination'
}
}
}
}
}
</script>
Đến đây bạn có thể tự hỏi mình, "điều gì sẽ xảy ra nếu tôi muốn có các bộ swipe trong bộ quét của bạn ". Để thực hiện việc này, hãy chỉnh sửa HomePage.vue của bạn như sau:
// HomePage.vue
<script>
[...]
export default {
[...]
data() {
return {
swiperOptionh: {
spaceBetween: 50,
pagination: {
el: '.swiper-pagination-h',
clickable: true
}
},
swiperOptionv: {
direction: 'vertical',
spaceBetween: 50,
pagination: {
el: '.swiper-pagination-v',
clickable: true
}
}
}
}
}
</script>
Ta chỉ cấu hình cho các bộ swipe khác nhau và sau đó trong Mẫu của ta , ta có cấu trúc như sau:
<template>
<swiper :options="swiperOptionh">
<swiper-slide>
[...]
</swiper-slide>
[...]
<swiper-slide>
<swiper :options="swiperOptionv">
<swiper-slide>
[...]
</swiper-slide>
[...]
<div class="swiper-pagination swiper-pagination-v" slot="pagination"></div>
</swiper>
</swiper-slide>
[...]
<div class="swiper-pagination swiper-pagination-h" slot="pagination"></div>
</swiper>
</template>
Lưu ý cách ta sử dụng :options= " swiperOptionh " để chỉ cấu hình cho horizontal swiper và :options= " swiperOptionv " cho vertical swiper
Bây giờ ta đã thấy một số ví dụ swiper cơ bản, ta đang tiến hành tốt việc xây dựng Netflix giống như swipers.
Chỉnh sửa file HomePage.vue của bạn trông giống như sau:
// HomePage.vue
<script>
[...]
export default {
[...]
data() {
return {
swiperOptions : {
slidesPerView: 5,
spaceBetween: 0,
freeMode: true,
loop: true,
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev'
}
}
}
}
}
</script>
Ta đã thay đổi các tùy chọn cho swiper bằng cách chọn số lượng movies ta muốn trong mỗi lần xem. ta cũng đặt khoảng spaceBetween chúng thành 0. Để tạo cảm giác swipe 'vô tận', ta đặt loop thành true. Ta cũng chỉ định tên lớp của các node chuyển - điều này bổ sung chức năng cho các node
Sửa đổi mẫu để nó có cấu trúc sau:
<template>
<swiper :options="swiperOptions">
<swiper-slide>
<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"/>
</swiper-slide>
[...]
<swiper-slide>
<Movie image="http://res.cloudinary.com/og-tech/image/upload/s--qXaW5V3E--/v1521804426/wakanda.jpg" title="Black Panther" description="Wakanda Forever" duration="2hrs15mins"/>
</swiper-slide>
<div class="swiper-button-prev" slot="button-prev"></div>
<div class="swiper-button-next" slot="button-next"></div>
</swiper>
</template>
Truy cập server của bạn để xem kết quả.
Kết luận
Trong bài viết này, Bạn đã triển khai các thao tác swipe trong ứng dụng Vue. Đến đây bạn có thể triển khai chúng trong các ứng dụng của riêng mình một cách dễ dàng.
Các tin liên quan
