屏保功能:H5页面时间内无操作自动跳转指定页面

今天分享就一个屏保功能。
我做的适用场景是商场的一个大屏,顾客选购后无操作一定时间就跳转到广告页。
项目用的uniapp开发。
思路是比较简单的用定时器轮询方式检测是否达到时间临界值。
开始的时候将方法写在main.js中,确实可以做到全局运行,但是相应的无法检测页面操作,只能设置一个定死的时间自动跳转至广告页,该方案不可取,pass。
经过一上午的研究,我之前在uniapp中引入了一个vuerouter的插件,让uniapp可以使用原生vue的路由写法,自然里面也有router.js文件,其中拦截器也是可以用的,全局路由后置守卫是每次进入页面都触发的,觉得这个是可以利用的点

import {RouterMount,createRouter} from 'uni-simple-router';
var baseTime=60;//多少秒无操作后跳转广告
var count = null;
var x=null;
var y=null;
var interval=null;//定时器名称
const router = createRouter({
    platform: process.env.VUE_APP_PLATFORM,  
    routes: [...ROUTES,{
          path: '*',
          redirect:(to)=>{
              return {name:'index'}
          }
        }
    ]
});
document.addEventListener('touchmove',touch, false);  //用来监听页面滚动事件
//全局路由前置守卫
router.beforeEach((to, from, next) => {
    next();
});
function touch(event){
    var x1 = event.touches[0].pageX;
    var y1 = event.touches[0].pageY;
    // console.log('x1',x1) 
    // console.log('y1',y1) 
    if (x != x1 || y != y1) {
        count = baseTime;//如果检测到页面滚动,则重置时间
    }
    x = x1;
    y = y1;
}
// 全局路由后置守卫
router.afterEach((to, from) => {
    count=baseTime
    clearInterval(interval)//务必清理定时器
      console.log('跳转结束')
      console.log('from',from.name)
    interval=setInterval(go, 1000);
})
    
function go(){
    count--
    console.log('count',count)
    // console.log('interval',interval)
    if (count==0) {
           //其他操作
        router.push({name:'index'})
    }
}

export {
    router,
    RouterMount
}

你可能感兴趣的:(屏保功能:H5页面时间内无操作自动跳转指定页面)