摘要:一段代碼闡述一個輪播思路不,直接上代碼如果是下一個,那就先吧下個的設(shè)置成來移動位置,防止用戶看到將下個放到指定的位置開始輪播注意以上只是主思路代碼,完整的代碼解讀完之后會貼出來供大家參考。
一段代碼闡述一個輪播思路 不BB,直接上代碼:
1. if (direction === "next") { 2. this.index = nextIndex; 3. /*如果是下一個,那就先吧下個的dom設(shè)置成none來移動位置,防止用戶看到*/ 4. nextEl.style.display = "none"; 5. nextEl.style.webkitTransition = ""; 6. currentEl.style.display = "block"; 7. currentEl.style.webkitTransition = "-webkit-transform " + this.speed + "ms ease-in-out"; 8. setTimeout(()=> { 9. /*將下個放到指定的位置*/ 10. nextEl.style.webkitTransform = this.toward === "horizontal" ? `translate3d(100%, 0, 0)` : `translate3d(0, 100%, 0)`; 11. nextEl.style.display = "block"; 12. nextEl.style.webkitTransition = "-webkit-transform " + this.speed + "ms ease-in-out"; 13. setTimeout(() => { 14. /*開始輪播*/ 15. currentEl.style.webkitTransform = this.toward === "horizontal" ? `translate3d(-100%, 0, 0)` : `translate3d(0, -100%, 0)`; 16. nextEl.style.webkitTransform = `translate3d(0, 0, 0)`; 17. }, 20); 18. }, 10); 19. }
注意:以上只是主思路代碼,完整的代碼解讀完之后會貼出來供大家參考。
代碼解讀:思路是先判斷滾動方向,如果是向下一個節(jié)點那我就準(zhǔn)備下一個節(jié)點到指定位置(僅適合界面一次展示一個輪播節(jié)點),如果直接移動到指定位置肯定是不合理的,因為節(jié)點直接移動會讓用戶在瀏覽器界面看到,可是節(jié)點是肯定要移動啊,思路很簡單,那我給節(jié)點穿一件隱身衣(display:none),之后再移動到指定位置用戶不就看不到了,但是注意這里存在一個問題,如果直接設(shè)置設(shè)置display:none之后立馬就移動位置的話會存在一個問題,移動的效果用戶仍然能看的到,這是因為非異步的JS代碼在執(zhí)行的過程中是會阻止瀏覽器的繪圖和重繪的,所以為了繞開瀏覽器這個機制那就使用異步好了(setTimeout),下一個節(jié)點的位置現(xiàn)在已經(jīng)準(zhǔn)備好了,現(xiàn)在如果還是直接移動的話,又會存在一個問題下一個節(jié)點竟然看不到移動,這是因為我們在準(zhǔn)備節(jié)點的節(jié)點的時候已經(jīng)將它隱藏了,所以為了讓用戶看到就不得不把隱身衣脫了(display:block)才行,這樣又得加一個異步(setTimeout)才能生效了,現(xiàn)在就可以安心的執(zhí)行當(dāng)前節(jié)點和早已就緒的下一個節(jié)點了。
完整代碼如下:下面的輪播JS部分的代碼是vue寫的,主要功能包括了垂直輪播,水平輪播,手勢輪播等幾個輪播的主要功能
export default { name: "swipe", props: { /*默認是水平滾動*/ toward: { type: String, default: "vertical" }, /*是否展示指示標(biāo)志*/ showIndicators: { type: Boolean, default: true }, /*滾動速度*/ speed: { type: Number, default: 300 }, /*默認下標(biāo)從哪兒開始*/ defaultIndex: { type: Number, default: 0 }, /*自動滾動間隔*/ interval: { type: Number, default: 3000 } }, data() { return { dots: [], // 頁面標(biāo)記圓點 index: this.defaultIndex, //當(dāng)前頁面的下標(biāo) pageEls: [], // 所有的子輪播項集合 timer: null, //輪播定時器對象 noSwipe: false, //禁止?jié)L動 startPosition: "", //touch的起始位置 currentPosition: "", //touch的目前位置 translatePosition: "", //touch位移的位置 distance: 10, //touch的位移大于10的時候生效 } }, watch: {}, beforeMount: function () { }, mounted(){ this.initSwipe(); this.swipeTimeout(); this.initTouchEvent(); }, computed: { getNum(){ return this.pageEls.length; }, }, methods: { /*手動上一張*/ prev(){ window.clearTimeout(this.timer); this.swipeTimeout("prev"); }, /*手動下一張*/ next(){ window.clearTimeout(this.timer); this.swipeTimeout("next"); }, initTouchEvent(){ let dom = this.$el.querySelector(".swipe-warp"); dom.addEventListener("touchstart", this.handleTouchStart); dom.addEventListener("touchmove", this.handleTouchMove); dom.addEventListener("touchend", this.handleTouchEnd); console.log(dom); }, /*初始化輪播節(jié)點*/ initSwipe(){ var children = this.$children; if (children.length === 1) { this.noSwipe = false; return; } children.forEach((child, _index)=> { this.pageEls.push(child.$el); }); }, /*定時輪播*/ swipeTimeout(toward = "next"){ this.translate(toward, ()=> { this.timer = window.setTimeout(()=> { this.swipeTimeout("next"); }, this.interval); }); }, /*滾動方法*/ translate(direction = "next", cb){ let length = this.pageEls.length; let currentIndex = this.index; let currentEl = this.pageEls[currentIndex]; let nextIndex = ((this.index + 1) > (length - 1)) ? 0 : (this.index + 1); let nextEl = this.pageEls[nextIndex]; let pervIndex = (this.index - 1) < 0 ? (length - 1) : (this.index - 1); let pervEl = this.pageEls[pervIndex]; if (direction === "next") { this.index = nextIndex; /*如果是下一個,那就先吧下個的dom設(shè)置成none來移動位置,防止用戶看到*/ nextEl.style.display = "none"; nextEl.style.webkitTransition = ""; currentEl.style.display = "block"; currentEl.style.webkitTransition = "-webkit-transform " + this.speed + "ms ease-in-out"; setTimeout(()=> { /*將下個放到指定的位置*/ nextEl.style.webkitTransform = this.toward === "horizontal" ? `translate3d(100%, 0, 0)` : `translate3d(0, 100%, 0)`; nextEl.style.display = "block"; nextEl.style.webkitTransition = "-webkit-transform " + this.speed + "ms ease-in-out"; setTimeout(() => { /*開始輪播*/ currentEl.style.webkitTransform = this.toward === "horizontal" ? `translate3d(-100%, 0, 0)` : `translate3d(0, -100%, 0)`; nextEl.style.webkitTransform = `translate3d(0, 0, 0)`; }, 20); }, 10); } else { this.index = pervIndex; /*如果是上一個,那就先吧上個的dom設(shè)置成none來移動位置,防止用戶看到*/ pervEl.style.display = "none"; pervEl.style.webkitTransition = ""; currentEl.style.display = "block"; currentEl.style.webkitTransition = "-webkit-transform " + this.speed + "ms ease-in-out"; setTimeout(()=> { /*將上個放到指定的位置*/ pervEl.style.webkitTransform = this.toward === "horizontal" ? `translate3d(-100%, 0, 0)` : `translate3d(0, -100%, 0)`; pervEl.style.display = "block"; pervEl.style.webkitTransition = "-webkit-transform " + this.speed + "ms ease-in-out"; setTimeout(() => { /*開始輪播*/ currentEl.style.webkitTransform = this.toward === "horizontal" ? `translate3d(100%, 0, 0)` : `translate3d(0, 100%, 0)`; pervEl.style.webkitTransform = `translate3d(0, 0, 0)`; }, 20); }, 10); } this.once(currentEl, "webkitTransitionEnd", ()=> { cb && cb(); }); }, handleTouchStart($evnet){ this.startPosition = this.toward === "horizontal" ? $evnet.touches[0].clientX : $evnet.touches[0].clientY; }, handleTouchMove($evnet){ this.currentPosition = this.toward === "horizontal" ? $evnet.touches[0].clientX : $evnet.touches[0].clientY; this.translatePosition = this.currentPosition - this.startPosition; this.translatePosition !== 0 && window.clearTimeout(this.timer); $evnet.preventDefault(); $evnet.stopPropagation(); }, handleTouchEnd($evnet){ this.translatePosition < 0 && this.translatePosition < -this.distance && this.swipeTimeout("next"); this.translatePosition > 0 && this.translatePosition > this.distance && this.swipeTimeout("prev"); }, /*管理事件*/ once(el, event, fn) { var that = this; var listener = function () { if (fn) { fn.apply(this, arguments); } that.off(el, event, listener); }; this.on(el, event, listener); }, /*監(jiān)聽事件*/ on(element, event, handler){ if (element && event && handler) { element.addEventListener(event, handler, false); } }, /*移除事件*/ off(element, event, handler) { if (element && event) { element.removeEventListener(event, handler, false); } } } };
文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址:http://specialneedsforspecialkids.com/yun/84011.html
摘要:站在這個時間點上,我對自己之前三次失敗的面試經(jīng)歷做了一次深度回顧。關(guān)于我第三次面試失敗的經(jīng)歷,依然是與輪播圖有關(guān)。當(dāng)然,這次思特奇面試之旅,最后也是以失敗告終,這也是我離進大廠最近的一次。 showImg(https://segmentfault.com/img/bVYQuP?w=528&h=513); 前言 時間的齒輪已經(jīng)來到了2017年的11月份,距離2018年僅僅還剩下不到兩...
摘要:站在這個時間點上,我對自己之前三次失敗的面試經(jīng)歷做了一次深度回顧。關(guān)于我第三次面試失敗的經(jīng)歷,依然是與輪播圖有關(guān)。當(dāng)然,這次思特奇面試之旅,最后也是以失敗告終,這也是我離進大廠最近的一次。 showImg(https://segmentfault.com/img/bVYQuP?w=528&h=513); 前言 時間的齒輪已經(jīng)來到了2017年的11月份,距離2018年僅僅還剩下不到兩...
摘要:獲取下一個元素節(jié)點,存在的話,取消現(xiàn)有選中狀態(tài),設(shè)置下一個元素節(jié)點為選擇中,調(diào)用運動框架實現(xiàn)動畫,添加定時器,調(diào)用該函數(shù),實現(xiàn)自動播放。移出時,開啟定時器,繼續(xù)輪播。輪播間隔時間單位為毫秒,默認為,在內(nèi)部,以下部分進行修改或添加。 轉(zhuǎn)載自我的個人博客 歡迎大家批評指正 包括5部分: 小練習(xí)1-處理用戶輸入 小練習(xí)2-日期對象的使用 小練習(xí)3:輪播圖 小練習(xí)4:輸入提示框 小練習(xí)...
摘要:獲取下一個元素節(jié)點,存在的話,取消現(xiàn)有選中狀態(tài),設(shè)置下一個元素節(jié)點為選擇中,調(diào)用運動框架實現(xiàn)動畫,添加定時器,調(diào)用該函數(shù),實現(xiàn)自動播放。移出時,開啟定時器,繼續(xù)輪播。輪播間隔時間單位為毫秒,默認為,在內(nèi)部,以下部分進行修改或添加。 轉(zhuǎn)載自我的個人博客 歡迎大家批評指正 包括5部分: 小練習(xí)1-處理用戶輸入 小練習(xí)2-日期對象的使用 小練習(xí)3:輪播圖 小練習(xí)4:輸入提示框 小練習(xí)...
閱讀 2714·2021-11-17 17:01
閱讀 2092·2021-09-28 09:35
閱讀 3600·2021-09-01 11:04
閱讀 859·2020-06-22 14:41
閱讀 2983·2019-08-30 15:55
閱讀 2596·2019-08-30 15:43
閱讀 2319·2019-08-26 13:54
閱讀 2515·2019-08-26 13:48