vue를 사용하여 단순화된 책을 모방한 캐러셀 차트의 샘플 코드 작성

이 글에서는 Vue를 이용하여 간단한 책을 흉내낸 캐러셀 차트 작성을 위한 샘플 코드를 주로 소개합니다.

1. 최종 효과를 먼저 표시합니다.

2. 솔루션

Vue의 개념은 데이터로 뷰를 구동하는 것이므로 여백 상단을 변경하여 스크롤 효과를 얻는 것을 거부합니다. 요소. CSS 스타일을 작성한 후 캐러셀 효과를 얻으려면 각 이미지의 클래스만 변경하면 됩니다. 애니메이션 효과는 전환으로 완성됩니다. 회전식 이미지는 두 개(mainSlide 및 extraSlide)로 간주할 수 있습니다. 각 이미지의 위치는 그림과 같습니다.

3. 코드 구현

각 슬라이드 스타일:

$width: 800px;   // 容器宽度
$height: 300px;   // 容器高度
$bWidth: 500px;   // 大图片宽度
$sWidth: $width - $bWidth; // 小图片宽度
$sHeight: $height / 2; // 小图片高度
#slider-wrapper{
  width: $width;
  height: $height;
  margin: 0 auto;
  cursor: pointer;
  background: #ddd;
  border-radius: 5px;
  box-shadow: 0 1px 6px rgba(0,0,0,0.117647), 0 1px 4px rgba(0,0,0,0.117647);
  display: flex;
  overflow: hidden;
  p{
    display: inline-block;
  }
}
.main-slide{
  width: $bWidth;
  height: $height;
  float: left;
  transition: all .4s ease;
}
.extra-slide{
  width: $sWidth;
  position: relative;
  .extra-slide-item{
    position: absolute;
    width: $sWidth;
    height: $sHeight;
    left: 0;
    transition: .4s ease-out;
  }
  .extra-slide-top{
    top: -$sHeight;
  }
  .extra-slide-middle-first{
    top: 0;
    z-index: 2
  }
  .extra-slide-middle-second{
    top: $sHeight;
    z-index: 2
  }
  .extra-slide-bottom{
    top: $height
  }
  .extra-slide-hide{
    display: none!important;
  }
}

템플릿에는 두 개의 캐러셀 이미지가 포함되어 있습니다.

<p id="slider-wrapper" @mouseover="stop" @mouseout="start">
  <!-- 轮播图1，mainSlide -->
  <p class="main-slide" :style="`background: url(${slideConfig[nowIndex].src})`"></p>
  <!-- 轮播图2，extraSlide -->
  <p class="extra-slide">
    <p class="extra-slide-item" :class="slideClass(i)" v-for="(v, i) in slideConfig" :key="i" :style="`background: url(${v.src}); background-size: cover`"></p>
  </p>
</p>

scripts 섹션, nowIndex 설정 및 nowIndex 정기적 변경. 이 nowIndex에 따라 모든 이미지의 클래스가 변경됩니다. 자세한 내용은 http://www.jb51.net/article/111734.htm

export default {
  name: 'slider',
  data: function() {  
    return {
      slideInterval: null,
      nowIndex: 0,
      slideLength: this.slideConfig.length
    }
  },
  props: {
    slideConfig: {
      type: Array
    }
  },
  methods: {
    // 限制index不能超出图片列表长度
    resetIndex(i) {
      return i > this.slideLength - 1 ? i - this.slideLength : i
    },
    slideClass(i) {
      let nowIndex = this.nowIndex
      // Map就是key也可以是非字符串的对象，不用Map多写几个 if else 也可以
      let map = new Map([
        [this.resetIndex(nowIndex), 'extra-slide-top'],
        [this.resetIndex(nowIndex + 1), 'extra-slide-middle-first'],
        [this.resetIndex(nowIndex + 2), 'extra-slide-middle-second'],
        [this.resetIndex(nowIndex + 3), 'extra-slide-bottom']
      ])
      // 图片的class根据nowIndex的变化而变化
      return map.get(i) ? map.get(i) : 'extra-slide-hide'
    },
    start() {
      // 定时改变nowIndex
      this.slideInterval = setInterval(() => {
        this.nowIndex = this.nowIndex > this.slideLength - 2 ? 0 : this.nowIndex + 1
        console.log(this.nowIndex)
      }, 2000)
    },
    stop() {
      clearInterval(this.slideInterval)
      this.slideInterval = null
    }
  },
  mounted() {
    this.start()
  },
  destroyed() {
    this.stop()
  }
}

slideConfig, 컴포넌트 소품을 참조하세요. :

const prefix = '/src/assets/'
const slideConfig = [{
 src: prefix + 's1.jpg',
 title: '图1',
 desc: '说明1'
}, {
 src: prefix + 's2.jpg',
 title: '图2',
 desc: '说明2'
}, {
 src: prefix + 's3.jpg',
 title: '图3',
 desc: '说明3'
}, {
 src: prefix + 's4.jpg',
 title: '图4',
 desc: '说明4'
}, {
 src: prefix + 's5.jpg',
 title: '图5',
 desc: '说明5'
}, {
 src: prefix + 's6.jpg',
 title: '图6',
 desc: '说明6'
}]
export default slideConfig

사용법:

<slider :slideConfig="slideConfig" />

위 내용은 제가 모두를 위해 정리한 내용입니다. 앞으로 모든 사람에게 도움이 되기를 바랍니다.

관련 기사:

Vue 문서에서 쉽게 간과하기 쉬운 여러 부분에 대한 자세한 분석

Vue에서 Jointjs를 사용하는 방법

Vue에서 Baidu 지도를 사용하는 간단한 방법에 대한 간략한 토론

위 내용은 vue를 사용하여 단순화된 책을 모방한 캐러셀 차트의 샘플 코드 작성의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!