vue2實(shí)現(xiàn)可復(fù)用的輪播圖carousel組件詳解
本文實(shí)例為大家分享了vue2實(shí)現(xiàn)輪播圖carousel組件的使用方法，供大家參考，具體內(nèi)容如下
1、千年老規(guī)矩，上效果圖，說明功能：
（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、說明一下這樣設(shè)計(jì)的原因
（1）子組件的復(fù)用性不言而喻，可定義寬高、定時(shí)器切換時(shí)間
（2）比較重要的一點(diǎn)：
a、組件加載過程中，如果輪播圖數(shù)量過多，假如有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è)贊！?。。。?/p>
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
Vue 級(jí)聯(lián)下拉框的設(shè)計(jì)與實(shí)現(xiàn)
在前端開發(fā)中，級(jí)聯(lián)選擇框是經(jīng)常用到的，這樣不僅可以增加用戶輸入的友好性，還能減少前后端交互的數(shù)據(jù)量。本文就介紹一下使用Vue實(shí)現(xiàn)級(jí)聯(lián)下拉框，感興趣的可以了解一下2021-07-07
vue移動(dòng)端UI框架實(shí)現(xiàn)QQ側(cè)邊菜單組件
這篇文章主要介紹了vue移動(dòng)端UI框架實(shí)現(xiàn)仿qq側(cè)邊菜單組件,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下2018-03-03
vue中阻止click事件冒泡,防止觸發(fā)另一個(gè)事件的方法
下面小編就為大家分享一篇vue中阻止click事件冒泡,防止觸發(fā)另一個(gè)事件的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-02-02
localStorage 和 sessionStorage 屬性允許在瀏覽器中存儲(chǔ) key/value 對(duì)的數(shù)據(jù),localStorage 用于長(zhǎng)久保存整個(gè)網(wǎng)站的數(shù)據(jù),保存的數(shù)據(jù)沒有過期時(shí)間,直到手動(dòng)去刪除,本文給大家介紹Vue3封裝localStorage-基本使用,感興趣的朋友一起看看吧2023-12-12
vue3-vite安裝后main.ts文件和tsconfig.app.json文件報(bào)錯(cuò)解決辦法
Vue.js是一個(gè)流行的JavaScript框架,它可以幫助開發(fā)者構(gòu)建交互式Web應(yīng)用程序,這篇文章主要給大家介紹了關(guān)于vue3-vite安裝后main.ts文件和tsconfig.app.json文件報(bào)錯(cuò)解決辦法,需要的朋友可以參考下2023-12-12
這篇文章主要為大家詳細(xì)介紹了Vue實(shí)現(xiàn)無縫輪播效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-04-04
el-input寬度跟隨輸入內(nèi)容自適應(yīng)的實(shí)現(xiàn)方法
這篇文章主要給大家介紹了關(guān)于el-input寬度跟隨輸入內(nèi)容自適應(yīng)的實(shí)現(xiàn)方法,我們?cè)賹?shí)際應(yīng)用中可能需要input文本框能夠根據(jù)輸入字符的所占據(jù)的寬度自動(dòng)調(diào)節(jié)尺寸,需要的朋友可以參考下2023-08-08
這篇文章主要介紹了vue3+vite使用element-plus問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10
vue中的watch監(jiān)聽數(shù)據(jù)變化及watch中各屬性的詳解
這篇文章主要介紹了vue中的watch監(jiān)聽數(shù)據(jù)變化及watch中的immediate、handler和deep屬性詳解，本文大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友參考下吧2018-09-09
vue-element的select下拉框賦值實(shí)例
這篇文章主要介紹了vue-element的select下拉框賦值實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-03-03