成都画时网站建设,程序开发软件有哪些,网站设计制作价钱,关于网站开发制作的相关科技杂志的网站最开始想做成一个公共的#xff0c;完全提取出来的一个组件#xff0c;组件设置背景透明#xff0c;到时候哪个页面需要#xff0c;直接引入组件就可以了#xff0c;所以最开始做的是一个vue的组件#xff0c;在组件中#xff0c;监听页面的touchstart#xff0c;但是这…最开始想做成一个公共的完全提取出来的一个组件组件设置背景透明到时候哪个页面需要直接引入组件就可以了所以最开始做的是一个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()}
};主页面代码
templateview classpatient-home-container touchstart.capturehandleUserActivity注意点分析1、测试的时候页面有个侧边导航点击跳转其他页面但是跳到其他页面过了一段时间又跳到首页了检查后发现原来侧边导航的点击在页面点击之前执行了导致即使跳转页面还会执行每隔一段时间跳转首页加上capture后就会先执行页面的操作在执行页面内按钮的操作具体如下图2、之前把touchStart放在了组件中但是会导致页面的click失效所以放回了页面中。3、这里面mixins多了一个操作判断视频是否播放因为需求如果视频正在播放不允许返回首页所以在mixins中判断了当前视频播放的状态这个状态在页面中通过播放、暂停等事件控制主要代码如下video refmyVideoRefclassvideo-player :srccurrentVideo :postercurrentPosterplayonPlaypauseonPauseendedonEndedcontrols
/videoonPlay(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()
},
