介绍
vue-disbounce是一款基于Vue.js的自定义组件，可以有效避免触发h5页面在ios浏览器内置的下拉bounce效果。
组件
:style="{'background-color':backgroundColor }"
class="vd-wrapper"
>
class="vd"
ref="vd"
>
export default {
name: "vd",
props: {
backgroundColor: {
type: String,
default: "#ffffff"
}
},
data() {
return {};
},
mounted() {
this.vd = this.$refs["vd"];
this.vd.addEventListener("touchstart", this.touchstartEvent);
this.vd.addEventListener("touchmove", this.touchmoveEvent, {
passive: false // 阻止默认事件时，设置passive为false，提高性能
});
},
methods: {
getPoint(e) {
return {
x: e.touches ? e.touches[0].pageX : e.clientX,
y: e.touches ? e.touches[0].pageY : e.clientY
};
},
touchstartEvent(e) {
this.startPoint = this.getPoint(e);
},
touchmoveEvent(e) {
if (!this.startPoint) return;
const scrollTop = this.vd.scrollTop; // 距离页面顶部的距离
const curPoint = this.getPoint(e);
const moveY = curPoint.y - this.startPoint.y; // 纵向移动的距离
// 下拉
if (moveY > 0) {
// 如果在顶部，阻止浏览器默认的滚动，避免触发bounce
if (scrollTop <= 0) e.preventDefault();
// 上拉
} else {
const scrollHeight = this.vd.scrollHeight; // 全文区域的高度
const clientHeight = this.vd.clientHeight; // 可见区域的高度
const scrollBottom = scrollHeight - clientHeight - scrollTop; // 距离页面底部的距离
// 如果在底部，阻止浏览器默认的滚动，避免触发ios的bounce效果
if (scrollBottom <= 0) e.preventDefault();
}
}
}
};
.vd-wrapper {
height: 100vh;
}
.vd {
width: 100%;
height: 100%;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
调用
为了方便调用，笔者已经上传到npm
npm安装依赖npm i vue-disbounce
安装完以后，在app.vue文件调用
import VueDisbounce from "vue-disbounce";
export default {
components: {
VueDisbounce
}
};
作者
SuperIron
相关链接
