vue를 사용하여 이미지 스크롤을 구현하는 방법은 무엇입니까?

아래에서는 Vue에서 이미지 스크롤을 구현하기 위한 샘플 코드(회전문 효과와 유사)를 공유하겠습니다. 이는 좋은 참고 가치가 있으며 모든 사람에게 도움이 되기를 바랍니다.

지난번에 간단한 그림 캐러셀을 작성했는데, 이는 위의 몇 가지 개선 사항과 동일합니다. 이미지를 스크롤하는 것 외에도 이 구성 요소는 스크롤할 콘텐츠의 레이블을 삽입할 수도 있습니다. 슬롯으로 캡슐화됩니다.

부모:

<template>
 <p id="app">
  <er-carousel-index :typeNumber=2 :pageNumber=3 :timeSpace=2 :duration=2 :isOrNotCircle="true" url="/src/js/index.json" :isOrNotButton=false>
   <template scope="props">-----使用子组件传过来的值，封装slot
    <p class="articleList-box-photo ">
     <p class="tu imageEffectsAnimate imageEffects_Magnifier">
      <a>
       <img class="minMax" :src="props.item.img">
      </a>
     </p>
    </p>
    <p class="articleList-box-title">
     <p class="title">
      <a class="textleft">{{props.item.title}}</a>
     </p>
    </p>
   </template>
  </er-carousel-index>
 </p>
</template>
<script>
 import ErCarouselIndex from &#39;./components/carouselIndex/src/carouselIndex.vue&#39;
 export default {
  name: &#39;app&#39;,
  data() {
   }
    },
  components: {
   ErCarouselIndex//一定要进行组件声明，不然不能引用子组件
  }
 }
</script>

하위 구성 요소:

<template>
 <p tag="p" class="articleList articleListMod-3 er-carouseindex" name="slide-fade" id="articleList" :style="{height:imgHeight+&#39;px&#39;}" >
  <span id="btn1" class="er-carouseindex-left" @mousedown="imgMove(&#39;mouseLeft&#39;)" @mouseup="cancelMove(&#39;left&#39;)" v-show="isOrNotButton"></span>
  <span id="btn2" class="er-carouseindex-right" @mousedown="imgMove(&#39;mouseRight&#39;)" @mouseup="cancelMove(&#39;right&#39;)" v-show="isOrNotButton"></span>
  <p id="packageAll" class="er-carouseindex-con" @mouseover="clearAuto" @mouseout="slideAuto">
   <p class="er-carouseindex-bar" v-show="isOrNotCircle">
    <p v-for="(item,dex) in imgList" @mouseup="clearAuto" class="er-carouseindex-circle" @click="circleClick(dex)" :class="{circleSelected:dex===indexCircle}">
    </p>
   </p>
   <p id="imageAll" class="er-carouseindex-item" :style="{transform:translateX,transition:transFlag?transitionTime:&#39;&#39;}">
    <p class="articleList-box er-carouseindex-box" v-for="(list,index) in imgLisShow" :style="{width:imgWidth+&#39;%&#39;}"
      style="max-height:50%;">
     <slot :item="list"></slot>
    </p>
   </p>
  </p>
 </p>
