집 >웹 프론트엔드 >JS 튜토리얼 >vue.js 캐러셀 구성요소 사용 방법 정보

vue.js 캐러셀 구성요소 사용 방법 정보

不言원래의: 2018-07-03 17:45:241760검색

이 글에서는 주로 vue.js 캐러셀 컴포넌트의 사용법을 자세하게 소개하고 있는데, 관심 있는 친구들은 이전에 jQuery로 작성한

🎜🎜#을 참고하시면 됩니다. 이미지 슬라이딩 효과는 jquery 애니메이션을 사용하여 달성됩니다. 이 컴포넌트의 슬라이딩 효과는 네이티브 js와 vue의 데이터 바인딩으로 구현됩니다. 다른 라이브러리에 의존하지 않습니다. vue.js에 swiper를 도입할 수 있지만 클래스 라이브러리 도입의 가장 큰 단점은 중복되는 코드가 너무 많다는 것입니다. 그래서 직접 작성하는 것이 더 좋고 간단하고 간결하게 작성하는 것이 좋습니다. (PS: 컴포넌트의 너비와 높이 설정에는 아직 작은 버그가 있습니다. 하위 컴포넌트에서는 js를 사용하여 컨테이너의 너비와 높이를 동적으로 수정해야 합니다. 또한, 다른 곳에서 비판하고 바로잡아도 좋습니다.)

github 주소:

git@github.com:cainiao222/vueslider-comComponents.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 중국어 홈페이지를 주목해주세요!

vue.js 캐러셀 구성요소 사용 방법 정보

관련 기사