vue中pc移动滚动穿透问题及解决_vue.js_

 我是里面的内容 

 watch:{ statusShow(val){ if(val) { this.lockBody(); } else { this.resetBody(); } }, calendarShow(val){ if(val) { this.lockBody(); } else { this.resetBody(); } } }, methods: { lockBody() { const { body } = document; const scrollTop = document.body.scrollTop || document.documentElement.scrollTop; body.style.position = 'fixed'; body.style.width = '100%'; body.style.top = `-${scrollTop}px`; }, resetBody() { const { body } = document; const { top } = body.style; body.style.position = ''; body.style.width = ''; body.style.top = ''; document.body.scrollTop = -parseInt(top, 10); document.documentElement.scrollTop = -parseInt(top, 10); }, }

// src/popup/index.js import { createNamespace, isDef } from '../utils'; import { PopupMixin } from '../mixins/popup'; import Icon from '../icon'; const [createComponent, bem] = createNamespace('popup'); export default createComponent({   // 穿透处理的代码在这里混入   mixins: [PopupMixin],   props: {     round: Boolean,     duration: Number,     closeable: Boolean,     transition: String,     safeAreaInsetBottom: Boolean,     closeIcon: {       type: String,       default: 'cross'     },     closeIconPosition: {       type: String,       default: 'top-right'     },     position: {       type: String,       default: 'center'     },     overlay: {       type: Boolean,       default: true     },     closeOnClickOverlay: {       type: Boolean,       default: true     }   },   beforeCreate() {     const createEmitter = eventName => event => this.$emit(eventName, event);     this.onClick = createEmitter('click');     this.onOpened = createEmitter('opened');     this.onClosed = createEmitter('closed');   },   render() {     if (!this.shouldRender) {       return;     }     const { round, position, duration } = this;     const transitionName =       this.transition ||       (position === 'center' ? 'van-fade' : `van-popup-slide-${position}`);     const style = {};     if (isDef(duration)) {       style.transitionDuration = `${duration}s`;     }     return (                
           {this.slots()}           {this.closeable && (                        )}         
            );   } });

// src/mixins/popup/index.js import { context } from './context'; import { TouchMixin } from '../touch'; import { PortalMixin } from '../portal'; import { on, off, preventDefault } from '../../utils/dom/event'; import { openOverlay, closeOverlay, updateOverlay } from './overlay'; import { getScrollEventTarget } from '../../utils/dom/scroll'; export const PopupMixin = {   mixins: [     TouchMixin,     PortalMixin({       afterPortal() {         if (this.overlay) {           updateOverlay();         }       }     })   ],   props: {     // whether to show popup     value: Boolean,     // whether to show overlay     overlay: Boolean,     // overlay custom style     overlayStyle: Object,     // overlay custom class name     overlayClass: String,     // whether to close popup when click overlay     closeOnClickOverlay: Boolean,     // z-index     zIndex: [Number, String],     // prevent body scroll     lockScroll: {       type: Boolean,       default: true     },     // whether to lazy render     lazyRender: {       type: Boolean,       default: true     }   },   data() {     return {       inited: this.value     };   },   computed: {     shouldRender() {       return this.inited || !this.lazyRender;     }   },   watch: {     value(val) {       const type = val ? 'open' : 'close';       this.inited = this.inited || this.value;       this[type]();       this.$emit(type);     },     overlay: 'renderOverlay'   },   mounted() {     if (this.value) {       this.open();     }   },   /* istanbul ignore next */   activated() {     if (this.value) {       this.open();     }   },   beforeDestroy() {     this.close();     if (this.getContainer && this.$parent && this.$parent.$el) {       this.$parent.$el.appendChild(this.$el);     }   },   /* istanbul ignore next */   deactivated() {     this.close();   },   methods: {     open() {       /* istanbul ignore next */       if (this.$isServer || this.opened) {         return;       }       // cover default zIndex       if (this.zIndex !== undefined) {         context.zIndex = this.zIndex;       }       this.opened = true;       this.renderOverlay();       // 穿透处理的核心部分       if (this.lockScroll) {         // 给touchstart及touchmove上绑定代码         // 关于touchStart及ontouchmove的代码在TouchMixin的引入中         on(document, 'touchstart', this.touchStart);         on(document, 'touchmove', this.onTouchMove);         if (!context.lockCount) {           document.body.classList.add('van-overflow-hidden');         }         context.lockCount++;       }     },     close() {       if (!this.opened) {         return;       }       if (this.lockScroll) {         context.lockCount--;         off(document, 'touchstart', this.touchStart);         off(document, 'touchmove', this.onTouchMove);         if (!context.lockCount) {           document.body.classList.remove('van-overflow-hidden');         }       }       this.opened = false;       closeOverlay(this);       this.$emit('input', false);     },     onTouchMove(event) {       // 这个方法是touch文件中引入得，一会会看到       // 主要计算滑动得方向及距离       this.touchMove(event);       // 方向计算       const direction = this.deltaY > 0 ? '10' : '01';       // 获取滚动目标对象       const el = getScrollEventTarget(event.target, this.$el);       // 滚动元素相关属性赋值       const { scrollHeight, offsetHeight, scrollTop } = el;       let status = '11';       /* istanbul ignore next */       if (scrollTop === 0) {         // 没有滚动的情况下，判定是否有滚动条         status = offsetHeight >= scrollHeight ? '00' : '01';       } else if (scrollTop + offsetHeight >= scrollHeight) {         // 有滚动距离且滚动到底部         status = '10';       }       /* istanbul ignore next */       if (         status !== '11' &&         this.direction === 'vertical' &&         !(parseInt(status, 2) & parseInt(direction, 2))       ) {         // 有滚动条且有滚动距离且方向为垂直时，阻止默认事件，即阻止页面滚动         // 所以原理其实是在可能会引起背景滑动穿透时禁止掉scroll事件         // 因为常见会滑动穿透的场景都是子元素不滚动引起背景滚动，或者子元素已经滚动到顶部或者底部，继续滑动的话就会滑动穿透，如果发现已经滚动到顶部或者底部时直接禁止掉touchmove就可以阻止滑动穿透了         preventDefault(event, true);       }     },     renderOverlay() {       if (this.$isServer || !this.value) {         return;       }       this.$nextTick(() => {         this.updateZIndex(this.overlay ? 1 : 0);         if (this.overlay) {           openOverlay(this, {             zIndex: context.zIndex++,             duration: this.duration,             className: this.overlayClass,             customStyle: this.overlayStyle           });         } else {           closeOverlay(this);  
                
提示：
                    本文由神整理自网络，如有侵权请联系本站删除！
                    

                    本站声明： 

                    1、本站所有资源均来源于互联网，不保证100%完整、不提供任何技术支持； 

                    2、本站所发布的文章以及附件仅限用于学习和研究目的;不得将用于商业或者非法用途；否则由此产生的法律后果，本站概不负责！
                
                

                

                                            
上一篇：ES6中async函数与await表达式的基本用法举例_javascript技巧_
                                                                
下一篇：uniapp引用echarts的详细步骤(附柱状图实例)_javascript技巧_