vue2實(shí)現(xiàn)可復(fù)用的輪播圖carousel組件詳解
本文實(shí)例為大家分享了vue2實(shí)現(xiàn)輪播圖carousel組件的使用方法，供大家參考，具體內(nèi)容如下
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í)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
Vue組件傳值異步問(wèn)題子組件拿到數(shù)據(jù)較慢解決
這篇文章主要為大家介紹了Vue組件傳值異步中子組件拿到數(shù)據(jù)較慢的問(wèn)題解決方法，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-08-08
uniapp Vue3中如何解決web/H5網(wǎng)頁(yè)瀏覽器跨域的問(wèn)題
存在跨域問(wèn)題的原因是因?yàn)闉g覽器的同源策略,也就是說(shuō)前端無(wú)法直接發(fā)起跨域請(qǐng)求,同源策略是一個(gè)基礎(chǔ)的安全策略,但是這也會(huì)給uniapp/Vue開發(fā)者在部署時(shí)帶來(lái)一定的麻煩,這篇文章主要介紹了在uniapp Vue3版本中如何解決web/H5網(wǎng)頁(yè)瀏覽器跨域的問(wèn)題,需要的朋友可以參考下2024-06-06
vue-router是Vue.js官方的路由插件,它和vue.js是深度集成的,適合用于構(gòu)建單頁(yè)面應(yīng)用,下面這篇文章主要給大家介紹了關(guān)于降低vue-router版本的2種解決方法,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-07-07
vue是一套用于構(gòu)建用戶界面的漸進(jìn)式框架，本文通過(guò)實(shí)例給大家介紹了vue入門教程適用小白初學(xué)者，非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友參考下吧2018-04-04
vue-router的HTML5 History 模式設(shè)置
這篇文章主要介紹了vue-router的HTML5 History模式設(shè)置，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-09-09
這篇文章主要為大家介紹了前端axios取消請(qǐng)求總結(jié)示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-10-10
重新認(rèn)識(shí)vue之事件阻止冒泡的實(shí)現(xiàn)
這篇文章主要介紹了重新認(rèn)識(shí)vue之事件阻止冒泡的實(shí)現(xiàn)，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-08-08
這篇文章主要為大家介紹了vue頁(yè)面狀態(tài)持久化，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來(lái)幫助2021-12-12
淺析Proxy可以優(yōu)化vue的數(shù)據(jù)監(jiān)聽機(jī)制問(wèn)題及實(shí)現(xiàn)思路
這篇文章主要介紹了淺析Proxy可以優(yōu)化vue的數(shù)據(jù)監(jiān)聽機(jī)制問(wèn)題及實(shí)現(xiàn)思路,需要的朋友可以參考下2018-11-11
vue2 使用@vue/composition-api依賴包 編譯、打包各種報(bào)錯(cuò)問(wèn)題分析
由于package.json 文件中 vue、vue-template-compiler 版本號(hào)前面 多了個(gè) ^ 導(dǎo)致實(shí)際導(dǎo)入時(shí)，node_module中的 vue 版本可能被升級(jí)為 2.7.x，這篇文章主要介紹了vue2 使用@vue/composition-api依賴包 編譯、打包各種報(bào)錯(cuò)問(wèn)題分析,需要的朋友可以參考下2023-01-01