标签：弹窗 mount sel function tar img dde vue add
场景： 如果页面里面的背景是一个图片（如下图）或者是背景颜色来着，那么上拉或者下拉就看到底层白色的背景可能很烦。
下面是vue里面用具体代码， 因为我是全页面都是颜色做背景，所以我就直接在App.vue里面写全局了。
methods: {
cancel_scoll_boune() {
var startY,endY
document.querySelector(‘body‘).addEventListener("touchstart",function (evt) {
startY = evt.touches[0].pageY;
})
document.querySelector(‘body‘).addEventListener("touchmove", function(evt){
endY = evt.touches[0].pageY;
if(endY>startY && document.querySelector(‘body‘).scrollTop === 0){
evt.preventDefault()
}
var scrollAll = document.querySelector(‘body‘).scrollTop + document.querySelector(‘body‘).clientHeight
var currentHeight = document.querySelector(‘body‘).scrollHeight
if(endY<startY && scrollAll>= currentHeight){
evt.preventDefault()
}
},{ passive: false});
}
},
mounted() {
this.cancel_scoll_boune()
}
原理： 利用阻止冒泡事件 evt.preventDefault()，后面还要加{ passive: false} （我发现我每加，达不到效果）。
知道原理，其他的就好做了，就是判断上滑到顶部或者到最底部就禁止继续滑动就好。 （虽然说效果不是很好，但是足够了。）
可以用到的地方，就是页面不要求上拉或者下拉刷新的页面。
拓展: 如果觉得不好，其实可以利用better-scroll 或者 iscroll插件都可以， 而且还可以做上拉刷新下拉加载。 我一般不想用better-scroll，就是好多弹窗的时候，页面就做的很烦（可能是新手能力不足吧）。
一颗小萌新。 大佬看不下去，记得给我推荐好的教程链接，拜托。
取消在微信里面上拉拖动或者下拉拖动看到的空白。（也是什么橡皮筋效果）
标签：弹窗 mount sel function tar img dde vue add
原文地址：https://www.cnblogs.com/dashaxiong/p/12069276.html
