Heim Web-Frontend H5-Tutorial Vue implementiert den Bildlaufeffekt

Vue implementiert den Bildlaufeffekt

Mar 27, 2018 pm 04:51 PM
图片 效果 滚动

Dieses Mal zeige ich Ihnen, wie Vue den Bildlaufeffekt implementiert. Was sind die Vorsichtsmaßnahmen für die Implementierung des Bildlaufeffekts?

Als ich das letzte Mal ein einfaches Bildkarussell geschrieben habe, entspricht dies einigen Verbesserungen gegenüber dem oben Gesagten. Zusätzlich zum Scrollen von Bildern kann diese Komponente auch Beschriftungen beliebiger Inhalte zum Scrollen einbetten. Sie ist mit Slots gekapselt.

Übergeordnetes Element:

<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 './components/carouselIndex/src/carouselIndex.vue'
 export default {
  name: 'app',
  data() {
   }
    },
  components: {
   ErCarouselIndex//一定要进行组件声明,不然不能引用子组件
  }
 }
</script>
Nach dem Login kopieren

Untergeordnete Komponente:

<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>
Nach dem Login kopieren
Die Funktion dieser Komponente ist relativ vollständig. Benutzer können Parameter übergeben, um zu steuern, wie viele Bilder auf der aktuellen Seite angezeigt werden sollen, wie lange das Bild läuft, ob Links- und Rechtsklick-Schaltflächen angezeigt werden sollen usw. Detaillierte Parameter finden Sie unter Sie können Requisiten ansehen, bei denen es sich allesamt um

Kommentare handelt.

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website.

Empfohlene Lektüre:

Webseitige Anwendung implementiert Back-Force-Aktualisierung

Detaillierte Erläuterung der benutzerdefinierten Anweisungen von Vue.directive

Das obige ist der detaillierte Inhalt vonVue implementiert den Bildlaufeffekt. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Heiße KI -Werkzeuge

Undresser.AI Undress

Undresser.AI Undress

KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover

AI Clothes Remover

Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Undress AI Tool

Undress AI Tool

Ausziehbilder kostenlos

Clothoff.io

Clothoff.io

KI-Kleiderentferner

AI Hentai Generator

AI Hentai Generator

Erstellen Sie kostenlos Ai Hentai.

Heißer Artikel

R.E.P.O. Energiekristalle erklärten und was sie tun (gelber Kristall)
2 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌
Repo: Wie man Teamkollegen wiederbelebt
4 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Abenteuer: Wie man riesige Samen bekommt
4 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌

Heiße Werkzeuge

Notepad++7.3.1

Notepad++7.3.1

Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version

SublimeText3 chinesische Version

Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1

Senden Sie Studio 13.0.1

Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6

Dreamweaver CS6

Visuelle Webentwicklungstools

SublimeText3 Mac-Version

SublimeText3 Mac-Version

Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

Benutzer stoßen auf seltene Störungen: Bei Samsung Watch-Smartwatches treten plötzlich Probleme mit dem weißen Bildschirm auf Benutzer stoßen auf seltene Störungen: Bei Samsung Watch-Smartwatches treten plötzlich Probleme mit dem weißen Bildschirm auf Apr 03, 2024 am 08:13 AM

Möglicherweise sind Sie schon einmal auf das Problem gestoßen, dass auf dem Bildschirm Ihres Smartphones grüne Linien erscheinen. Auch wenn Sie es noch nie gesehen haben, müssen Sie entsprechende Bilder im Internet gesehen haben. Haben Sie schon einmal erlebt, dass der Bildschirm einer Smartwatch weiß wird? Am 2. April erfuhr CNMO aus ausländischen Medien, dass ein Reddit-Benutzer ein Bild auf der sozialen Plattform geteilt hatte, auf dem zu sehen war, wie der Bildschirm der Smartwatches der Samsung Watch-Serie weiß wurde. Der Benutzer schrieb: „Ich war gerade dabei, aufzuladen, und als ich zurückkam, war es so. Ich habe versucht, neu zu starten, aber der Bildschirm der Samsung Watch wurde beim Neustart immer noch weiß.“ Der Reddit-Benutzer hat das Smartwatch-spezifische Modell nicht angegeben. Dem Bild nach zu urteilen dürfte es sich jedoch um eine Samsung Watch5 handeln. Zuvor hatte sich auch ein anderer Reddit-Benutzer gemeldet

Wie kann das Problem des automatischen Speicherns von Bildern beim Veröffentlichen auf Xiaohongshu gelöst werden? Wo ist das beim Posten automatisch gespeicherte Bild? Wie kann das Problem des automatischen Speicherns von Bildern beim Veröffentlichen auf Xiaohongshu gelöst werden? Wo ist das beim Posten automatisch gespeicherte Bild? Mar 22, 2024 am 08:06 AM

