vue2實現可復用的輪播圖carousel組件詳解
本文實例為大家分享了vue2實現輪播圖carousel組件的使用方法，供大家參考，具體內容如下
1、千年老規(guī)矩，上效果圖，說明功能：
（1） 實現定時器，鼠標未移上圖片時，自動輪播切換
（2） 有左右切換按鈕，可切換至上一張、下一張
（3）有底部小圖標，可自由切換至任意一張
github參考地址：https://github.com/chuanzaizai/vue_carousel
2、組件設計思路：
（1）由于是可復用的子組件，圖片的寬高、定時器間隔時間、輪播圖list應由父組件傳入
（2）定義子組件自身變量，由于我這里為了簡化步驟，所以輪播圖list就暫時就定義為一個常量
同時定義了pos默認展示的圖片數組下標，后面的計算屬性會很有用
定時器變量
（3） 接著是比較關鍵的一些步驟：
a、為圖片綁定的：src的計算屬性
b、底部的小按鈕應該動態(tài)生成，并且它的active樣式應該依托于pos動態(tài)切換
c、上一張、下一張、定時器切換時就是++或者--pos,同時在兩個臨界值0和defaultList.length-1是判斷就可以
d、由于下部小圖標為動態(tài)生成、寬高不定，但是都應水平居中：
可采用flex布局，或者js調整樣式
3、說明一下這樣設計的原因
（1）子組件的復用性不言而喻，可定義寬高、定時器切換時間
（2）比較重要的一點：
a、組件加載過程中，如果輪播圖數量過多，假如有10張，按照傳統(tǒng)加載模式，就初始化一次性加載，再自行切換，這對頁面的性能是很大的挑戰(zhàn)
b、在以上組件的設計中，用為將pos定義為0，初始化只會加載一張圖片，定時器切換或者用戶手動切換才會其余圖片，這對用戶體驗是很大的改善
4、代碼已上傳至github,喜歡的小伙伴可以點個贊?。。。?！
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
這篇文章主要為大家介紹了Vue組件傳值異步中子組件拿到數據較慢的問題解決方法，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-08-08
uniapp Vue3中如何解決web/H5網頁瀏覽器跨域的問題
存在跨域問題的原因是因為瀏覽器的同源策略,也就是說前端無法直接發(fā)起跨域請求,同源策略是一個基礎的安全策略,但是這也會給uniapp/Vue開發(fā)者在部署時帶來一定的麻煩,這篇文章主要介紹了在uniapp Vue3版本中如何解決web/H5網頁瀏覽器跨域的問題,需要的朋友可以參考下2024-06-06
vue-router是Vue.js官方的路由插件,它和vue.js是深度集成的,適合用于構建單頁面應用,下面這篇文章主要給大家介紹了關于降低vue-router版本的2種解決方法,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2022-07-07
vue是一套用于構建用戶界面的漸進式框架，本文通過實例給大家介紹了vue入門教程適用小白初學者，非常不錯，具有參考借鑒價值，需要的朋友參考下吧2018-04-04
這篇文章主要介紹了vue-router的HTML5 History模式設置，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-09-09
這篇文章主要為大家介紹了前端axios取消請求總結示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-10-10
這篇文章主要介紹了重新認識vue之事件阻止冒泡的實現，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-08-08
這篇文章主要為大家介紹了vue頁面狀態(tài)持久化，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2021-12-12
淺析Proxy可以優(yōu)化vue的數據監(jiān)聽機制問題及實現思路
這篇文章主要介紹了淺析Proxy可以優(yōu)化vue的數據監(jiān)聽機制問題及實現思路,需要的朋友可以參考下2018-11-11
vue2 使用@vue/composition-api依賴包 編譯、打包各種報錯問題分析
由于package.json 文件中 vue、vue-template-compiler 版本號前面 多了個 ^ 導致實際導入時，node_module中的 vue 版本可能被升級為 2.7.x，這篇文章主要介紹了vue2 使用@vue/composition-api依賴包 編譯、打包各種報錯問題分析,需要的朋友可以參考下2023-01-01