欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

vue.js項目使用原生js實現(xiàn)移動端的輪播圖

 更新時間:2022年04月26日 15:20:40   作者:「零一」  
這篇文章主要為大家介紹了vue.js項目中使用原生js實現(xiàn)移動端的輪播圖,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jì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è)計

    這篇文章主要介紹了詳解Vue CLI3 多頁應(yīng)用實踐和源碼設(shè)計,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2018-08-08
  • js節(jié)流防抖應(yīng)用場景,以及在vue中節(jié)流防抖的具體實現(xiàn)操作

    js節(jié)流防抖應(yīng)用場景,以及在vue中節(jié)流防抖的具體實現(xiàn)操作

    這篇文章主要介紹了js節(jié)流防抖應(yīng)用場景,以及在vue中節(jié)流防抖的具體實現(xiàn)操作,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2020-09-09
  • Vue的緩存方法示例詳解

    Vue的緩存方法示例詳解

    這篇文章主要給大家介紹了關(guān)于Vue緩存方法的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2021-03-03
  • vue中計算屬性computed理解說明包括vue偵聽器,緩存與computed的區(qū)別

    vue中計算屬性computed理解說明包括vue偵聽器,緩存與computed的區(qū)別

    這篇文章主要介紹了對vue中計算屬性computed理解說明包括vue偵聽器,緩存與computed的區(qū)別,需要的朋友可以參考下
    2022-05-05
  • 手把手教你寫一個vue全局注冊的Toast的實現(xiàn)

    手把手教你寫一個vue全局注冊的Toast的實現(xiàn)

    本文主要介紹了手把手教你寫一個vue全局注冊的Toast的實現(xiàn),文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2022-04-04
  • Vue中進(jìn)行路由懶加載的示例詳解

    Vue中進(jìn)行路由懶加載的示例詳解

    路由懶加載是一種優(yōu)化Vue應(yīng)用程序性能的技術(shù),本文介紹了Vue中如何進(jìn)行路由懶加載,包括使用Vue異步組件和Webpack代碼分割,需要的朋友可以參考下
    2023-06-06
  • Vue3?+?elementplus實現(xiàn)表單驗證+上傳圖片+?防止表單重復(fù)提交功能

    Vue3?+?elementplus實現(xiàn)表單驗證+上傳圖片+?防止表單重復(fù)提交功能

    這篇文章主要介紹了Vue3?+?elementplus?表單驗證+上傳圖片+?防止表單重復(fù)提交,本文給大家展示效果圖和完整代碼,代碼簡單易懂,對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下
    2022-10-10
  • Vue Elenent實現(xiàn)表格相同數(shù)據(jù)列合并

    Vue Elenent實現(xiàn)表格相同數(shù)據(jù)列合并

    這篇文章主要為大家詳細(xì)介紹了Vue Elenent實現(xiàn)表格相同數(shù)據(jù)列合并,文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2020-11-11
  • Vue路由跳轉(zhuǎn)的4種方式小結(jié)

    Vue路由跳轉(zhuǎn)的4種方式小結(jié)

    本文主要介紹了Vue路由跳轉(zhuǎn)的4種方式小結(jié),文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2022-06-06
  • Vue 使用formData方式向后臺發(fā)送數(shù)據(jù)的實現(xiàn)

    Vue 使用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

最新評論