vue輪播圖

時間  2019-11-17
標籤 vue 简体版
原文   原文鏈接

在公司手機端的vue編寫中，須要用到一個輪播圖，我一開始的時候使用的時候使用的是想在created中定義一個輪播函數，可是實際上這個輪播函數沒有起做用，後面在網上看了一下，看到了網上的輪播圖代碼，是使用 transition-group來實現的，實踐了一遍，如今代碼以下：javascript

這個是pc版的，假如咱們要使用webAPP開發應用，咱們須要使用touch事件，使用的touch事件以下：
touch事件屬於html5的內容，下面是一系列的touch事件：html

touchstart事件：當手指觸摸屏幕的時候觸發vue

touchend事件：當手指從屏幕離開的時候觸發html5

touchmove事件:當手指在屏幕上滑動的時候觸發java

touches：表示當前跟蹤的觸摸操做的touch對象的數組。es6

targetTouches：特定於事件目標的Touch對象的數組。web

changeTouches：表示自上次觸摸以來發生了什麼改變的Touch對象的數組。數組

 

每一個touch對象的屬性以下：app

clientX:觸摸對象在視口中的x座標ecmascript

clientY:觸摸對象在視口中的y座標

pageX：觸摸對象在頁面中的x座標

pageY:觸摸對象在頁面中的y座標

screenX:觸摸對象在屏幕中的x座標

screenY:觸摸對象在屏幕中的y座標

target:觸摸的DOM事件座標

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        .carousel-wrap{
            width: 600px;
            position: relative;
            margin: 0 auto;
        }
        .carousel {
            position: relative;
            height: 500px;
            width: 600px;
            background-color: #fff;
            overflow: hidden;
        }

        .slide-ul {
            width: 100%;
            height: 100%;
        }
        li {
            position: absolute;
            width: 100%;
            height: 100%;
        }
        img {
            width: 100%;
            height: 100%;
        }
        .list-enter-active {
            transition: all 1s ease;
            transform: translateX(0)
        }

        .list-leave-active {
            transition: all 1s ease;
            transform: translateX(-100%)
        }
        .list-enter {
            transform: translateX(100%)
        }

        .list-leave {
            transform: translateX(0)
        }
        .carousel-items{
            position: absolute;
            bottom: 10px;
            margin:0  auto;
            width: 100%;
            text-align: center;
        }
        .circle{
            display: inline-block;
            width: 10px;
            height: 10px;
            border-radius: 100%;
            border: 1px solid black;
            margin: 0 10px;
        }
        .item-active{
            background-color: whitesmoke;

        }
        
    </style>
</head>
<body>
<div id="carousel" class="carousel-wrap">
<div  class="carousel">
    <transition-group tag="ul" class="slide-ul" name="list">
        <li v-for="(list,index) in slideList" :key="index" v-show="index===currentIndex" @mouseenter="stop" @mouseleave="go">
            <a href="list.clickHref">
                <img :src="list.img" :alt="list.desc">
            </a>
        </li>
    </transition-group>
</div>
    <div class="carousel-items">
        <span v-for="(item,index) in slideList.length" class="circle" :class="{'item-active':index===currentIndex}" @click="change(index)"></span>
    </div>
</div>
<script src="vue.js"></script>
<script type="application/ecmascript">
    new Vue({
        el: "#carousel",
        data:{
            slideList: [
                {
                    clickHref:"1",
                    img:"images/book5.jpg"
                },
                {
                    clickHref:"2",
                    img:"images/book6.jpg"

                },
                {
                    clickHref:"3",
                    img:"images/book7.jpg"
                }
            ],
            currentIndex:0,
            timer:''
        },
        methods:{
          autoPlay:function(){
              this.currentIndex++;
              if (this.currentIndex > this.slideList.length - 1) {
                  this.currentIndex = 0
              }
          },
          stop: function () {
              clearInterval(this.timer);
              this.timer=null;

          },
          go: function(){
              this.timer=setInterval(()=>{
                  this.autoPlay()
              },4000)
          },
          change: function(index){
              this.currentIndex=index;
          }
        },
        created(){
            this.$nextTick(()=>{
                this.timer=setInterval(()=>{
                    this.autoPlay()
                },4000)
                }
            )
        }
    })

</script>
</body>
</html>

如上：

基本思路以下：

html代碼結構：

//聲明一個總的容器，用來容納輪播圖片部分和下面的指示小圓點
<div id="carousel" class="carousel-wrap">
　　//輪播圖部分，這一部分用於圖片相對的輪播
　　<div  class="carousel">
　　　　//transition-group部分，用來定義動做
    　　<transition-group tag="ul" class="slide-ul" name="list">
　　　　　　//用了一個v-for，至關於遍歷，（list,index）list表示內容，index表示索引，v-show表示當currentIndex===idnex的時候顯示同時在這上面定義了當數遍進入離開時動做的函數
        　　<li v-for="(list,index) in slideList" :key="index" v-show="index===currentIndex" @mouseenter="stop" @mouseleave="go">
            　　<a href="list.clickHref">
                　　<img :src="list.img" :alt="list.desc">
            　　</a>
        　　</li>
    　　</transition-group>