</template>
<script>
 export default
 {
  name: "ErCarouselIndex",
  data(){
   return {
    imgList: [],//请求接口数据
    imgLisShow: [],//图片滚动数据，包括左中右三种
    timer: null,//自动循环滚动时的间隔时间
    timeout:null,//长按时的图片滚动间隔时间
    index:0,//图片索引
    translateXnum:0,//图片滚动时的偏移量
    translateX:"",//生成图片偏移时的表达式
    imgWidth:"",//图片所占宽度
    timeDown:"",//鼠标刚按下时的时间
    timeup:"",//鼠标松开时的时间
    clickSpace:"",//鼠标按下松开的时间间隙
    transFlag:true,//是否匀速滚动,
    transitionTime:"",
    indexCircle:0//小圆圈滚动索引
   }
  },
  props:{
   duration:0,//图片延时滚动
   typeNumber:0, //每次滚动几张
   timeSpace:0, //图片滚动时间间隔
   url:String,//请求接口地址
   pageNumber:0,//当前页面显示几张图片
   isOrNotButton:true,//是否显示左右按钮
   isOrNotCircle:true,//是否显示小圆圈
   imgHeight:""//图片滚动显示高度
  },
  watch:{
   index:{
    handler(){
     var _this=this;
     if(Math.abs(this.index)==this.imgList.length){
      this.indexCircle=0;
      setTimeout(function(){
       _this.reset();
      },_this.duration*1000*0.98);
     }else{
      this.indexCircle=this.index;
     }
     this.calcXnum();
     }
   },
   translateXnum:{
    handler(){
     this.translateX="translateX("+this.translateXnum+"%)";
    }
   }
  },
  methods:{
   //页面初始化复赋值
   imgView:function() {
    var _this = this;
    _this.$http.get(_this.url).then(function (res) {
     _this.imgList = res.data.imgList;
     for(var i=0;i<3;i++){
      _this.imgList.forEach(function (item, index) {
       _this.imgLisShow.push(item);
      });
     }
     _this.reset();
     _this.slideAuto();
     _this.imgWidth=(100/_this.pageNumber)-1;
     _this.transitionTime="all "+_this.duration*0.98+"s linear";
     console.log(_this.transitionTime);
    });
   },
   //图片滚动方法(长按)
   imgMove:function(direct){
    var _this = this;
    _this.timeDown=new Date();//记录按下的时间
    _this.timeout = setInterval(function() {
     if(direct=="mouseLeft") {
      _this.leftMove();
     }else{
      _this.rightMove();
     }
    },300);
   },
   //鼠标送开时执行的方法
   cancelMove:function(direct){
    var _this = this;
    _this.clearAuto();
    this.timeup=new Date();//记录松开的时间
    this.clickSpace=this.timeup.getTime() - this.timeDown.getTime();
    //时间间隔小于500毫秒为点击，反之为长按
    if(this.clickSpace<500){
     for(var i=0;i<_this.typeNumber;i++){
      if(direct=="left"){
       _this.leftMove();
      }else{
       _this.rightMove();
      }
     }
    }
    if (this.timeout) {
     clearInterval(this.timeout);
     this.timeout = null;
    }
   },
   //向左移动
   leftMove:function(){
    this.index--;
    this.transFlag=true;
   },
   //向右移动
   rightMove:function(){
    this.transFlag=true;
    this.index++;
   },
   slideAuto:function () {
    var _this = this;
    _this.timer = setTimeout(function () {
     if(Math.abs(_this.index)!==_this.imgList.length){
      _this.rightMove();
      _this.slideAuto();
     }
    }, _this.timeSpace * 1000);
   },
   clearAuto:function () {
    console.log("停止");
    if (this.timer) {
     clearInterval(this.timer);
     this.timer = null;
    }
   },
   //重置
   reset:function(){
    this.index=0;
    this.transFlag=false;
    this.calcXnum();
   },
   calcXnum:function(){
    var _this=this;
    this.translateXnum=-(this.index+this.imgList.length)*(100/this.pageNumber);
   },
   //点击圆圈跳转图片
   circleClick:function(dex){
    this.index=dex;
    this.clearAuto();
   }
  },
  mounted()
  {
   this.$nextTick(function () {
    this.imgView();
   });
  }
 }
</script>

이 구성 요소는 상대적으로 기능이 완전합니다. 사용자는 현재 페이지에 필요한 횟수를 제어할 수 있습니다. 될 그림, 그림 스크롤 시간 간격, 왼쪽 및 오른쪽 클릭 버튼 표시 여부 등을 전달하여 표시됩니다. 자세한 매개 변수는 설명이 있는 소품을 볼 수 있습니다.

위 내용은 제가 여러분을 위해 정리한 내용입니다. 앞으로 도움이 되길 바랍니다.

관련 글:

기본 로그 컴포넌트 morgan 표현 방법

React Native 플로팅 버튼 컴포넌트 샘플 코드

Nuxt.js를 기반으로 서버 측 렌더링을 구현하는 Vue에 대한 자세한 설명

위 내용은 vue를 사용하여 이미지 스크롤을 구현하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!