vue.js項目使用原生js實現(xiàn)移動端的輪播圖
前言
今天我在vue.js項目實戰(zhàn)開發(fā)過程中遇到了實現(xiàn)輪播圖效果的問題,因為不想因為一個輪播圖而引用整個jquery,而且我還發(fā)現(xiàn)自己根本就不清楚移動端的一些事件,所以我就進(jìn)行了一些資料查找,并最終解決了這個問題,接下來跟大家分享一下我的解決問題的過程.
一、了解原生js移動端的事件
原生js移動端的事件一共有四種:
事件 | 作用 |
---|---|
touchstart | 手指放到屏幕上觸發(fā) |
touchmove | 手指在屏幕上移動觸發(fā)(高頻觸發(fā)) |
touchend | 手指離開屏幕觸發(fā) |
touchcancel | 系統(tǒng)取消touch事件時觸發(fā) |
在每個事件被觸發(fā)后,會返回一個event參數(shù),event里面包含著三個觸摸列表,即:
event中的觸摸列表 | 內(nèi)容 |
---|---|
touches | 屏幕上所有的手指列表 |
targetTouches | 當(dāng)前這個DOM中的手指列表 |
changedTouches | 涉及當(dāng)前事件的手指列表(本實例中盡量用這個) |
觸摸列表中每個觸摸對象(即每個手指)都對應(yīng)著一些觸摸時生成的信息(只寫了部分)
觸摸信息 | 含義 |
---|---|
clientX / clientY | 觸摸點相對于瀏覽器的位置 |
pageX / pageY | 觸摸點相對于頁面的位置 |
screenX / screenY | 觸摸點相對于屏幕的位置 |
總結(jié):我們可以用觸摸事件傳入的參數(shù)event.changedTouches[0].pageX 獲得我們觸發(fā)( event )觸摸事件那個手指( changedTouches[0] )當(dāng)前位置相對于頁面的位置( pageX )
二、輪播圖實戰(zhàn)
我們做的輪播圖功能中只用到前三種觸發(fā)事件,我們來看一下具體的應(yīng)用。
因為vue.js項目中都是以組件的形式來開發(fā)的,所以我這里就以一個組件的形式來展示,有疑問的可以留言詢問。
第一部分:template模板
<template> <div class="ContinuPlay_box" @touchstart="TouchStart" @touchmove="TouchMove" @touchend="TouchEnd"> <div class="items_box"> <div v-for="(item, index) in banners" class="slide" :key="index"> <a :href="item.link" rel="external nofollow" > <img :src="item.image" alt=""> </a> </div> </div> <div class="points_box"> <div class="points"> <div class="each_point" v-for="(item, index) in banners.length" :key="index" :class="{current:index==CurrentImg}"></div> </div> </div> </div> </template>
第一部分解讀:
1.class="ContinuPlay_box"的div標(biāo)簽作為組件模板里的根標(biāo)簽包裹內(nèi)部標(biāo)簽(知識點:組件內(nèi)如果多個標(biāo)簽處于同級,必須用一個標(biāo)簽將他們包裹起來),也用于設(shè)置overflow:hidden樣式,用來隱藏未播放的輪播圖
2.class="items_box"的div標(biāo)簽作為內(nèi)部class=“slide” 的div標(biāo)簽的父標(biāo)簽,用來開啟flex布局,該標(biāo)簽內(nèi)主要內(nèi)容就是輪播圖圖片
3.class=“slide” 的div標(biāo)簽用v-for指令對父組件傳進(jìn)來的數(shù)據(jù)banners進(jìn)行遍歷并輸出
4.class="points"的div標(biāo)簽作為內(nèi)部class="each_point"的div標(biāo)簽的父標(biāo)簽,用來開啟flex布局,讓輪播圖的中下方的小圓點有序排列,該標(biāo)簽內(nèi)部主要內(nèi)容就是輪播圖中間下方的進(jìn)度條小圓點
第二部分:script標(biāo)簽內(nèi)代碼
<script> export default { name: "ContinuPlay", props:['banners'], //接受父級組件傳過來的banners數(shù)據(jù) data(){ return{ bannerwidth: 0, //輪播圖寬度 StartPoint: 0, //觸摸開始的點的橫坐標(biāo) EndPoint: 0, //觸摸結(jié)束的點的橫坐標(biāo) MoveLength: 0, //StartPoint與EndPoint的差值 CurrentImg: 0, //當(dāng)前輪播圖的索引 isPlaying: true, //判斷是否處于自動輪播 playTimer: null //輪播定時器 } }, methods:{ TouchStart(event){ //停止輪播 clearInterval(this.playTimer) //獲取觸摸的開始點 this.StartPoint = event.changedTouches[0].pageX }, TouchMove(event){ //獲取觸摸的結(jié)束點 this.EndPoint = event.changedTouches[0].pageX this.slidings() }, TouchEnd(){ this.Jump() //開始輪播 this.startPlay() }, //Jump()方法用于處理滑動到一定程度后松手自動跳轉(zhuǎn)到下一頁或上一頁 Jump(){ const currentimg = document.getElementsByClassName('slide') //滑動超過輪播圖寬度的百分之40,則跳轉(zhuǎn)下一張,否則不跳轉(zhuǎn) if(this.MoveLength > 0 && this.CurrentImg !== this.banners.length-1){ if(this.MoveLength > this.bannerwidth * 0.4){ this.CurrentImg ++ currentimg[0].style.marginLeft = -this.CurrentImg * this.bannerwidth + 'px' } else{ currentimg[0].style.marginLeft = -this.CurrentImg * this.bannerwidth + 'px' } } else if(this.MoveLength < 0 && this.CurrentImg !== 0){ if(-this.MoveLength > this.bannerwidth * 0.4){ this.CurrentImg -- currentimg[0].style.marginLeft = -this.CurrentImg * this.bannerwidth + 'px' } else{ currentimg[0].style.marginLeft = -this.CurrentImg * this.bannerwidth + 'px' } } }, //slidings()方法用于處理在滑動過程中,輪播圖跟著手指滑動的距離移動 slidings(){ //判斷是點擊還是滑動 if(this.StartPoint === this.EndPoint){return} this.MoveLength = this.StartPoint - this.EndPoint //操作DOM,獲取輪播圖對象標(biāo)簽 const currentimg = document.getElementsByClassName('slide') //獲取輪播圖的寬度 this.bannerwidth = currentimg[0].offsetWidth //判斷是否超出滑動范圍,即第一頁無法再往前一頁滑動,最后一頁無法再往后一頁滑動 if(this.MoveLength > 0 && this.CurrentImg !== this.banners.length-1){ currentimg[0].style.marginLeft = -this.MoveLength - this.CurrentImg * this.bannerwidth + 'px' } else if(this.MoveLength < 0 && this.CurrentImg !== 0){ currentimg[0].style.marginLeft = -this.MoveLength - this.CurrentImg * this.bannerwidth + 'px' } }, //開啟輪播 startPlay() { clearInterval(this.playTimer) this.playTimer = setInterval(() => { if(this.CurrentImg === 3) { this.CurrentImg = -1 } this.CurrentImg ++ const currentimg = document.getElementsByClassName('slide') this.bannerwidth = currentimg[0].offsetWidth currentimg[0].style.marginLeft = -this.CurrentImg * this.bannerwidth + 'px' currentimg[0].style.transition = 'all 1s ease' }, 3000) } }, mounted() { //頁面掛在完畢自動開啟輪播 this.startPlay() } } </script>
第二部分解讀:
1.在組件data屬性中,初始化了幾個變量:StartPoint(觸摸開始點橫坐標(biāo))、EndPoint(觸摸結(jié)束時橫坐標(biāo))、MoveLength(移動的長度(有正負(fù)))、CurrentImg(當(dāng)前輪播圖索引)
2.在頁面掛在完成后, 觸發(fā)methods中的startPlay方法,開啟輪播功能
3.在觸摸事件中主要運(yùn)用 StartPoint - EndPoint 的值使得圖片跟著手指的滑動方向同步移動, 并且在觸摸開始時,關(guān)閉自動輪播定時器,在觸摸結(jié)束后,自動開啟輪播定時器
4.在松手后,通過Jump() 方法進(jìn)行跳轉(zhuǎn)上下頁圖片
第三部分:css樣式部分
<style scoped> .ContinuPlay_box{ overflow: hidden; position: relative; } .ContinuPlay_box .items_box{ display: flex; } .ContinuPlay_box .slide{ flex-shrink: 0; width: 100%; } .ContinuPlay_box .slide img, .ContinuPlay_box .slide a{ width: 100%; height: 100%; } .points_box{ display: flex; justify-content: center; } .points{ display: flex; width: 33%; height: 10px; position: absolute; bottom: 8px; justify-content: space-evenly; } .points .each_point{ width: 8px; height: 8px; border-radius: 8px; background: #fff; opacity: 0.7; } .points .current{ background: #ff0031; } </style>
css樣式就不做多解釋了,因為這比較抽象,你們可以根據(jù)我的代碼進(jìn)行調(diào)試優(yōu)化,我的應(yīng)該也不是最好的
三、效果圖
此gif圖展示的是我現(xiàn)在已經(jīng)開發(fā)的部分項目效果圖,其中包括本文講的輪播圖功能
結(jié)束語
2020.05.01 這是我在vue.js實戰(zhàn)項目開發(fā)第二天中遇到的問題,希望我遇到的問題能對大家有所幫助, 如果大家感興趣,可以關(guān)注一波,每天跟大家分享一些問題和解決辦法,大家也可以跟我分享一下你們的經(jīng)驗。
更多關(guān)于原生js移動端輪播圖的資料請關(guān)注腳本之家其它相關(guān)文章!
相關(guān)文章
詳解Vue CLI3 多頁應(yīng)用實踐和源碼設(shè)計
這篇文章主要介紹了詳解Vue CLI3 多頁應(yīng)用實踐和源碼設(shè)計,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2018-08-08js節(jié)流防抖應(yīng)用場景,以及在vue中節(jié)流防抖的具體實現(xiàn)操作
這篇文章主要介紹了js節(jié)流防抖應(yīng)用場景,以及在vue中節(jié)流防抖的具體實現(xiàn)操作,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2020-09-09vue中計算屬性computed理解說明包括vue偵聽器,緩存與computed的區(qū)別
這篇文章主要介紹了對vue中計算屬性computed理解說明包括vue偵聽器,緩存與computed的區(qū)別,需要的朋友可以參考下2022-05-05手把手教你寫一個vue全局注冊的Toast的實現(xiàn)
本文主要介紹了手把手教你寫一個vue全局注冊的Toast的實現(xiàn),文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-04-04Vue3?+?elementplus實現(xiàn)表單驗證+上傳圖片+?防止表單重復(fù)提交功能
這篇文章主要介紹了Vue3?+?elementplus?表單驗證+上傳圖片+?防止表單重復(fù)提交,本文給大家展示效果圖和完整代碼,代碼簡單易懂,對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2022-10-10Vue Elenent實現(xiàn)表格相同數(shù)據(jù)列合并
這篇文章主要為大家詳細(xì)介紹了Vue Elenent實現(xiàn)表格相同數(shù)據(jù)列合并,文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下2020-11-11Vue 使用formData方式向后臺發(fā)送數(shù)據(jù)的實現(xiàn)
這篇文章主要介紹了Vue 使用formData方式向后臺發(fā)送數(shù)據(jù)的實現(xiàn),文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04