　　</div>
　　//這部分用來容納圓點
   <div class="carousel-items">
　　　　//經過v-for，使得輪播的圖片部分和小圓點的數量一致，定義了點擊事件
        <span v-for="(item,index) in slideList.length" class="circle" :class="{'item-active':index===currentIndex}" @click="change(index)"></span>
   </div>
</div>　　

 CSS代碼結構：

    <style>
        *{
            padding: 0;
            margin: 0;
        }
        //定義最外層的樣式，position:relative用來爲後面小圓點部分的位置定位
        .carousel-wrap{
            width: 600px;
            position: relative;
            margin: 0 auto;
        }
        //圖片輪播層樣式，定義了position爲了後面li元素的absolute滑動
        .carousel {
            position: relative;
            height: 500px;
            width: 600px;
            background-color: #fff;
            overflow: hidden;
        }
        //width height 100%是相對於輪播圖部分外層定義

        .slide-ul {
            width: 100%;
            height: 100%;
        }
        li {
            position: absolute;
            width: 100%;
            height: 100%;
        }
        img {
            width: 100%;
            height: 100%;
        }
        //下面是各個狀態的類表示，後面我會重點說明
        .list-enter-active {
            transition: all 1s ease;
            transform: translateX(0)
        }

        .list-leave-active {
            transition: all 1s ease;
            transform: translateX(-100%)
        }
        .list-enter {
            transform: translateX(100%)
        }

        .list-leave {
            transform: translateX(0)
        }
        //對於小圓點部分的定義，這一部分用來定義小圓點部分的位置，定義width:100%，text-align:center;讓小圓點居中顯示
        .carousel-items{
            position: absolute;
            bottom: 10px;
            margin:0  auto;
            width: 100%;
            text-align: center;
        }
        .circle{
　　　　　//定義小圓點的樣式　
            display: inline-block;
            width: 10px;
            height: 10px;
            border-radius: 100%;
            border: 1px solid black;
            margin: 0 10px;
        }
        .item-active{
            background-color: whitesmoke;

        }
        
    </style>

如上：

vue.js代碼：

 new Vue({
        el: "#carousel",
        data:{
　　　　　　　　//初始樣式
            slideList: [
                {
                    clickHref:"1",
                    img:"images/book5.jpg"
                },
                {
                    clickHref:"2",
                    img:"images/book6.jpg"

                },
                {
                    clickHref:"3",
                    img:"images/book7.jpg"
                }
            ],
            currentIndex:0,
            timer:''
        },
        methods:{
　　　　　　//定義函數：autoplay,stop，go，change四個函數
          autoPlay:function(){
              this.currentIndex++;
              if (this.currentIndex > this.slideList.length - 1) {
                  this.currentIndex = 0
              }
          },
          stop: function () {
              clearInterval(this.timer);
              this.timer=null;

          },
          go: function(){
              this.timer=setInterval(()=>{
                  this.autoPlay()
              },4000)
          },
          change: function(index){
              this.currentIndex=index;
          }
        },
        created(){
　　　　　在生命週期的created階段進行調用函數
         this.$nexttick用於在

            this.$nextTick(()=>{
                this.timer=setInterval(()=>{
                    this.autoPlay()
                },4000)
                }
            )
        }
    })　　

如上：

在上面的實例中，

一：使用this.$nextTick（）函數用來在數據變化以後等待vue完成更新DOM,在DOM更新以後使用  Vue.nextTick(Callack),Callback回調函數在數據更新以後被調用？

this.$nextTick（）發生在當vue實例中的函數數據發生變化的時候進行函數調用，並且咱們也能夠看到，上面咱們使用了箭頭函數

二：es6的箭頭函數的用法：

咱們在正常的函數中這樣來定義函數：

function(X){
    return x*x;  
}　　

如今咱們使用箭頭函數能夠這樣寫：

x=>x*x　　

使用箭頭函數能夠讓咱們更加直觀的定義函數：

在箭號左邊表示函數的參數，箭號右邊表示要返回的表達式

更多的es6箭頭函數的知識點後面會進行介紹；

三：

在vue中定義動畫類名：

在使用transtion-group中定義的動畫中，共有四種定義狀態：

v-enter:定義進入過渡時生效，這是一開始過分時的狀態

v-enter-active：定義過渡的狀態，在整個過渡狀態中起做用，這個能夠認爲在過渡的過程當中起做用的

v-leave:定義離開過渡的狀態

v-leave-active:定義離開過渡的狀態

在上面的輪播圖中，各個類名的含義解釋以下：

        //定義進入時候的類名
　　　　 //transform:進入後最終的目標
　　　　　.list-enter-active {
            transition: all 1s ease;
            transform: translateX(0)
        }

        .list-leave-active {
        //離開最後的目的地是位於translateX(-100%)部分
            transition: all 1s ease;
            transform: translateX(-100%)
        }
        .list-enter {
       //定義進入的位置，在translateX（100%）處進入
            transform: translateX(100%)
        }
　　　　//定義離開的位置，在translateX(0)處離開

        .list-leave {
            transform: translateX(0)
        }　　

最後，獻上這張圖片：

能夠看到一系列的class的位置：咱們能夠看到不一樣class做用的位置

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程