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

Ein nützliches mobiles Scrolling-Plugin BetterScroll

Inhaltsverzeichnis Machen Sie das Scrollen flüssi...

So entwerfen und erstellen Sie adaptive Webseiten

Mit der Verbreitung von 3G nutzen immer mehr Mens...

Lösung für das Fehlen der my.ini-Datei in MySQL 5.7

Was ist my.ini? my.ini ist die in der MySQL-Daten...

Gogs+Jenkins+Docker automatisierte Bereitstellung von .NetCore-Schritten

Inhaltsverzeichnis Umgebungsbeschreibung Docker-I...

Fragen zum Vorstellungsgespräch zu JS 9 Promise

Inhaltsverzeichnis 1. Mehrere .catch 2. Mehrere ....

Einführung in die Verwendung des MySQL pt-slave-restart-Tools

Inhaltsverzeichnis Beim Einrichten einer MySQL-Ma...

Lernen Sie, wie Sie in 6 Sekunden 1 Million Datensätze in MySQL einfügen

1. Idee Es dauerte nur 6 Sekunden, um 1.000.000 D...

Installieren Sie MySQL 5.6 aus der Yum-Quelle im Centos7.4-System

Systemumgebung: centos7.4 1. Prüfen Sie, ob die D...

HTML-Grundlagen-Zusammenfassungsempfehlung (Titel)

HTML: Titel Überschriften werden durch Tags wie &...

Detaillierte Erläuterung der bidirektionalen Bindung von Vue

Inhaltsverzeichnis 1. Zwei-Wege-Bindung 2. Wird d...

Einführung, Installation und Verwendung von Hyper-V (detaillierte Abbildungen)

Vorwort: Als Gigant in der IT-Branche ist Microso...

Beheben Sie den Fehler bei der Installation von VMware Tools unter Ubuntu 18.04

1. Laut dem Online-Tutorial schlägt die Installat...