地板网站建设方案,文章网站哪里建设好,wordpress内容模板下载,济宁网站建设电话问题: 最近遇到一个问题#xff0c;我们在企业微信中的 H5 项目中需要用到table表格#xff08;支持懒加载 上划加载数据#xff09;。但是他们在锁头、锁列的情况下#xff0c;依旧会出现边界橡皮筋效果。就会显示的很奇怪。 什么是ios橡皮筋效果#xff1a; 我们知道元素…问题: 最近遇到一个问题我们在企业微信中的 H5 项目中需要用到table表格支持懒加载 上划加载数据。但是他们在锁头、锁列的情况下依旧会出现边界橡皮筋效果。就会显示的很奇怪。 什么是ios橡皮筋效果 我们知道元素超出所给定的高度会出现滚动条 | 横向的或纵向的在ios手机上当在全局范围或局部范围出现滚动的地方时滑动使滚动到头时还可以继续拖拽出一段距离的空白松开手时立刻回弹回去。虽不影响功能但是操作有点别扭感觉这个table表格滑动的时候像是飘着上面的不是固定的。 尝试思路 针对这个问题我也尝试了不同的方案都不尽人意; 1首先想到先使用css解决前后使用了绝对定位和固定定位来提高层级发现问题依然存在 2然后是用css属性::-webkit-scrollbar { display: none;} 来隐藏滚动条 还是不行 3后面引入网上的inobounce插件还是不行。此插件会禁用页面的touchmove事件导致页面无法进行滑动 4因为我用的是原生的table来布局的难道是table标签的问题后面我又重新用div来实现table表格的布局发现还是会出现橡皮筋效果说明不是标签的问题是ios浏览器隐藏的特性 解决方案 最后我想到既然我关不掉那我自己完全控制滑动好了原理是禁用掉页面touchumove的默认的滑动效果使用元素的scrollLeft 和scrollTop这两个原生的可写属性来进行元素的上下和左右移动 这样做的好处在于我自己完全控制了拖拽滑动行为。坏处在于丢失了原生滑动的惯性滑动看着没那么丝滑了。不过这点也可以后续通过 JavaScript 来优化暂时还没写 写出来的效果不太好不丝滑。 效果图如下 可以上下左右滑动是固顶的向上滑动时标题部分不会跟随移动 可以懒加载当下滑到触底时会向父元素传递一个事件告诉父组件该请求下一页的数据了 主要实现代码如下 表格组件部分代码如下tableStrick.vue; data() {return {listEle: null, // dom元素// 记录坐标touchX: ,touchY: ,// 滑动坐标startX: 0,startY: 0,// 滑动方向direction: ,};}mounted() {/* 获取dom元素 这里最好不要用原生的dom获取方式 */this.listEle this.$refs.main;/* 自己实现滚动效果 不会出现滚动回弹问题 但是滚动不丝滑了且没有惯性 */this.listEle.addEventListener(touchstart, this.touchstart, false);this.listEle.addEventListener(touchmove, this.touchmove, false);this.listEle.addEventListener(touchend, this.touchend, false);},methods:{/* 修改 浏览器默认的滑动容器行为 */// 1手指接触屏幕touchstart(event) {this.touchX event.changedTouches[0].clientX;this.touchY event.changedTouches[0].clientY;// 获取此刻手指的横坐标startX和纵坐标startYthis.startX event.touches[0].pageX;this.startY event.touches[0].pageY;},// 2, 手指滑动的过程touchmove(event) {event.preventDefault();// 计算手指偏移量const offsetX event.changedTouches[0].clientX - this.touchX;const offsetY event.changedTouches[0].clientY - this.touchY;// 触摸的坐标this.touchX event.changedTouches[0].clientX;this.touchY event.changedTouches[0].clientY;// 手指滑动的方向 let moveEndX event.changedTouches[0].pageX;let moveEndY event.changedTouches[0].pageY;let X moveEndX - this.startX;let Y moveEndY - this.startY;// 注意 上下移动只能是上划或下划 左右移动也是同理if (Math.abs(X) Math.abs(Y) X 0) {// 开始移动console.log(我向右滑了)this.listEle.scrollLeft this.listEle.scrollLeft - offsetX;this.direction right;} else if (Math.abs(X) Math.abs(Y) X 0) {console.log(我向左滑了)this.listEle.scrollLeft this.listEle.scrollLeft - offsetX;this.direction left;} else if (Math.abs(Y) Math.abs(X) Y 0) {console.log(我向下滑了)this.listEle.scrollTop this.listEle.scrollTop - offsetY;/* 设置滚动到底的处理 */this.scrollBottom(event);this.direction bottom;} else if (Math.abs(Y) Math.abs(X) Y 0) {console.log(我向上滑了)this.listEle.scrollTop this.listEle.scrollTop - offsetY;this.direction top;/* 设置滚动到底的处理 */this.scrollBottom(event);} else {this.direction ;}},// 3手指离开屏幕touchend(event) {this.touchX event.changedTouches[0].clientX;this.touchY event.changedTouches[0].clientY;// TODO 此处可以进行优化滚动的惯性 暂未实现},// 监听滚动条 注意 scroll 可能是横向滚动条 也可能是纵向滚动条scrollBottom(event) {// 1可视区域let clientHeight this.listEle.clientHeight;// 2滚动文档高度let scrollHeight this.listEle.scrollHeight;// 3此处相等说明没有纵向滚动条 可能出现了横向滚动条 所以要忽略if (clientHeight scrollHeight) {return;}// 4已滚动的高度let scrollTop parseInt(this.listEle.scrollTop);// 这里 -2 是为了控制误差if (scrollTop clientHeight scrollHeight - 2) {console.log(滚动到底了);// 把事件传出去 父元素开始请求下一页的数据this.$emit(scrollBottom);}},}上面代码讲解 1mounted里面获取表格元素或父元素然后监听手指点击事件移动事件离开事件 2touchstart方法中记录坐标touchmove使用 event.preventDefault();禁用掉原先的滑动效果自己通过this.listEle.scrollLeft和this.listEle.scrollTop来进行移动 3注意下面的代码的意思是先要计算滑动的方向然后再进行向对应的移动防止上下左右一起移动导致移动时太过敏感导致表格一直抖动 4scrollBottom方法是懒加载的处理 如果需要的话可以加上主要是判断上下滑动时距离是否触底触底就让父组件请求数据。 最后注意
最后需要注意的是需要使用了懒加载 需要对父元素中的scrollBottom这个方法进行防抖设置因为滑动到底部触底时存在多次连续触底的行为比较灵敏这样会同时执行多次scrollBottom这个方法导致数据请求过多 防抖可以使用lodash库里面的debounce方法
使用如下在mounted中对scrollBottom进行防抖 也可以对实际请求接口的 自定义方法 进行防抖
mounted(){/* 设置接口防抖 */this.scrollBottom _.debounce(this.scrollBottom, 500);
}
通过 JavaScript 来优化滚动的惯性 这个如果小伙伴们有好的方法可以放到评论区里学习一下
