最开始想做成一个公共的，完全提取出来的一个组件，组件设置背景透明，到时候哪个页面需要，直接引入组件就可以了，所以最开始做的是一个vue的组件，在组件中，监听页面的@touchstart，但是这个组件会盖住原来页面的一些操作，导致原来页面的操作无法进行，所以最后只是把公共的方法提取出来做了mixins，然后在原来的页面加了@touchstart.capture，为啥要capture，下面会具体描述。

mixins代码：

import {timeOutToHome} from "@/static/constant/patient.js"
import {pageReLauncho } from '@/utils/common';export default {data() {return {idleTimer: null, // 定时器};},methods: {// 启动定时器startIdleTimer() {this.idleTimer = setTimeout(() => {// 检查当前页面是否仍然活跃:因为刚开始，是dragPatient中的click先触发，然后页面的click再触发，导致先跳转页面，才执行重置定时器，跳转页面后，有执行定时器跳到首页了，现在在页面外层的click增加了click.capture，就是先执行外层click-重置定时其，在执行dragPatient的click，就不会有问题// const pages = getCurrentPages();// const currentPage = pages[pages.length - 1];// console.log('-----current', currentPage.route)// if (currentPage.route !== "pages/patient/patient") {// 	this.clear() // 如果已经不是当前页面，清理定时器// 	return;// }console.log('----当前播放状态', this.playStatus)if(!this.playStatus){console.log("页面长时间无操作，执行特定事件");this.onIdle();}}, timeOutToHome);},// 重置定时器resetIdleTimer() {console.log('---重置定时器')this.clear()this.startIdleTimer();},// 页面无操作时执行的事件onIdle() {// 在这里执行你想要的操作：例如：弹出提示框、跳转页面等console.log("用户长时间没有操作页面");pageReLauncho("index/home")},// 监听用户操作handleUserActivity() {this.resetIdleTimer();},clear(){clearTimeout(this.idleTimer);this.idleTimer = null}},onShow() {// 页面加载时启动定时器this.startIdleTimer();},onHide() {console.log('---clear timeout')this.clear()},onUnload() {console.log('---clear timeout')this.clear()}
};

主页面代码：

<template><view class="patient-home-container" @touchstart.capture="handleUserActivity">

注意点分析：

1、测试的时候，页面有个侧边导航，点击跳转其他页面，但是跳到其他页面过了一段时间，又跳到首页了，检查后发现，原来侧边导航的点击在页面点击之前执行了，导致即使跳转页面，还会执行每隔一段时间跳转首页，加上capture后，就会先执行页面的操作，在执行页面内按钮的操作，具体如下图

2、之前把touchStart放在了组件中，但是会导致页面的click失效，所以放回了页面中。

3、这里面mixins多了一个操作，判断视频是否播放，因为需求：如果视频正在播放不允许返回首页，所以在mixins中判断了当前视频播放的状态，这个状态在页面中通过播放、暂停等事件控制，主要代码如下：

 <video ref="myVideoRef"class="video-player" :src="currentVideo" :poster="currentPoster"@play="onPlay"@pause="onPause"@ended="onEnded"controls>
</video>onPlay(e) {console.log('视频开始播放', e);this.playStatus = true;
},
onPause(e) {console.log('视频暂停', e);this.playStatus = false;this.resetIdleTimer()
},
onEnded(e) {console.log('视频播放结束', e);this.playStatus = false;this.resetIdleTimer()
},