Tạo một thành phần băng chuyền linh hoạt

Vue.js đã xuất hiện những bước nhảy vọt gần đây, trở thành dự án ngã ba thứ sáu cho đến nay trên GitHub. Tại thời điểm viết, thậm chí trước sự phản ứng của Facebook Reactjs. Thật an toàn khi nói rằng nó nhanh chóng trở thành một trụ cột trong phát triển web và một người đi đến đáng tin cậy Khung JavaScript. để sử dụng trong các dự án.

Trong hướng dẫn này, chúng ta sẽ đang sử dụng Vue.js để tạo ra một thành phần băng chuyền đơn giản. Thành phần này sẽ chấp nhận một số thuộc tính khác nhau, cho phép bạn điều chỉnh một số cài đặt cơ bản như tốc độ chuyển tiếp, loại chuyển tiếp và liệu băng chuyền sẽ tự động chuyển tiếp trượt hay không.

Nếu tất cả điều này nghe có vẻ quá khó khăn, một người tạo ra trang web Công cụ có thể là nhiều thứ của bạn. Hạnh phúc để tạo một trang web phức tạp hơn? Bạn cần web hosting có thể đối phó.

• Tăng tốc hiệu suất với VUE.JS

Để bắt đầu, Tải về các tệp dự án tại đây (và lưu chúng vào lưu trữ đám mây ) và mở thư mục 'mẫu trang web' trong trình soạn thảo văn bản ưa thích của bạn. Trong khi đó trong thiết bị đầu cuối, CD thành 'mẫu trang web' và sau đó chạy 'cài đặt NPM' để cài đặt các dự án phụ thuộc Node.js. Cuối cùng, chạy 'NPM RUN' để khởi động máy chủ phát triển để bạn có thể xem dự án của mình trong trình duyệt. Thông thường, đây sẽ là 'localhost: 8080'.

01. Tạo tập tin trượt băng chuyền

Trong 'SRC / Linh kiện', tạo một thư mục mới gọi là 'ứng dụng-carousel-slide' và trong đó hai tệp: 'ứng dụng-carousel-slide.vue' và 'component.app-carousel-slide.scss'. Chúng sẽ chứa các thành phần Vue.js đầu tiên mà chúng ta sẽ tạo, khi được sử dụng cùng nhau sẽ tạo thành phần băng chuyền của chúng tôi.

02. Thêm SCSS trượt băng chuyền

Từ gói filesilo, sao chép nội dung của '/support-files/step-02-slide.scss' vào 'thành phần.app-carousel-slide.scss'. Đây là SCSS cho thành phần slide và sử dụng thuộc tính 'Flex-Grow' để đảm bảo mỗi slide mở rộng để lấp đầy phần tử cha của nó.

03. Tạo thành phần slide

Trong tệp 'App-Carousel-slide.vue' trống ', hãy thêm đoạn mã dưới đây để tạo cấu trúc của thành phần Vue.js. Chúng ta sẽ sử dụng nó như một nền tảng để xây dựng slide băng chuyền.

 & lt; mẫu & gt; & lt; / template & gt;
& lt; script & gt;
Nhập mặc định {
  Tên: 'Ứng dụng-Carousel-slide'
Không thể
& lt; / script & gt; 

04. Thêm một khe mẫu cho hình ảnh slide băng chuyền

Trong trống & lt; mẫu & gt; Yếu tố của slide băng chuyền, chúng ta sẽ thêm phần tử 'div' để thể hiện slide, cùng với một phần tử vị trí đặc biệt mà chúng ta sẽ đặt tên 'hình ảnh'. Trong Vue.js, các khe cắm cho phép bạn xen vào nội dung của riêng mình với mẫu của thành phần mà không cần chỉnh sửa nó. Trong trường hợp này, chúng được sử dụng để sau này chúng ta có thể vượt qua hình ảnh cho nền slide, do đó kết quả cuối cùng, khi cuối cùng được sử dụng, sẽ trông giống như '& lt; ứng dụng-carousel-slide & gt; & lt; img src =' 'alt =' '& gt; & lt; / app-carousel-slide & gt;'.

 & lt; div class = "c-app-carousel-slide" & gt;
  & lt; slot name = "hình ảnh" & gt; & lt; / slot & gt;
& lt; / div & gt; 

05. Thêm thùng chứa văn bản slide

Tất cả những gì còn lại cho thành phần slide là xây dựng container văn bản. Chúng tôi sẽ sử dụng các slot một lần nữa, một cho tiêu đề slide lớn hơn và một cho văn bản thông thường. Chúng tôi cũng sẽ sử dụng lệnh VUE.JS gọi là 'V-IF' để thêm logic, chỉ hiển thị vùng chứa văn bản nếu ít nhất một trong các khe cắm được thông qua nội dung. Thêm đoạn trích này trong 'C-App-Carousel-slide', ngay trước vị trí 'hình ảnh'.

 & lt; div class = "c-app-carousel-slide__text-block"
v-if = "cái này. $ slot ['title'] || cái này. $ slot ['văn bản']" & gt;
  & lt; h1 class = "c-app-carousel-slide__title"
  v-if = "này. $ slot ['title']" & gt;
  & lt; slot name = "Tiêu đề" & gt; & lt; / slot & gt;
  & lt; / h1 & gt;
  & lt; div class = "c-app-carousel-slide__text"
  v-if = "này. $ slot ['văn bản']" & gt;
  & lt; slot name = "văn bản" & gt; & lt; / slot & gt;
  & lt; / div & gt;
& lt; / div & gt;

06. Tạo tập tin băng chuyền

Quay lại 'SRC / Linh kiện', tạo một thư mục mới gọi là 'ứng dụng-carousel' và sau đó trong đó hai tệp mới: 'ứng dụng-carousel.vue' và 'component.app-carl.scss'. Chúng sẽ giữ phần hai của hai thành phần Vue.js: chính băng chuyền chính.

07. Thêm CSS Carousel

Sao chép nội dung của '/support-files/step-07-side.scss' vào 'thành phần.app-carl.scousel' trống '. Đây là SCS cho thành phần băng chuyền chính.

08. Tạo thành phần Carousel

Tiếp theo trong 'App-Carousel.vue', chúng ta sẽ xây dựng cấu trúc của thành phần băng chuyền. Chúng tôi đang nhập thành phần 'Appicon' và 'Mũi tên' SVG để sử dụng sau trong các biểu tượng tiếp theo và trước của Carousel. Những hoạt động này cùng với sự phụ thuộc 'svg-sprite-loader' để tạo một hệ thống biểu tượng SVG cơ bản, hoạt động bằng cách sử dụng SVG 'ký hiệu' và phần tử 'Sử dụng' của nó.

 & lt; mẫu & gt; & lt; / template & gt;
& lt; script & gt;
nhập khẩu appicon từ.
'@ / linh kiện / biểu tượng ứng dụng / biểu tượng ứng dụng'
Nhập mũi tên từ
'./../../assets/img/arrow.svg'
Nhập mặc định {
  Tên: 'Ứng dụng-Carousel',
  các thành phần: {
  appicon.
  },
  dữ liệu() {
  trở về {
  Mũi tên
  Không thể
  Không thể
Không thể
& lt; / script & gt; 

09. Xây dựng mẫu băng chuyền

Hãy bắt đầu thêm nội dung vào thành phần mẫu trống. Khu vực quan tâm chính ở đây là phần tử 'C-App-Carousel__Container', mà chúng ta sẽ sớm tính toán một chiều rộng dựa trên số lượng slide được tìm thấy trong đó. Sau đó, chúng tôi sẽ di chuyển container bằng cách sử dụng Transform CSS: TranslateX và chuyển sang mô phỏng chuyển động trượt.

 & lt; div class = "c-app-carousel" & gt;
  & lt; div class = "c-app-carousel__wrapper" & gt;
  & lt; div class = "c-app-carousel__container" & gt;
  & lt; slot & gt; & lt; / slot & gt;
  & lt; / div & gt;
  & lt; / div & gt;
& lt; / div & gt; 

10. Thêm các điều khiển băng chuyền và mũi tên

Sau đó, chúng tôi cần thêm HTML cho container điều khiển băng chuyền và các mũi tên trước và trước đó; Sau này sử dụng hệ thống biểu tượng và SVG được nhập vào Bước 8. Thêm chúng sau phần tử 'C-App-Carousel__wrapper'.

 & lt; app-icon class = "c-app-icon-iscon-arch-prev c-app-carousel__arrow" sử dụng = "mũi tên" / & gt;
& lt; div class = "c-app-carousel__controls" & gt;
& lt; / div & gt;
& lt; app-icon class = "c-app-icon-icine-art-app-app-carousel__arrow" sử dụng = "mũi tên" / & gt; 

11. Tạo cửa hàng dữ liệu băng chuyền và thêm các thuộc tính

Chúng tôi sẽ thêm ba thuộc tính mới vào cửa hàng dữ liệu của thành phần: 'slideetotal' sẽ giữ tổng số slide; 'ActiveSlideInDex' sẽ ghi lại chỉ mục của slide có thể nhìn thấy để nó có thể được sử dụng để tính toán vị trí của container; Trong khi AUTOINTERVAL sẽ ghi lại bộ hẹn giờ khoảng thời gian sẽ kích hoạt chuyển đổi trượt tự động. Tất cả những thứ này được đặt thành NULL, ngoại trừ 'ActiveLideDex', trong đó giá trị '0' chỉ ra rằng slide đầu tiên phải là slide mặc định.

 Dữ liệu () {
  trở về {
  Mũi tên,
  slideetotal: null,
  ActiveLideDex: 0,
  AUTOINTERVAL: NULL.
  Không thể
} 

12. Tính slidetotal.

Thêm 'ref = "container"' vào phần tử 'C-App-Carousel__Container' trong mẫu và sau đó thêm đoạn mã bên dưới dưới dạng thuộc tính của chính đối tượng thành phần. 'Ref' được sử dụng để dễ dàng truy cập vào một yếu tố, trong trường hợp này là container để chúng ta có thể đếm được bao nhiêu phần tử con (còn gọi là slide). Sự hiện diện của logic này trong hàm 'gắn kết ()' có nghĩa là nó sẽ tự động chạy khi thành phần được hiển thị lần đầu tiên.

 Gắn () {
  cái này .slidetotal =.
  Điều này. $ refs.container.children.length;
Không thể

13. Tính toán chiều rộng container

Trong thành phần, tạo một thuộc tính đối tượng mới được gọi là 'tính toán' và trong đó, một hàm mới gọi là 'containerwidth ()'. Chúng tôi sẽ sử dụng điều này để tính toán chiều rộng của thùng chứa băng chuyền dựa trên hình 'slideetotal'.

 Tính toán: {
   containerwidth () {
      Trả lại.SlidetOtal * 100 + '%';
   Không thể
} 

14. Tạo phương pháp

Tiếp theo, tạo một thuộc tính đối tượng khác gọi là 'Phương thức' để lưu trữ các chức năng của Carousel của chúng tôi. 'gotoSlide ()' là một cách dễ dàng để cài đặt 'ActiveLideDex' từ bước 11, 'isContrololActive ()' trả về TRUE khi chỉ số của một điều khiển khớp với 'ActiveSlideDex', trong khi 'NextSlide ()' và 'PrvSlide ()' sẽ chỉ cần chuyển qua những miếng cắt.

 Phương pháp: {
  gotoslide (slideindex) {
  this.activeslidex = slideindex;
  },
  iscontrolacive (ControlInDex) {
  Return ControlInDex - 1
  === this.activeslideindex;
  },
  NextSlide () {
  this.activeslideindex === này.
  slidetotal - 1? this.Activeslideindex.
  = 0: this.activeslideindex ++;
  },
  prevslide () {
  this.activeslideindex === 0? điều này.
  ActiveSlideInDex = this.slideTotal - 1
  : this.Activeslideindex--;
  Không thể
} 

15. Tính vị trí container của Carousel

Carousel sử dụng giá trị tỷ lệ phần trăm với chuyển đổi: Hoạt hình TranslateX và CSS để mô phỏng chuyển đổi slide. Thêm đoạn mã dưới đây vào đối tượng 'được tính toán' để chúng ta có thể tính giá trị này.

 ActiveSlideoDocation () {
  Trả về '-' + (100 / cái này.slidetOtotal)
  * this.activeslideindex + '%';
} 

16. Soạn CSS nội tuyến

Bây giờ chúng ta có tất cả các giá trị để định vị chính xác hộp slide băng chuyền, chúng ta cần xây dựng CSS mà sau đó chúng ta sẽ thêm vào thuộc tính 'Style' của nó. Chúng tôi sẽ thêm logic này dưới chức năng khác trong đối tượng 'được tính toán'.

 ContainsStyle () {
  Trả về 'Chiều rộng: $ {this.containerwidth};
  Chuyển đổi: TranslateX ($ {Điều này
  .activeivesplidition}); `

17. BIND CSS

Thêm đoạn mã dưới đây vào phần tử 'C-App-Carousel__Container' trong mẫu. Điều này sẽ liên kết giá trị trả về của 'containertyle ()' từ bước trước đó đến thuộc tính 'phong cách' của hộp đựng băng chuyền, nghĩa là css của nó và do đó vị trí của nó sẽ tự động được cập nhật khi mọi thứ thay đổi.

 V-Bind: Style = "Containstyle" 

18. Kết nối mũi tên tiếp theo / trước

Bây giờ chúng ta cần thêm logic vào các mũi tên tiếp theo / trước để phương thức chính xác từ bước 14 được gọi khi mỗi mũi tên tương ứng được nhấp. Phần tử 'prevslide ()' thuộc về phần tử 'C-App-Icon-Arrow-Prev', trong khi 'NextSlide ()' thuộc về phần tử 'C-App-Icon-Next-Next'. Chỉ thị 'V-ON' chỉ là một cách dễ dàng để thiết lập người nghe sự kiện ở Vue.js, với 'nhấp' là sự kiện DOM mà chúng tôi đang nhắm mục tiêu.

 // Trước đó
V-ON: Nhấp.Native = "ARVSLIDE ()"
// Kế tiếp
v-ON: nhấp.native = "NextSlide ()" 

19. Tạo điều khiển băng chuyền

Hãy tạo các yếu tố điều khiển và làm cho chúng hiển thị slide tương ứng khi nhấp vào. Thêm phần tử dưới đây trong 'C-App-Carousel__Controls'. Chỉ thị 'V-for' được sử dụng để tạo một lượng các yếu tố kiểm soát phù hợp với biến 'slideetotal', trong khi chỉ thị 'V-Bind' chỉ cho phép lớp 'đang hoạt động' khi phương thức 'iscontrolactive' từ bước 14 trả về thật. Cuối cùng, chúng tôi đang tạo một trình lắng nghe sự kiện khác thông qua 'v-on' vì vậy, khi nhấp vào, điều khiển gọi phương thức 'gotoslide' và chuyển chỉ mục của nó, phù hợp với chỉ mục slide tương ứng.

 & lt; div v-for = "n trong slideetotal"
: Key = "N" V-Bind: Class =
"{'đang hoạt động': iscontrolacive (n)}"
Class = "C-App-Carousel__Control"
V-ON: nhấp = "gotoslide (n - 1)" & gt; & lt; / div & gt; 

20. Linh kiện nhập khẩu

Bây giờ chúng ta hãy quay trở lại thành phần 'app.vue' trên đỉnh và nhập mọi thứ. Ngay sau khi mở & lt; script & gt; Thẻ, nhập thành phần '.vue'. các tập tin:

 Nhập AppCarousel từ '@ / linh kiện / ứng dụng-carousel / ứng dụng-carousel'
nhập appcarouselslide từ '@ / linh kiện / ứng dụng-carousel-slide / app-carousel-slide' 

Tiếp theo, sửa đổi đối tượng 'Thành phần' để nó tham chiếu các thành phần mới nhập khẩu này.

 Thành phần: {
   AppButton,
   appcarousel,
   appcarouselslide.
} 

Cuối cùng, trong & lt; phong cách & gt; Thẻ, nhập SCSS mới của chúng tôi với phần còn lại của nhập khẩu thành phần.

 @Import "/ Linh kiện / ứng dụng-Carousel /
thành phần.app-carousel ";
@Import "/ Linh kiện / ứng dụng-carousel-slide /
thành phần.app-carousel-slide "; 

21. Thêm băng chuyền và slide

Cuối cùng, hãy thêm thành phần Carousel mới của chúng tôi và một số slide vào ứng dụng chính. Vẫn trong 'app.vue', thay thế 'đang xây dựng' bằng đoạn trích dưới đây. Mỗi & lt; ứng dụng-carousel-slide & gt; phần tử đại diện cho một slide duy nhất. Thêm bao nhiêu tùy thích, thay thế văn bản hoặc hình ảnh mà mong muốn. Bao gồm 'Test-Photo-01.jpg' để 'Test-Photo-05.jpg'. Khi đó đã hoàn thành biên dịch, mọi thứ sẽ hoạt động. Huzzah!

& lt; App-Carousel & GT;
  & lt; ứng dụng-carousel-slide & gt;
  & lt; slot mẫu = "Tiêu đề" & gt; slide của tôi
  & lt; / template & gt;
  & lt; slot mẫu = "văn bản" & gt;
  & lt; p & gt; đây là một slide băng chuyền. & lt; / p & gt;
  & lt; ứng dụng-nút & gt; hãy đi & lt; / app-nút & gt;
  & lt; / template & gt;
  & lt; img slot = "hình ảnh"
  src = "./ tài sản / img / test-photo-01.jpg"
  alt = "Ảnh Carousel của tôi" & GT;
  & lt; / app-carousel-slide & gt;
& lt; / app-carousel & gt; 

22. Thêm linh hoạt vào băng chuyền

Bây giờ chúng ta có một chiếc Carousel hoạt động, hãy thêm một số chức năng bổ sung để chúng ta có thể dễ dàng tùy chỉnh thời lượng chuyển đổi slide, thuộc tính thời gian của nó, khai báo nếu các slide sẽ tự động trượt và nếu có tần suất. Mở lại 'ứng dụng-carousel.vue' và thêm các thuộc tính trong đoạn trích dưới đây vào đối tượng thành phần.

 Đạo cụ: {
  Chuyển tiếp: {
  Loại: Chuỗi,
  Mặc định: '0,5s'
  },
  Transitiontiming: {
  Loại: Chuỗi,
  Mặc định: 'Dễ'
  Không thể
} 

23. Sửa đổi containerstyle ()

Các giá trị được truyền cho các thuộc tính này sẽ tìm đường đến CSS nội tuyến của CARSEL từ phía sau ở bước 17. Bây giờ, hãy sửa đổi chức năng tính toán 'containertyle' để đảm bảo rằng điều này xảy ra.

 ContainsStyle () {
  Trả về `width: $ {this.containerwidth};
  biến đổi:
  TranslateX ($ {this.activesbitide});
  Chức năng chuyển tiếp-Thời gian:
  $ {this.transitiontiming};
  Chuyển tiếp trong thời gian:
  $ {this.TransitionDuration}; `
} 

24. Chuyển dữ liệu đến các thuộc tính băng chuyền

Đoạn trích dưới đây minh họa cách chúng ta sẽ truyền dữ liệu cho các thuộc tính mới này vào & LT; App-Carousel & GT; yếu tố trong 'app.vue'. Sau khi thêm, bạn sẽ có thể vượt qua bất kỳ giá trị nào bạn muốn. Ví dụ: thời lượng "3.0s" sẽ dẫn đến quá trình chuyển đổi slide rất chậm!

 & lt; App-Carousel
Chuyển đổi thời lượng = "0,25s"
Thời gian chuyển tiếp = "Easy-in-out" & GT; 

25. Thêm đạo cụ tự động trượt

Đối với Auto-Slide, chúng ta cần thêm hai đối tượng bổ sung vào 'đạo cụ' trong 'ứng dụng-carousel.vue'. 'Tự động' là 'true' hoặc 'false', tương ứng với nếu băng chuyền nên tiếp tục tự động trượt. 'Tự động kiểm soát' kiểm soát thời gian trước khi tự động trượt kích hoạt, với giá trị mặc định là 5000 mili giây.

 Tự động: {
  Loại: Chuỗi,
  Mặc định: 'Sai'
},
Tự động tự động: {
  Loại: Chuỗi,
  Mặc định: 5000.
} 

26. Bắt đầu tự động trượt

Bây giờ chúng ta cần bắt đầu tự động trượt trên tải thành phần. Trong hàm 'Gắn kết ()' của Carousel, sau nội dung hiện có, hãy kiểm tra xem thuộc tính 'Tự động' được đặt thành 'TRUE' hay không. Nếu vậy, hãy tạo một khoảng thời gian kích hoạt phương thức 'Nextslide ()' liên tục sau khi giá trị 'tự động' đã được thông qua.

 Nếu (this.auto === 'TRUE') {
  this.autointerval = setInterval (() = & gt; {
  this.nextslide ();
  }, parseInt (cái này ..AutOtiming));
} 

27. Hủy phương pháp tự động trượt

Rõ ràng, chúng ta cần một cách nào đó một cách nào đó để người dùng vô hiệu hóa tự động trượt nếu họ đã bày tỏ mong muốn vận hành băng chuyền bằng tay. Bước đầu tiên về phía đây là một phương thức băng chuyền mới gọi là 'canctautoslide'. Điều này chỉ đơn giản là hủy bỏ khoảng thời gian được tạo trong bước trước.

 CancAutoslide () {
   ClearInterval (this.AutoPointerval);
} 

28. Kích hoạt hủy bỏ

Nếu người dùng nhấp vào một mũi tên hoặc phần tử điều khiển, nên cho rằng họ muốn vận hành băng chuyền theo cách thủ công, vì vậy hãy gọi phương thức 'Cancelautoslide' nếu bất kỳ phần tử nào trong số này được nhấp. Để thực hiện việc này, chỉ cần thêm '+ canctAutoslide ()' vào lệnh 'V-ON' của từng thành phần. Xem đoạn trích dưới đây để biết ví dụ bằng cách sử dụng mũi tên slide 'trước'.

 V-ON: nhấp.native = "ARVSLIDE () + hủyAutoSoSlide ()" 

29. Vượt qua giá trị cho các đạo cụ tự động trượt

Cuối cùng, hãy chuyển một số giá trị đối với các thuộc tính tự động trượt mà chúng ta đã tạo. Quay lại 'app.vue', thêm đoạn mã dưới đây vào & lt; ứng dụng-carousel & gt; phần tử để kích hoạt một slide tự động cứ sau ba giây.

 AUTO = "TRUE" Auto-Timing = "3000"

30. Kết thúc xây dựng thành phần băng chuyền

Hủy máy chủ phát triển hoặc mở một cửa sổ thiết bị đầu cuối mới và chạy 'NPM RUN Build' để tạo phiên bản được biên dịch, sản xuất thành phần Carousel Powered của bạn trong thư mục 'dist'.

Bài viết này ban đầu được xuất bản trong số 269 của nhà thiết kế web thiết kế web sáng tạo. Mua số phát hành 269 tại đây hoặc là Đăng ký nhà thiết kế web ở đây .

Sự kiện thiết kế web tạo ra. London Trả lại vào ngày 19-21 tháng 9 năm 2018, cung cấp một lịch trình đóng gói của các diễn giả hàng đầu trong ngành, một ngày hội thảo đầy đủ và cơ hội kết nối có giá trị - Đừng bỏ lỡ nó. Nhận của bạn tạo ra. Vé ngay bây giờ .

Những bài viết liên quan:

• 7 công cụ thiết yếu cho nhà thiết kế web ngày nay
• Thêm hiệu ứng trục trặc vào trang web của bạn
• 6 trang 'Giới thiệu' tuyệt vời để truyền cảm hứng cho bạn