Lösung für Klickereignisfehler bei Verwendung von Better-Scroll bei der Vue-Mobilentwicklung

Vor Kurzem habe ich Vue verwendet, um das Entwickeln mobiler Projekte zu erlernen, und habe zum Scrollen das Plug-In „Better-Scroll“ verwendet.

Bei Verwendung des @click-Ereignisses in der in better-scroll eingeführten Komponente schlägt das Klickereignis fehl. v-on:click, v-bind:click und @click.native funktionieren alle. Ich habe jedoch @touchstart ausprobiert und es funktioniert. Ich habe festgestellt, dass click:true in der Konfiguration von better-scroll nicht festgelegt ist. Nachdem es festgelegt wurde, ist das Klickereignis erfolgreich.

Später, als ich vuex benutzte, berichtete ich immer wieder

[vuex] unbekannter Mutationstyp: changeCity

Mir ist gerade aufgefallen, dass ich Mutationen im Status in der Store-Datei geschrieben habe, und ich war so dumm, dass ich geweint habe. . .

Die korrekte Schreibweise lautet:

Kapselung und Verwendung von Vue Better-Scroll

Ich glaube, dass viele mobile Projekte das Plugin „Better-Scroll“ verwenden, das das Scrollen unserer Seiten weniger starr machen und uns auch die Implementierung einiger Funktionen wie Anker erleichtern kann.

Hinweis: Dieses Plugin funktioniert nur, wenn die Höhe des Inhalts, den Sie scrollen möchten, größer ist als die Höhe Ihrer übergeordneten Box

Installieren Sie zunächst dieses Plugin mit npm

npm ich scrolle besser --speichern

Als nächstes kapseln wir eine Better-Komponente, damit sie global wiederverwendet werden kann

<Vorlage>
  <div Klasse="Wrapper" ref="Wrapper" :style="{height:allHeight}">
   <Steckplatz></Steckplatz>
  </div>
</Vorlage>

<Skript>
BScroll von „better-scroll“ importieren
Standard exportieren {
  Daten() {
    zurückkehren {
      alleHöhe:''
    }
  },
  Requisiten:{
    Zum Scrollen verwenden: {
      Typ:Funktion,
      Standard:Funktion(){}
    },
    handleToTouchEnd:{
      Typ:Funktion,
      Standard:Funktion(){}
    }
  },
  Methoden: {
    handleToScrolltop(y){
      dies.scroll.scrollTo(0,y)
    }
  },
  montiert() {
    var scroll = neuer BScroll(this.$refs.wrapper,{
      tippen:wahr,
      Sondentyp: 1
    })
    dies.scroll = scrollen
     scrollen.auf('scrollen',(pos)=>{
       dies.handleToScroll(pos)
     })
     scroll.on('touchEnd',(pos)=>{
       this.handleToTouchEnd(pos)
     })

  lass dangqian = dies.$refs.wrapper.offsetTop
  let zongaodu = document.documentElement.clientHeight
  lass alles = zongaodu-dangqian
  dies.alleHöhe = alle + "px"
  },
}
</Skript>
<Stil>
</Stil>   

Die dynamische Bindung von allHeight dient dazu, die Höhe des übergeordneten Felds immer der Höhe vom unteren Seitenrand aus anzupassen, was die Implementierung durch Berechnung erleichtert.

Zwei Methoden werden gleichzeitig gekapselt. Eine davon ist Scroll, eine Pulldown-Aktualisierungsmethode, und TouchEnd ist eine Funktion, die nach der Pulldown-Aktualisierung ausgelöst wird. Es gibt auch viele andere Methoden, z. B. Pull-Up, um mehr zu laden usw. Sie können dies im offiziellen Website-Dokument überprüfen

Als nächstes registrieren Sie diese Komponente global in main.js

Scroller aus „./components/content/Scroller“ importieren
Vue.Komponente('Scroller',Scroller)

Verwendung in anderen Komponenten

Wenn wir beispielsweise möchten, dass der Inhalt im ul-Tag einen Scroll-Effekt hat, können wir ihn wie folgt schreiben

 <Scroller>
 <ul>
 </ul>
</Scroller>

Wenn Sie Kapselung verwenden möchten, können Sie über Requisiten kommunizieren

<Scroller :handleToScroll="HandleToScroll" :handleToTouchEnd="HandleToTouchEnd">

Auf diese Weise wird die Seite diesen Scroll-Effekt haben. Beachten Sie jedoch, dass viele unserer nativen Methoden abgedeckt werden. Es gibt jedoch auch eine entsprechende Lösung, die ihre internen Eigenschaften verwendet. Beispielsweise der Ankerpunktsprung der Seite

Ich habe eine Methode in der gekapselten Komponente geschrieben, um die Y-Achse zu bewegen mit

  Methoden: {
     handleToScrolltop(y){
       dies.scroll.scrollTo(0,y)
     }
   },

Wie benutzt man es?

Durch Aufruf dieser Methode auf der Seite, die Sie verwenden möchten

handleToScrolltop(), setze den entsprechenden offsetTop in die Klammern

Das Obige ist meine persönliche Erfahrung. Ich hoffe, es kann Ihnen als Referenz dienen. Ich hoffe auch, dass Sie 123WORDPRESS.COM unterstützen werden.