vue如何實現(xiàn)無縫輪播圖

更新時間：2022年09月20日 11:29:58 作者：MeinvWR

這篇文章主要介紹了vue如何實現(xiàn)無縫輪播圖，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教

vue實現(xiàn)無縫輪播圖

輪播圖的思路

一組圖片進(jìn)行不停地循環(huán),如果循環(huán)到最后一張圖片,就從第一張開始,不停循環(huán),我們可以設(shè)置圖片切換的時間.

1.首先我們先把我們需要用到的數(shù)據(jù)以數(shù)組的方式定義在data中,再定義一個當(dāng)前顯示在頁面的圖片的值,默認(rèn)為0.

? data() {
? ? return {
? ? ? v:0,
? ? ? imglist:[
? ? ? ? {"id":0,img:"/pics/picture1.jpg"},
? ? ? ? {"id":1,img:"/pics/picture3.jpg"},
? ? ? ? {"id":2,img:"/pics/picture4.jpg"},
? ? ? ]
? ? }
? },

2.我們將定義的數(shù)據(jù)渲染到頁面中,v-show使用三目判斷定義的值和下標(biāo)是否相等,如果相等值就為true(顯示),否則值為false(隱藏)

? <div class="imgbox">
? ? <img :src="item.img" alt="" v-for="(item, index) in imglist" :key="index" v-show="v==index?true:false">
? </div>

3.下一步要讓輪播圖運行起來,created()這是生命周期中的一個屬性,他的作用是在項目啟動的時候?qū)崿F(xiàn)函數(shù)自執(zhí)行. 先設(shè)置一個定時器,設(shè)置兩秒,就是圖片每兩秒切換一次,然后做判斷,如果定義的值大于圖片數(shù)字的長度減1,那么就讓值=0,從第一張開始,否則,就讓圖片一直++,不斷遞增,實現(xiàn)輪播圖的效果.

? created(){
? ? setInterval(() => {
? ? ? ? if(this.v>=2){
? ? ? ? ? ? this.v=0
? ? ? ? }
? ? ? ? else{
? ? ? ? ? this.v++
? ? ? ? }
? ? }, 2000);
? }

無縫輪播（跑馬燈效果）

1.首先創(chuàng)建兩個vue組件Sweiper.vue和SweiperItem.vue;

2.將兩個組件引入頁面，Sweiper.vue中用v-model傳參（v-model 其實是語法糖，默認(rèn)屬性value和默認(rèn)事件input）；代碼中我是通過v-model的selcted將值傳給Sweiper（子組件），自動輪播時子組件再通過觸發(fā)input事件將即將顯示的值傳回給父組件

3.核心是要讓selected的值傳到SweiperItem中，與SweiperItem中的name值相等判該顯示哪張圖片；

<template>
  <div>
    <Sweiper v-model="selected">
      <!--v-model是個語法糖，相當(dāng)于value和input事件-->
      <Sweiper-item  name="item1">
        <div class="item">
          <img :src="getImg('01')" alt="">
        </div>
      </Sweiper-item>
      <Sweiper-item name="item2">
        <div class="item">
          <img :src="getImg('02')" alt="">
        </div>
      </Sweiper-item>
      <Sweiper-item name="item3">
        <div class="item">
          <img :src="getImg('03')" alt="">
        </div>
      </Sweiper-item>
    </Sweiper>
  </div>
</template>

這里的圖片沒有通過數(shù)組用v-for循環(huán)，方便大家看其結(jié)構(gòu)形式

