Vue implementiert die Shake-Funktion (kompatibel mit ios13.3 und höher)

Vue implementiert die Shake-Funktion (kompatibel mit ios13.3 und höher)

Vor Kurzem habe ich mit shake.js eine ähnliche Funktion wie shake erstellt. Die Shake-Funktion kann jedoch in Versionen vor ios13.3 ausgelöst werden und spätere Versionen müssen kompatibel sein. Es muss ein Popup-Fenster erstellt werden, auf das Benutzer manuell klicken können, damit sie Berechtigungen für Aktionen und Anweisungen erteilen können. (https-Protokoll ist erforderlich)

<van-popup v-model="isTip" class="popInfo" :schließen-beim-klicken-overlay="false">
 <div Klasse="Hauptteil">
 <h3 class="systemTip">Warme Tipps</h3>
 <div Klasse="bestätigen">
 Da das iOS-System zum Zugriff auf Aktionen und Anweisungen manuell die Berechtigung einholen muss, klicken Sie in der Zugriffsaufforderung auf „Zulassen“, um den normalen Spielverlauf sicherzustellen.
 </div>
 </div>
 <button Klasse="bottomButton" @click="handleInit">
 Verstanden</button>
</van-popup>

shake.js

//Shake.js einführen
erstellt(){
 dies.initShake()
 const isAction = JSON.parse(localStorage.getItem('getAction'))
 var ua = navigator.userAgent.toLowerCase();
 if (ua.indexOf("wie mac os x") > 0) {
 var reg = /os [\d._]*/gi;
 var verinfo = ua.match(reg);
 var version = (verinfo+"").replace(/[^0-9|_.]/ig,"").replace(/_/ig,".");
 wenn (parseFloat(version) >= 13.3 && !isAction){
 localStorage.setItem("getAction",true)
 this.isTip = wahr
 }
 }
},
Methoden:{
 initShake(){
 this.myShakeEvent = neuer Shake({
 Schwellenwert: 15, // Timeout für Schüttelschwelle: 1000 // Ereignishäufigkeit, optionaler Wert});
 dies.myShakeEvent.start();
 window.addEventListener('schütteln', xx);
 },
 handleInit(){
 this.isTip = falsch
 dies.ios13granted()
 },
 ios13granted() {
 wenn (Typ von DeviceMotionEvent.requestPermission === 'Funktion') {
 DeviceMotionEvent.requestPermission().then(permissionState => {
 wenn (permissionState === 'gewährt') {
 this.initShake() //Shake} else if(permissionState === 'denied'){// Der von Ihnen geöffnete Link beginnt nicht mit https alert("Das aktuelle IOS-System verweigert den Zugriff auf Aktionen und Anweisungen. Bitte beenden Sie WeChat und rufen Sie die Veranstaltungsseite erneut auf, um Berechtigungen zu erhalten. Oder klicken Sie direkt auf den Lotterie-Bucket, um an der Veranstaltung teilzunehmen.")
 }
 }).catch((Fehler) => {
 alert("Das Anfordern der Geräteausrichtung oder des Bewegungszugriffs erfordert Benutzergesten zur Aufforderung")
 })
 } anders {
 // Mit regulären Geräten umgehen, die nicht auf iOS 13 oder höher laufen, alert("Mit regulären Geräten umgehen, die nicht auf iOS 13 oder höher laufen")
 }
 },
}

Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, er wird für jedermanns Studium hilfreich sein. Ich hoffe auch, dass jeder 123WORDPRESS.COM unterstützen wird.

Das könnte Sie auch interessieren:
  • JavaScript+H5 zur Implementierung der WeChat-Shake-Funktion
  • Analyse des Prinzips des WeChat-Shakes mit JS
  • Implementierung der Shake-Funktion in Javascript HTML5

<<:  Detailliertes Tutorial zum Upgrade der kostenlosen Installationsversion von MySQL 5.7.17 unter Windows (x86, 64 Bit)

>>:  Detaillierte Erläuterung der Nginx-Optimierung in Szenarien mit hoher Parallelität

Artikel empfehlen

CSS3-Eigenschaft line-clamp steuert die Verwendung von Textzeilen

Beschreibung: Begrenzen Sie die Anzahl der Textze...

Beispieldemonstration der Vuex-Modularisierung und Namespaces

1. Zweck: Machen Sie den Code leichter wartbar un...

Ausführliches Tutorial zur Installation von MySQL 5.6-ZIP-Paketen

Bisher haben wir alle Dateien mit der Endung .msi...

Zabbix überwacht die MySQL-Instanzmethode

1. Überwachungsplanung Bevor Sie ein Überwachungs...

Details der MySQL-Berechnungsfunktion

Inhaltsverzeichnis 2. Feldverkettung 2. Geben Sie...

Installieren Sie Centos7 mithilfe einer virtuellen Hyper-V-Maschine

Inhaltsverzeichnis einführen Vorbereiten Systemab...

CSS3 erstellt 3D-Würfel-Ladeeffekte

Kurzbeschreibung Dies ist ein cooler 3D-Würfel-Vo...

So starten Sie ein JAR-Paket und führen es unter Linux im Hintergrund aus

Der Linux-Befehl zum Ausführen des JAR-Pakets lau...

HTML-Tabellen-Tag-Tutorial (46): Tabellenfußzeilen-Tag

Mit dem Tag <tfoot> wird der Stil der Tabel...

js realisiert bidirektionale Datenbindung (Accessor-Überwachung)

In diesem Artikelbeispiel wird der spezifische Co...

Implementierung der Parametersprungfunktion im Vue-Projekt

Seitenbeschreibung:​ Hauptseite: Name —> shish...

Detaillierte Erläuterung der Hochverfügbarkeitskonfiguration von Docker

Docker Compose Docker Compose unterteilt die verw...