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

So aktivieren Sie Flash in Windows Server 2016

Ich habe vor Kurzem VMware Horizon bereitgestellt...

33 Eis- und Schnee-Schriftarten zum Download empfohlen (privat und kommerziell)

01 Winterflocken (nur einzeln) 02 Snowtop Caps (k...

Benutzerdefinierte Docker-Netzwerkimplementierung

Inhaltsverzeichnis 1. Passen Sie das Netzwerk an,...

So verwenden Sie Spark und Scala zum Analysieren von Apache-Zugriffsprotokollen

Installieren Zuerst müssen Sie Java und Scala ins...

Details zum JavaScript-Abschluss

Inhaltsverzeichnis 1. Was ist ein Abschluss? 2. D...

Lassen Sie Ihren Text mit dem Marquee-Attribut in HTML tanzen

Syntax: <marquee> …</marquee> Mithilfe...

So ändern Sie die Standardübermittlungsmethode des Formulars

Die Standard-Übermittlungsmethode von HTML ist get...

Einfache Implementierung von HTML zum Erstellen eines persönlichen Lebenslaufs

Lebenslauf-Code: XML/HTML-CodeInhalt in die Zwisc...

So richten Sie Textfelder in mehreren Formularen in HTML aus

Der Formularcode ist wie in der Abbildung dargest...

Implementierung der virtuellen React-Liste

Inhaltsverzeichnis 1. Hintergrund 2. Was ist eine...