Vue 간단 한 다 중 스크롤"탄막"효과 구현

효과 보기:
 
임의의 줄 수의 정시 스크롤 효 과 를 실현 하고 중복 탭 을 사용 하지 않 으 며,보 여 주 는 개수 에 따라 부족 여 부 를 판단 하고,보 여 주 는 개수 에 해당 하 는 중복 항목 을 추가 하여 이 루어 집 니 다.
Vue 의 프 리 젠 테 이 션 코드 는 다음 과 같 습 니 다.

<template>
 <div class="demo-comment-container">
 <div
  class="scroll-container"
  :style="{height: `${height/100}rem`}"
 >
  <ul
  class="scroll-ul"
  :style="{transform: `translate3d(0, ${y/100}rem, 0)`, transition: `${transition}`}"
  >
  <div
   v-for="(item, index) in list"
   :key="index"
   v-bind="baseStyle.style"
   :bgColor="baseStyle.style.bgColor__bg"
   :style="{ color: rgba(baseStyle.color__nf) }"
   :class="['c-item-bg', 'c-item', !item.content && 'empty']"
  >
   <li
   class="c-item"
   >
   <div class="avatar">
    <img
    v-if="item.content"
    class="avatar-item"
    :src="item.photo"
    >
   </div>
   <div
    v-if="item.content"
    class="c-content"
    v-html="item.content"
   />
   </li>
  </div>
  </ul>
 </div>
 <div class="comment-entry">
  <div class="f">
  <div class="text-c">
   <span
   v-if="entry.type === 1"
   class="text"
   v-text="entry.text"
   />
   <div
   v-else
   class="img-container"
   >
   <img :src="entry.image">
   </div>
   <i
   v-if="count"
   class="c-c"
   >{{ count }}</i>
  </div>
  <div>
   <span class="fake-input">        ~</span>
  </div>
  </div>
 </div>
 </div>
</template>

<script>
export default {
 inject: ['rgba'],
 props: {
 urlConfig: {
  type: Object,
  default: function () {
  return {}
  }
 },
 type: {
  type: String,
  default: 'hot'
 },
 pageSize: {
  type: Number,
  default: 50
 },
 open: {
  type: Boolean,
  default: true
 },
 entry: {
  type: Object,
  default: function () {
  return {
   type: 1, // 1    2    
   text: '',
   image: ''
  }
  }
 },
 number: {
  type: Number,
  default: 2
 },
 },
 data () {
 return {
  count: 2334,
  dom: null,
  height: 0, //     
  y: 0, //       
  list: [], //     
  originLength: 0, //       
  transition: 'ease all .4s',
  round: 0 //        
 }
 },
 created () {
 this.getCommentList()
 },
 mounted () {
 this.dom = document.querySelector('.c-item')
 //         
 this.height = 64 * this.number + (12 * (this.number - 1))
 },
 methods: {
 getCommentList () {
  //     
  const _list = []
  this.originLength = _list.length
  const mod = this.originLength % this.number
  let need = this.originLength < this.number ? (this.number - this.originLength) : mod > 0 ? this.number - mod : 0 //              
  this.list = _list

  // set empty item
  const empty = JSON.parse(JSON.stringify(_list[0]))
  empty.content = ''

  //       
  while (need) {
  this.list.push(empty)
  need--
  }

  //       
  let repeat = this.number
  let index = 0
  while (repeat) {
  this.list.push(_list[index])
  index++
  repeat--
  }

  this.round = this.list.length / this.number

  this.scroll()
 },
 scroll () {
  let count = 1
  setInterval(() => {
  count++
  this.y -= this.height + 12 //          +      item   margin-bottom
  this.transition = '.4s ease all'
  setTimeout(() => {
   if (count === this.round) {
   count = 1
   this.transition = ''
   this.y = 0
   }
  }, 800)
  }, 2000)
 }
 }
}
</script>

총결산
위 에서 말 한 것 은 편집장 님 께 서 소개 해 주신 Vue 가 간단 하고 여러 줄 로'탄막'을 구 르 는 것 입 니 다.여러분 께 도움 이 되 셨 으 면 좋 겠 습 니 다.궁금 한 점 이 있 으 시 면 메 시 지 를 남 겨 주세요.편집장 님 께 서 바로 답 해 드 리 겠 습 니 다.여기 서도 저희 사이트 에 대한 여러분 의 지지 에 감 사 드 립 니 다!
만약 당신 이 본문 이 당신 에 게 도움 이 된다 고 생각한다 면,전 재 를 환영 합 니 다.번 거 로 우 시 겠 지만 출처 를 밝 혀 주 십시오.감사합니다!