À propos de l'utilisation du composant carrousel vue.js

Cet article présente principalement en détail l'utilisation du composant carrousel vue.js, qui a une certaine valeur de référence. Les amis intéressés peuvent se référer à

J'ai déjà écrit un carrousel en utilisant le composant jQuery, en utilisant l'animation jquery pour. obtenir un effet de glissement d'image. L'effet de glissement de ce composant est réalisé par la liaison de données native de js et vue. Il ne repose pas sur d'autres bibliothèques. Bien que swiper puisse être introduit dans vue.js, le plus gros inconvénient de l'introduction des bibliothèques de classes est qu'il y a trop de codes redondants. il est donc préférable de le faire soi-même. Il est préférable d'en rédiger un qui soit simple et concis. (ps : Il y a encore un petit bug dans le réglage de la largeur et de la hauteur du composant. Dans le sous-composant, vous devez utiliser js pour modifier dynamiquement la largeur et la hauteur du conteneur. De plus, il peut y avoir des choses déraisonnables dans d'autres endroits. Vous êtes invités à me critiquer et à me corriger)

Adresse github : git@github.com:cainiao222/vueslider-components.git

Code du composant parent :

<template>
 <p>
 <slider :img="img" :width="width" :height="height"></slider>
 </p>

</template>

<script>
// import swiper from &#39;swiper&#39;

 import slider from &#39;./slider1.vue&#39;


 export default {

 data(){
 return {
 img:[{src:require(&#39;../assets/slideShow/pic1.jpg&#39;),name:&#39;hehe1&#39;},
  {src:require(&#39;../assets/slideShow/pic2.jpg&#39;),name:&#39;hehe2&#39;},
  {src:require(&#39;../assets/slideShow/pic3.jpg&#39;),name:&#39;hehe3&#39;},
  {src:require(&#39;../assets/slideShow/pic4.jpg&#39;),name:&#39;hehe4&#39;}
 ],
 width:460,
 height:250
 }
 },

 components:{
 slider:slider
 }
 }
</script>

Code sous-composant :

<template>
 <p class="box">
 <p @mouseenter="endInterval" @mouseleave="startInterval" class="container">
 <p :style="{width:wrap_width+&#39;px&#39;,height:wrap_height+&#39;px&#39;,left:offset_left+&#39;px&#39;}" class="slider-wrap">
 <p class=&#39;img&#39; v-for="item in slider_des">
  <img :src="item.src" alt="">
 </p>
 </p>
 <p class="bottom">
 <ul class="pointContainer">
  <li @click="changeIndex(index)" :class="{point:true,active:nowIndex===index}" v-for="(point,index) in length"></li>
 </ul>
 </p>
 <p @click="pre" class="click pre"><</p>
 <p @click="next" class="click next">></p>
 </p>
 </p>
</template>

<script>
 export default {
 props:{
 img:{
 type:Array,
 default:[]
 },
 width:{
 type:Number,
 default:460
 },
 height:{
 type:Number,
 default:250
 }
 },

 mounted(){
 this.startInterval();
 },

 data(){
 console.log(this.width);
 return{
 length:new Array(this.img.length),
 nowIndex:0,
 wrap_width:this.width*(this.img.length+2),
 wrap_height:this.height,
 offset_left:-this.width,
 isTransition:true,
 timer:null,
 animateFlag:true,
 timerAuto:null
 }
 },
 computed:{
 slider_des:function () {
 var arr=[];
 var arr1=arr.concat(this.img);
 arr1.push(this.img[0]);
 arr1.unshift(this.img[this.img.length-1]);
 return arr1;
 }
 },
 methods:{
 pre(){
 if(this.nowIndex===0){
  if(!this.animateFlag){
  clearInterval(this.timer);
  this.animateFlag=true;
  this.offset_left=-(this.length.length)*this.width;
  }
  this.animate(-this.width,0,function (that) {
  that.offset_left=-(that.length.length)*that.width;
  });
  this.nowIndex=this.img.length-1;
  return
 }else{
  if(!this.animateFlag){
  this.animateFlag=true;
  clearInterval(this.timer);
  this.offset_left=-(this.nowIndex*this.width);
  }
  this.animate(-(this.nowIndex+1)*this.width,-(this.nowIndex*this.width));
 }
 this.nowIndex-=1;
 },
 startInterval(){
 this.timerAuto=setInterval(this.next,2000);
 },
 endInterval(){
// console.log("leave");
 clearInterval(this.timerAuto);
 },
 next(){
 if(this.nowIndex===this.length.length-1){
  if(!this.animateFlag){
  this.animateFlag=true;
  clearInterval(this.timer);
  this.offset_left=-this.width;
  }
  this.animate(-(this.length.length)*this.width,-(this.length.length+1)*this.width,function (that) {
  that.offset_left=-that.width;
  });
  this.nowIndex=0;
  return
 }else{
  if(!this.animateFlag){
  this.animateFlag=true;
  clearInterval(this.timer);
  this.offset_left=-(this.nowIndex+2)*this.width;
  }
  this.animate(-(this.nowIndex+1)*this.width,-(this.nowIndex+2)*this.width);
  this.nowIndex+=1;
 }
 },
 animate(start,end,fuc){
 var distance=end-start;
 var pre_dis=distance/50;
 var that=this;
 this.timer=setInterval(function () {
  that.animateFlag=false;
  if(Math.abs(end-that.offset_left)<=Math.abs(pre_dis)){
  that.offset_left=end;
  if(fuc){
  fuc(that);
  }
  that.animateFlag=true;
  clearInterval(that.timer);
  that.timer=null;
  return
  }
  that.offset_left+=pre_dis;
 },1);
 },
 changeIndex(index){
 clearInterval(this.timer);
 this.animate(-(this.nowIndex+1)*this.width,-(index+1)*this.width);
 this.nowIndex=index;
 }
 }
 }
</script>


<style scoped>
 *{
 margin: 0;
 list-style: none;
 /*height: 0;*/
 }
 .box{
 position: relative;
 }
 .container{
 width: 460px;
 height: 250px;
 margin: 0 auto;
 border: 1px solid #3bb4f2;
 overflow: hidden;
 left: 0;
 top: 0;
 position: absolute;
 }

 .slider-wrap{
 /*width: 2760px;*/
 /*height: 250px;*/
 position: absolute;
 /*left: -460px;*/
 /*overflow: hidden;*/
 top: 0;
 }

 .transition{
 transition: 0.5s;
 }

 .img{
 width: 460px;
 height: 250px;
 float: left;
 display: inline;
 }

 img{
 width: 460px;
 height: 250px;
 /*float: left;*/
 }

 .click{
 width: 20px;
 background-color: rgba(255,255,255,.3);
 color: aliceblue;
 font-weight: bold;
 position: absolute;
 height: 40px;
 line-height: 40px;
 margin-top: -20px;
 top: 50%;
 cursor: pointer;
 }

 .pre{
 left: 0;
 }
 .next{
 right: 0;
 }
.bottom{
 position: absolute;
 bottom: 0;
 width: 100%;
 height: 20px;
 text-align: center;
}

 .pointContainer{
 height: 20px;
 }

 .point{
 display: inline-block;
 border: 5px solid #eeeeee;
 border-radius: 5px;
 line-height: 0;
 margin-right: 3px;
 }

 .active{
 border: 5px solid #42b983;
 }

</style>

Ce qui précède représente l'intégralité du contenu de cet article. J'espère qu'il sera utile à l'étude de tout le monde. Plus Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois !

Recommandations associées :

Méthode d'encapsulation de graphique carrousel 3D VUE

Analyse de deux données de simulation dans la méthode vue-cli

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!