今天分享就一个屏保功能。
我做的适用场景是商场的一个大屏，顾客选购后无操作一定时间就跳转到广告页。
项目用的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
}