<script>
? import Sweiper from "../components/Sweiper.vue";
? import SweiperItem from "../components/SweiperItem.vue";
? export default {
? ? name: "mySweiper",
? ? components: {
? ? ? Sweiper,
? ? ? SweiperItem
? ? },
? ? data() {
? ? ? return {
? ? ? ? selected: "item1",//默認(rèn)第一張
? ? ? }
? ? },
? ? methods:{
? ? ? getImg(url){
? ? ? ? return "img/"+url+".jpg"
? ? ? },
? ? },
? ? mounted(){
? ? ? /*setInterval(()=>{
? ? ? ?this.selected="item2"
? },3000)
? 此時因為mounted只執(zhí)行一次，所以還是不變，需要在Sweiper寫一個watch監(jiān)聽
? ? }*/這一步注釋是因為換到Sweiper組件中寫了
? }
</script>

<style >
? .item{
? ? /*border: 1px solid black;*/
? }
? .item>img{
? ? width: 100%;
? ? /*height: 0.1rem;*/
? }
</style>

Sweiper.vue

<template>
  <div class="Sweiper">
    <slot></slot>
  </div>
</template>

<script>
? export default {
? ? name: "Sweiper",
? ? data() {
? ? ? return{
? ? ? ? current:''
? ? ? }
? ? },
? ? props:{
? ? ? value:{
? ? ? ? type:String,
? ? ? ? default:""
? ? ? },
? ? },
? ? mounted(){
? ? ? //自動輪播時查找name值用indexOf的方法遍歷出當(dāng)前輪播的下表
? ? ? this.names=this.$children.map(child=>{
? ? ? ?return child.name
? ? ? });
? ? ? this. showImg();
? ? ? this. paly()
? ? },
? ? methods:{
? ? ? showImg(){
? ? ? ? this.current=this.value||this.$children[0].name;
? ? ? ? //當(dāng)前實例的直接子組件
? ? ? ? this.$children.map(vm=>{
? ? ? ? ? vm.selected=this.current
? ? ? ? })
? ? ? },
? ? ? paly(){
? ? ? ? //每次輪播把圖片做調(diào)整
? ? ? ? this.timer=setInterval(()=>{
? ? ? ? ? //indexOf返回某個指定字符串首次出現(xiàn)的位置
? ? ? ? ? const index=this.names.indexOf(this.current);
? ? ? ? ? let newIndex=index+1;
? ? ? ? ? //嚴(yán)謹(jǐn)一點
? ? ? ? ? if (newIndex===this.names.length){
? ? ? ? ? ? ?newIndex=0;
? ? ? ? ? }
? ? ? ? ? this.$emit("input",this.names[newIndex])
? ? ? ? },3000)
? ? ? }
? ? },
? ? watch:{
? ? ? //監(jiān)聽value值，發(fā)生變化就改變selected
? ? ? value(){
? ? ? ? this. showImg()
? ? ? }
? ? },
? ? beforeDestroy() {
? ? ? //實列銷毀前
? ? ? clearInterval(this.timer)
? ? }
? };
</script>

<style>
? .Sweiper{
? ? /*border: 1px solid black;*/
? ? width: 100%;
? ? height: 4rem;
? ? overflow: hidden;
? ? margin: 0 auto;
? ? position: relative;
? }
</style>

SweiperItem.vue

<template>
? <transition>
? ? <div class="Sweiper-item" v-show="isShow">
? ? ? <slot></slot>
? ? </div>
? </transition>
</template>

<script>
? export ?default {
? ? name:"SweiperItem",
? ? data(){
? ? ? return{
? ? ? ? selected:""
? ? ? }
? ? },
? ? props:{
? ? ? name:{
? ? ? ? type:String,
? ? ? ? required:true
? ? ? },
? ? },
? ? mounted(){
? ? },
? ? computed:{
? ? ? isShow(){
? ? ? ? return this.selected===this.name;
? ? ? }
? ? }
? };
</script>

<style>
? .v-enter-active,.v-leave-active{
? ? transition: all 1s linear;
? }
? .v-leave-to{
? ? transform:translate(-100%);
? }
? .v-enter{
? ? transform: translate(100%);
? }
? .v-enter-active{
? ? position: absolute;
? ? top:0;
? ? left: 0;
? }
</style>

以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: