本文實(shí)例為大家分享了vue2實(shí)現(xiàn)輪播圖carousel組件的使用方法，供大家參考，具體內(nèi)容如下

成都創(chuàng)新互聯(lián)公司-專業(yè)網(wǎng)站定制、快速模板網(wǎng)站建設(shè)、高性價(jià)比汶上網(wǎng)站開(kāi)發(fā)、企業(yè)建站全套包干低至880元,成熟完善的模板庫(kù),直接使用。一站式汶上網(wǎng)站制作公司更省心,省錢,快速模板網(wǎng)站建設(shè)找我們，業(yè)務(wù)覆蓋汶上地區(qū)。費(fèi)用合理售后完善，十年實(shí)體公司更值得信賴。

1、千年老規(guī)矩，上效果圖，說(shuō)明功能：

（1） 實(shí)現(xiàn)定時(shí)器，鼠標(biāo)未移上圖片時(shí)，自動(dòng)輪播切換

（2） 有左右切換按鈕，可切換至上一張、下一張

（3）有底部小圖標(biāo)，可自由切換至任意一張

github參考地址：https://github.com/chuanzaizai/vue_carousel

2、組件設(shè)計(jì)思路：

（1）由于是可復(fù)用的子組件，圖片的寬高、定時(shí)器間隔時(shí)間、輪播圖list應(yīng)由父組件傳入

（2）定義子組件自身變量，由于我這里為了簡(jiǎn)化步驟，所以輪播圖list就暫時(shí)就定義為一個(gè)常量

同時(shí)定義了pos默認(rèn)展示的圖片數(shù)組下標(biāo)，后面的計(jì)算屬性會(huì)很有用

定時(shí)器變量

（3） 接著是比較關(guān)鍵的一些步驟：

a、為圖片綁定的：src的計(jì)算屬性

b、底部的小按鈕應(yīng)該動(dòng)態(tài)生成，并且它的active樣式應(yīng)該依托于pos動(dòng)態(tài)切換

c、上一張、下一張、定時(shí)器切換時(shí)就是++或者--pos,同時(shí)在兩個(gè)臨界值0和defaultList.length-1是判斷就可以

d、由于下部小圖標(biāo)為動(dòng)態(tài)生成、寬高不定，但是都應(yīng)水平居中：

可采用flex布局，或者js調(diào)整樣式

3、說(shuō)明一下這樣設(shè)計(jì)的原因

（1）子組件的復(fù)用性不言而喻，可定義寬高、定時(shí)器切換時(shí)間

（2）比較重要的一點(diǎn)：

a、組件加載過(guò)程中，如果輪播圖數(shù)量過(guò)多，假如有10張，按照傳統(tǒng)加載模式，就初始化一次性加載，再自行切換，這對(duì)頁(yè)面的性能是很大的挑戰(zhàn)

b、在以上組件的設(shè)計(jì)中，用為將pos定義為0，初始化只會(huì)加載一張圖片，定時(shí)器切換或者用戶手動(dòng)切換才會(huì)其余圖片，這對(duì)用戶體驗(yàn)是很大的改善

4、代碼已上傳至github,喜歡的小伙伴可以點(diǎn)個(gè)贊?。。。?！

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。