Vue-Implementierung des Tutorials zum Animationscode zum Laden von Seiten

Wenn die Daten nicht angezeigt werden, wird auf der Seite eine Meldung angezeigt. Wie kann dieser Effekt im Detail vorgestellt werden? Die Vue-Seite scheint zu laden. Interessierte Freunde können darauf verweisen.

Bitte schauen Sie sich den Code unten an

<template>
 <section class="page" v-if="option" 
  :style="{background: option.background,color: option.color||&#39;#fff&#39;}"  
  :class="{&#39;page-before&#39;: option.index < currentPage,
    &#39;page-after&#39;: option.index > currentPage,
    &#39;page-current&#39;: option.index === currentPage}">
  <p :class="{&#39;all-center&#39;: option.isCenter}">
   <slot></slot>
  </p>
 </section>
 <section class="page" v-else>页面正在渲染中。。。</section>
</template>

Glauben Sie, dass es sehr einfach ist?
Hier sind einige Tipps, um den Animationseffekt zu erzielen der Seite

<template>
 <nav class="controller">
  <button v-if="option.arrowsType" class="prev-btn" :class="{moving:option.arrowsType === &#39;animate&#39;}" @click="changePage(prevIndex)"></button>
  <ul v-if="option.navbar">
   <li v-for="index in pageNum" @click="changePage(index)" :class="{current:option.highlight && index === currentPage}" :key="&#39;controller-&#39;+index" :data-index="index" class="controller-item"></li>
  </ul>
  <button v-if="option.arrowsType" class="next-btn" :class="{moving:option.arrowsType === &#39;animate&#39;}" @click="changePage(nextIndex)"></button>
 </nav>
</template>

<script>
export default {
 name: &#39;page-controller&#39;,
 props: {
 pageNum: Number,
 currentPage: Number,
 option: {
  type: Object,
  default: {
  arrowsType: &#39;animate&#39;,
  navbar: true,
  highlight: true,
  loop: true  //是否开启滚动循环
  }
 }
 },
 methods: {
 changePage (index) {
  this.$emit(&#39;changePage&#39;, index);
 }
 },
 computed: {
 nextIndex () {
  if (this.currentPage === this.pageNum) {
  if(this.option.loop){
   return 1
   }else{
   return this.pageNum
   }
  } else {
  return this.currentPage + 1;
  }
 },
 prevIndex () {
  if (this.currentPage === 1) {
  if(this.option.loop){
   return this.pageNum
   }else{
   return 1
   }
  } else {
  return this.currentPage - 1;
  }
 }
 },
 created () {
 if (this.option.navbar === undefined) {
  this.option.navbar = true;
 }
 },
 mounted () {
 let _this = this;
 let timer = null;
 let start = 0;
 // 滚轮处理
 function scrollHandler (direction) {
  // 防止重复触发滚动事件
  if (timer != null) {
  return;
  }
  if (direction === &#39;down&#39;) {
  _this.changePage(_this.nextIndex);
  } else {
  _this.changePage(_this.prevIndex);
  }
  timer = setTimeout(function() {
  clearTimeout(timer);
  timer = null;
  }, 300);
 }
 // if (Object.hasOwnProperty.call(window,&#39;onmousewheel&#39;)) {
 if (Object.hasOwnProperty.call(window,&#39;onmousewheel&#39;)) {
  // 监听滚轮事件
  window.addEventListener(&#39;mousewheel&#39;,function (event) { // IE/Opera/Chrome
  let direction = event.wheelDelta > 0 ? &#39;up&#39;:&#39;down&#39;;
  scrollHandler(direction);
  },false);
 } else {
  window.addEventListener(&#39;DOMMouseScroll&#39;,function (event) { // Firefox
  let direction = event.detail > 0 ? &#39;up&#39;:&#39;down&#39;;
  scrollHandler(direction);
  },false);
 }
 // 移动端触摸事件处理
 window.addEventListener(&#39;touchstart&#39;, function (event) {
  start = event.touches[0].clientY;
 })
 window.addEventListener(&#39;touchmove&#39;, function (event) {
  event.preventDefault();
 })
 window.addEventListener(&#39;touchend&#39;, function (event) {
  let spacing = event.changedTouches[0].clientY - start;
  let direction;  
  if (spacing > 50) {
  direction = &#39;up&#39;;
  scrollHandler(direction);
  } else if (spacing < -50) {
  direction = &#39;down&#39;;
  scrollHandler(direction);
  }
 })
 }
}
</script>

<style scoped>
.controller {
 position: fixed;
 right: 20px;
 top: 50%;
 z-index: 99;
}
.controller ul {
 transform: translate3d(0,-50%,0);
 list-style: none;
 margin: 0;
 padding: 0;
}
.controller-item {
 cursor: pointer;
 width: 20px;
 height: 20px;
 border-radius: 50%;
 margin-top: 10px;
 background-color: rgba(255, 255, 255, 0.3);
 transition: background-color 0.3s ease 0s;
}
.controller-item:hover {
 background-color: rgba(255, 255, 255, 0.7);
}
.controller-item.current {
 background-color: rgba(255, 255, 255, 1);
}
.prev-btn,.next-btn {
 cursor: pointer;
 display: block;
 text-align: center;
 width: 20px;
 height: 20px;
 position: fixed;
 left: 50%;
 margin-left: -10px;
 border: 4px solid #fff;
 background-color: transparent;
 outline: none;
}
.prev-btn {
 top: 80px;
 transform: rotate(-45deg);
 border-bottom-color: transparent;
 border-left-color: transparent;
}
.next-btn {
 bottom: 80px;
 transform: rotate(45deg);
 border-top-color: transparent;
 border-left-color: transparent;
}
.prev-btn.moving {
 animation: prev-up-down 0.7s linear 0s infinite;
}
.next-btn.moving {
 animation: next-up-down 0.7s linear 0s infinite;
}
@keyframes next-up-down {
 0% {
 transform: translate3d(0,0,0) rotate(45deg);
 }
 25% {
 transform: translate3d(0,6px,0) rotate(45deg);
 }
 50% {
 transform: translate3d(0,0,0) rotate(45deg);
 }
 75% {
 transform: translate3d(0,-6px,0) rotate(45deg);
 }
 100% {
 transform: translate3d(0,0,0) rotate(45deg);
 }
}
@keyframes prev-up-down {
 0% {
 transform: translate3d(0,0,0) rotate(-45deg);
 }
 25% {
 transform: translate3d(0,-6px,0) rotate(-45deg);
 }
 50% {
 transform: translate3d(0,0,0) rotate(-45deg);
 }
 75% {
 transform: translate3d(0,6px,0) rotate(-45deg);
 }
 100% {
 transform: translate3d(0,0,0) rotate(-45deg);
 }
}
</style>

Verwandte Empfehlungen:

Ereignisse und Sequenzen, die beim Laden der Seite ausgelöst werden

Einfache Berechnung der Seitenladezeit in PHP

Einführung in die Beschleunigung des Ladens von HTML-Seiten

Das obige ist der detaillierte Inhalt vonVue-Implementierung des Tutorials zum Animationscode zum Laden von Seiten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!