vue.js カルーセルコンポーネントの使用方法について

この記事では主に vue.js カルーセル コンポーネントの使用方法を詳しく紹介します。興味のある方は参考にしてください。以前に jQuery でカルーセル コンポーネントを作成し、jquery アニメーションを実現しました。このコンポーネントのスライド効果は、他のライブラリに依存せずにネイティブ js と vue のデータ バインディングによって実現されます。ただし、クラス ライブラリを導入する最大の欠点は、冗長なコードが多すぎることです。したがって、自分で行う方が良いです。単純かつ簡潔なものを書く方が良いです。 (追記: コンポーネントの幅と高さの設定に小さなバグがまだあります。サブコンポーネントでは、コンテナの幅と高さを動的に変更するために js を使用する必要があります。また、中には無理があるかもしれません)他の場所での批判や修正は大歓迎です)

github アドレス :

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

親コンポーネント コード:

<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>

子コンポーネント コード:

<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>

以上がこの記事の全内容です。お役に立てば幸いです。その他の関連コンテンツについては、PHP 中国語 Web サイトに注目してください。

関連する推奨事項:

VUE 3D カルーセルのカプセル化実装方法

vue-cli でシミュレートされたデータを分析する 2 つの方法

以上がvue.js カルーセルコンポーネントの使用方法についての詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。