欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Vue實(shí)現(xiàn)搖一搖功能(兼容ios13.3以上)

 更新時(shí)間:2021年01月26日 11:40:20   作者:尼克1601044331  
這篇文章主要為大家詳細(xì)介紹了Vue實(shí)現(xiàn)搖一搖功能,兼容ios13.3以上,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下

最近做了個(gè)搖一搖類似的功能,使用的是shake.js,但在ios13.3之前的版本中可以觸發(fā)搖一搖,之后的版本需要兼容,需要制作一個(gè)讓用戶能手動(dòng)點(diǎn)擊的彈框,才能使用戶授權(quán)動(dòng)作與方向的權(quán)限。(需使用https協(xié)議)

<van-popup v-model="isTip" class="popInfo" :close-on-click-overlay="false">
 <div class="mainBody">
 <h3 class="systemTip">溫馨提示</h3>
 <div class="confirm">
 由于ios系統(tǒng)需要手動(dòng)獲取訪問(wèn)動(dòng)作與方向的權(quán)限,為保障游戲的正常進(jìn)行,請(qǐng)?jiān)谠L問(wèn)提示中點(diǎn)擊允許。
 </div>
 </div>
 <button class="bottomButton" @click="handleInit">
 知道了
 </button>
</van-popup>

shake.js

//引入shake.js
created(){
 this.initShake()
 const isAction = JSON.parse(localStorage.getItem('getAction'))
 var ua = navigator.userAgent.toLowerCase();
 if(ua.indexOf("like mac os x") > 0){
 var reg = /os [\d._]*/gi ;
 var verinfo = ua.match(reg) ;
 var version = (verinfo+"").replace(/[^0-9|_.]/ig,"").replace(/_/ig,".");
 if (parseFloat(version) >= 13.3 && !isAction){
 localStorage.setItem("getAction",true)
 this.isTip = true
 }
 }
},
methods:{
 initShake(){
 this.myShakeEvent = new Shake({
 threshold: 15, // 搖動(dòng)閾值
 timeout: 1000 // 事件發(fā)生頻率,是可選值
 });
 this.myShakeEvent.start();
 window.addEventListener('shake', xx);
 },
 handleInit(){
 this.isTip = false
 this.ios13granted()
 },
 ios13granted() {
 if (typeof DeviceMotionEvent.requestPermission === 'function') {
 DeviceMotionEvent.requestPermission().then(permissionState => {
 if (permissionState === 'granted') {
 this.initShake() //搖一搖
 } else if(permissionState === 'denied'){// 打開的鏈接不是https開頭
 alert("當(dāng)前IOS系統(tǒng)拒絕訪問(wèn)動(dòng)作與方向。請(qǐng)退出微信,重新進(jìn)入活動(dòng)頁(yè)面獲取權(quán)限?;蛑苯狱c(diǎn)擊抽簽桶參與活動(dòng)")
 }
 }).catch((error) => {
 alert("請(qǐng)求設(shè)備方向或動(dòng)作訪問(wèn)需要用戶手勢(shì)來(lái)提示")
 })
 } else {
 // 處理常規(guī)的非iOS 13+設(shè)備
 alert("處理常規(guī)的非iOS 13+設(shè)備")
 }
 },
}

以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。

相關(guān)文章

  • vue3刪除過(guò)濾器的原因

    vue3刪除過(guò)濾器的原因

    去年,vue3出來(lái)了。增加了很多新功能,但是也刪掉了一些功能。比如刪掉了vue2中的過(guò)濾器filter功能。與此同時(shí),官方建議:用方法調(diào)用或計(jì)算屬性替換過(guò)濾器。本文將分析vue3刪除過(guò)濾器的原因及如何用其他方法實(shí)現(xiàn)過(guò)濾器的功能
    2021-05-05
  • vue+canvas繪制時(shí)間軸的方法

    vue+canvas繪制時(shí)間軸的方法

    這篇文章主要為大家詳細(xì)介紹了vue+canvas繪制時(shí)間軸的方法,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2021-08-08
  • Vue Vine實(shí)現(xiàn)一個(gè)文件中寫多個(gè)組件的方法(最近很火)

    Vue Vine實(shí)現(xiàn)一個(gè)文件中寫多個(gè)組件的方法(最近很火)

    Vue Vine提供了全新Vue組件書寫方式,主要的賣點(diǎn)是可以在一個(gè)文件里面寫多個(gè)vue組件,Vue Vine是一個(gè)vite插件,vite解析每個(gè)模塊時(shí)都會(huì)觸發(fā)插件的transform鉤子函數(shù),本文介紹Vue Vine是如何實(shí)現(xiàn)一個(gè)文件中寫多個(gè)組件,感興趣的朋友一起看看吧
    2024-07-07
  • 詳解Vue用axios發(fā)送post請(qǐng)求自動(dòng)set cookie

    詳解Vue用axios發(fā)送post請(qǐng)求自動(dòng)set cookie

    本篇文章主要介紹了Vue用axios發(fā)送post請(qǐng)求自動(dòng)set cookie,非常具有實(shí)用價(jià)值,需要的朋友可以參考下
    2017-05-05
  • vue-cli自定義創(chuàng)建項(xiàng)目eslint依賴沖突解決方式

    vue-cli自定義創(chuàng)建項(xiàng)目eslint依賴沖突解決方式

    vue-cli是vue.js的腳手架,用于自動(dòng)生成vue.js+webpack的項(xiàng)目模板,在創(chuàng)建項(xiàng)目時(shí),如果遇到npm安裝報(bào)錯(cuò),通常是由于依賴版本沖突造成的,文中通過(guò)圖文以及代碼介紹的非常詳細(xì),需要的朋友可以參考下
    2024-09-09
  • vue實(shí)現(xiàn)指定日期之間的倒計(jì)時(shí)

    vue實(shí)現(xiàn)指定日期之間的倒計(jì)時(shí)

    這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)指定日期之間的倒計(jì)時(shí),文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2021-05-05
  • vue 實(shí)現(xiàn)上傳按鈕的樣式的兩種方法

    vue 實(shí)現(xiàn)上傳按鈕的樣式的兩種方法

    這篇文章主要介紹了vue 定制上傳按鈕的樣式的兩種方法,本文結(jié)合示例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
    2022-12-12
  • 淺談Vue CLI 3結(jié)合Lerna進(jìn)行UI框架設(shè)計(jì)

    淺談Vue CLI 3結(jié)合Lerna進(jìn)行UI框架設(shè)計(jì)

    這篇文章主要介紹了淺談Vue CLI 3結(jié)合Lerna進(jìn)行UI框架設(shè)計(jì),在此之前先簡(jiǎn)單介紹一下Element的構(gòu)建流程,以便對(duì)比新的UI框架設(shè)計(jì)。小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
    2019-04-04
  • vue3不能使用history.pushState修改url參數(shù)踩坑

    vue3不能使用history.pushState修改url參數(shù)踩坑

    這篇文章主要為大家介紹了vue3不能使用history.pushState修改url參數(shù)踩坑解析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
    2023-02-02
  • 一文詳解Vue的響應(yīng)式原則與雙向數(shù)據(jù)綁定

    一文詳解Vue的響應(yīng)式原則與雙向數(shù)據(jù)綁定

    使用 Vue.js 久了,還是不明白響應(yīng)式原理和雙向數(shù)據(jù)綁定的區(qū)別?今天,我們就一起來(lái)學(xué)習(xí)一下,將解釋它們的區(qū)別,快跟隨小編一起學(xué)習(xí)學(xué)習(xí)吧
    2022-08-08

最新評(píng)論