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

Warum wird UTF-8 in MySQL nicht empfohlen?

Ich bin kürzlich auf einen Fehler gestoßen, als i...

Eine kurze Erläuterung der Situationen in MySQL, die zu Indexfehlern führen

Hier einige Tipps von Ausbildungsstätten und mein...

Detaillierte Erklärung von mktemp, einem grundlegenden Linux-Befehl

mktemp Erstellen Sie auf sichere Weise temporäre ...

So öffnen Sie eine Seite in einem Iframe

Lösung: Setzen Sie den Zielattributwert des Links ...

Detaillierte Erklärung und Beispiele der MySQL-Isolationsebene

Inhaltsverzeichnis 4 Isolationsebenen von MySQL E...

Zusammenfassung der MySQL-Tabellen- und Spaltenkommentare

Genau wie bei Code können Sie den Tabellen und Sp...

Tutorial zur Installation von MongoDB unter Linux

MongoDB ist plattformübergreifend und kann sowohl...

Spezifische Verwendung von Vues neuem Spielzeug VueUse

Inhaltsverzeichnis Vorwort Was ist VueUse Einfach...

Vue3.0 implementiert die Kapselung des Dropdown-Menüs

Vue3.0 ist bereits seit einiger Zeit auf dem Mark...

Erläuterung der Dockerfile-Anweisungen und der grundlegenden Struktur

Durch die Verwendung von Dockerfile können Benutz...

MySQL-unabhängiger Index und gemeinsame Indexauswahl

Häufig fehlt das Verständnis für mehrspaltige Ind...

5 Möglichkeiten, um schnell den Leerraum eines Inline-Blocks in HTML zu entfernen

Der Eigenschaftswert „Inline-Block“ ist sehr nütz...