Durch die kontinuierliche Entwicklung der sozialen Medien ist Xiaohongshu zu einer Plattform für immer mehr junge Menschen geworden, auf der sie ihr Leben teilen und schöne Dinge entdecken können. Viele Benutzer haben beim Posten von Bildern Probleme mit der automatischen Speicherung. Wie kann man dieses Problem lösen? 1. Wie kann das Problem des automatischen Speicherns von Bildern beim Veröffentlichen auf Xiaohongshu gelöst werden? 1. Cache leeren Zuerst können wir versuchen, die Cache-Daten von Xiaohongshu zu löschen. Die Schritte sind wie folgt: (1) Öffnen Sie Xiaohongshu und klicken Sie auf die Schaltfläche „Mein“ in der unteren rechten Ecke. (2) Suchen Sie auf der persönlichen Center-Seite nach „Einstellungen“ und klicken Sie darauf. (3) Scrollen Sie nach unten und suchen Sie nach „; Option „Cache löschen“. Klicken Sie auf „OK“. Nachdem Sie den Cache geleert haben, geben Sie Xiaohongshu erneut ein und versuchen Sie, Bilder zu posten, um zu sehen, ob das Problem mit dem automatischen Speichern behoben ist. 2. Aktualisieren Sie die Xiaohongshu-Version, um sicherzustellen, dass Ihr Xiaohongshu

Wie poste ich Bilder in TikTok-Kommentaren? Wo ist der Zugang zu den Bildern im Kommentarbereich? Wie poste ich Bilder in TikTok-Kommentaren? Wo ist der Zugang zu den Bildern im Kommentarbereich? Mar 21, 2024 pm 09:12 PM

Mit der Beliebtheit von Douyin-Kurzvideos sind die Benutzerinteraktionen im Kommentarbereich bunter geworden. Einige Benutzer möchten Bilder in Kommentaren teilen, um ihre Meinung oder Gefühle besser auszudrücken. Wie postet man also Bilder in TikTok-Kommentaren? Dieser Artikel beantwortet diese Frage ausführlich und gibt Ihnen einige entsprechende Tipps und Vorsichtsmaßnahmen. 1. Wie poste ich Bilder in Douyin-Kommentaren? 1. Öffnen Sie Douyin: Zuerst müssen Sie die Douyin-App öffnen und sich bei Ihrem Konto anmelden. 2. Suchen Sie den Kommentarbereich: Suchen Sie beim Durchsuchen oder Posten eines kurzen Videos die Stelle, an der Sie einen Kommentar abgeben möchten, und klicken Sie auf die Schaltfläche „Kommentieren“. 3. Geben Sie Ihren Kommentarinhalt ein: Geben Sie Ihren Kommentarinhalt in den Kommentarbereich ein. 4. Wählen Sie, ob Sie ein Bild senden möchten: In der Benutzeroberfläche zur Eingabe von Kommentarinhalten sehen Sie eine Schaltfläche „Bild“ oder eine Schaltfläche „+“. Klicken Sie darauf

6 Möglichkeiten, Bilder auf dem iPhone schärfer zu machen 6 Möglichkeiten, Bilder auf dem iPhone schärfer zu machen Mar 04, 2024 pm 06:25 PM

Die neuesten iPhones von Apple halten Erinnerungen mit gestochen scharfen Details, Sättigung und Helligkeit fest. Manchmal kann es jedoch zu Problemen kommen, die dazu führen können, dass das Bild weniger klar aussieht. Während der Autofokus bei iPhone-Kameras große Fortschritte gemacht hat und es Ihnen ermöglicht, schnell Fotos aufzunehmen, kann die Kamera in bestimmten Situationen versehentlich auf das falsche Motiv fokussieren, wodurch das Foto in unerwünschten Bereichen unscharf wird. Wenn Ihre Fotos auf Ihrem iPhone unscharf wirken oder es ihnen insgesamt an Schärfe mangelt, soll Ihnen der folgende Beitrag dabei helfen, sie schärfer zu machen. So machen Sie Bilder auf dem iPhone klarer [6 Methoden] Sie können versuchen, Ihre Fotos mit der nativen Foto-App zu bereinigen. Wenn Sie mehr Funktionen und Optionen wünschen

So lassen Sie PPT-Bilder einzeln erscheinen So lassen Sie PPT-Bilder einzeln erscheinen Mar 25, 2024 pm 04:00 PM

In PowerPoint ist es eine gängige Technik, Bilder einzeln anzuzeigen, was durch das Festlegen von Animationseffekten erreicht werden kann. In dieser Anleitung werden die Schritte zur Implementierung dieser Technik detailliert beschrieben, einschließlich der grundlegenden Einrichtung, des Einfügens von Bildern, des Hinzufügens von Animationen sowie des Anpassens der Reihenfolge und des Timings der Animationen. Darüber hinaus stehen erweiterte Einstellungen und Anpassungen zur Verfügung, z. B. die Verwendung von Triggern, das Anpassen von Animationsgeschwindigkeit und -reihenfolge sowie die Vorschau von Animationseffekten. Durch Befolgen dieser Schritte und Tipps können Benutzer ganz einfach Bilder so einrichten, dass sie in PowerPoint nacheinander angezeigt werden, wodurch die visuelle Wirkung der Präsentation verbessert und die Aufmerksamkeit des Publikums erregt wird.

So konvertieren Sie PDF-Dokumente mit Foxit PDF Reader in JPG-Bilder. - So konvertieren Sie PDF-Dokumente mit Foxit PDF Reader in JPG-Bilder So konvertieren Sie PDF-Dokumente mit Foxit PDF Reader in JPG-Bilder. - So konvertieren Sie PDF-Dokumente mit Foxit PDF Reader in JPG-Bilder Mar 04, 2024 pm 05:49 PM

Verwenden Sie auch die Foxit PDF Reader-Software? Wissen Sie, wie Foxit PDF Reader PDF-Dokumente in JPG-Bilder konvertiert? Für diejenigen, die sich für die Konvertierungsmethode interessieren jpg-Bilder, kommen Sie bitte vorbei und schauen Sie sich unten um. Starten Sie zunächst Foxit PDF Reader, suchen Sie dann in der oberen Symbolleiste nach „Funktionen“ und wählen Sie dann die Funktion „PDF an andere“ aus. Öffnen Sie als Nächstes eine Webseite namens „Foxit PDF Online Conversion“. Klicken Sie auf die Schaltfläche „Anmelden“ oben rechts auf der Seite, um sich anzumelden, und aktivieren Sie dann die Funktion „PDF zu Bild“. Klicken Sie dann auf die Schaltfläche „Hochladen“ und fügen Sie die PDF-Datei hinzu, die Sie in ein Bild konvertieren möchten. Klicken Sie nach dem Hinzufügen auf „Konvertierung starten“.

So ordnen Sie zwei Bilder nebeneinander in einem WPS-Dokument an So ordnen Sie zwei Bilder nebeneinander in einem WPS-Dokument an Mar 20, 2024 pm 04:00 PM

Bei der Verwendung der WPS-Bürosoftware haben wir festgestellt, dass nicht nur ein Formular verwendet wird, sondern Tabellen und Bilder zum Text hinzugefügt werden können, auch Bilder zur Tabelle usw. hinzugefügt werden können. Diese werden alle zusammen verwendet, um den Inhalt des gesamten Dokuments zu erstellen sehen reichhaltiger aus, wenn Sie zwei Bilder in das Dokument einfügen müssen und diese nebeneinander angeordnet werden müssen. Unser nächster Kurs kann dieses Problem lösen: wie man zwei Bilder nebeneinander in einem WPS-Dokument platziert. 1. Zuerst müssen Sie die WPS-Software öffnen und das Bild finden, das Sie anpassen möchten. Klicken Sie mit der linken Maustaste auf das Bild und eine Menüleiste wird angezeigt. Wählen Sie „Seitenlayout“. 2. Wählen Sie beim Textumbruch „Enger Umbruch“ aus. 3. Nachdem bestätigt wurde, dass bei allen benötigten Bildern „Enger Textumbruch“ eingestellt ist, können Sie die Bilder an die entsprechende Position ziehen und auf das erste Bild klicken.

Was soll ich tun, wenn die Bilder auf der Webseite nicht geladen werden können? 6 Lösungen Was soll ich tun, wenn die Bilder auf der Webseite nicht geladen werden können? 6 Lösungen Mar 15, 2024 am 10:30 AM

Einige Internetnutzer stellten fest, dass die Bilder auf der Webseite beim Öffnen der Browser-Webseite längere Zeit nicht geladen werden konnten. Was ist passiert? Ich habe überprüft, ob das Netzwerk normal ist. Was ist also das Problem? Der folgende Editor stellt Ihnen sechs Lösungen für das Problem vor, dass Webseitenbilder nicht geladen werden können. Webseitenbilder können nicht geladen werden: 1. Internetgeschwindigkeitsproblem Die Webseite kann keine Bilder anzeigen. Dies kann daran liegen, dass die Internetgeschwindigkeit des Computers relativ langsam ist und mehr Software auf dem Computer geöffnet ist. Und die Bilder, auf die wir zugreifen, sind relativ groß Möglicherweise liegt eine Zeitüberschreitung beim Laden vor. Daher kann die Software, die mehr Netzwerkgeschwindigkeit verbraucht, nicht angezeigt werden. 2. Wenn auf der Webseite keine Bilder angezeigt werden können, liegt das möglicherweise daran, dass die von uns besuchten Webseiten gleichzeitig besucht wurden.

See all articles