网站开发首选语言,wordpress版权,wordpress仿站函数,杭州网站建设的公司正常情况是左右滑动时#xff0c;左侧固定不动#xff0c;上下滑动时表头不动#xff1b;而且需求不是完整页面滚动。而是单独这个表滚动#xff1b;
第一个坑是他有一个ios自带的橡胶上下回弹效果。导致滚动时整个表都跟着回弹#xff1b; 这个是很好解决。微信开发官网…
正常情况是左右滑动时左侧固定不动上下滑动时表头不动而且需求不是完整页面滚动。而是单独这个表滚动
第一个坑是他有一个ios自带的橡胶上下回弹效果。导致滚动时整个表都跟着回弹 这个是很好解决。微信开发官网/uniapp都有属性可以改
scroll-view :enhancedtrue :bouncesfalse /scroll-view第二个坑。当向y轴滑动时。x轴的方向会轻微的缓动 想要和安卓一样的效果滑动yx轴每次只有一个方向滚动 尝试方法有 做一个假的表头
view classthead :style{left:myPospx}
表头
/viewscroll-view scroll-y :enhancedtrue :bouncesfalse scrollonscrollY
scroll-view scroll-x :enhancedtrue :bouncesfalse scrollonscrollX
view classtbodyview classtr v-for(tr,index) in trList :keyindexview classtd{{tr.date}}/view.../view
/view/scroll-view/scroll-view侦听onscrollX 滑动。让表头跟着位移。但是还是不行。滚动时thead会比表身慢没有对齐。这是scroll本身事件延时导致的。
第二个思路。既然假thead比真表身滚动时无法对齐。那么就再做一个假表身。》整个假表。假表用来显示。真表用来滚动
用来显示的表我们称为a表。用来滚动的表我们称为b容器b容器是一个与a表宽高位置完全一致的容器。他将覆盖在a表的上层。并且透明度为0 这里是重点。必须要保证ab的位置大小完全一致
//用来显示的表a表scroll-view scroll-y scroll-x :enhancedtrue :bouncesfalse :scroll-topmy :scroll-leftmxview classthead styleheight:30px view classth v-for(item,index) in headList :keyindex{{item.title}}/view/viewview classtbody view classtr v-for(tr,index) in trList :keyindexview classtd{{tr.date}}/view.../view/view
/view
/scroll-view//用来滚动的表b容器
scroll-view scroll-y :enhancedtrue :bouncesfalse scrollonscrollY
//与表头宽高一致view classthead styleheight:30px/view
scroll-view scroll-x :enhancedtrue :bouncesfalse scrollonscrollX
view classtbody//与表身宽高一致
/view/scroll-view/scroll-view侦听滚动 onscroll(e) { setTimeout(() {this.mx e.detail.scrollLeft;}, 0);},onscroll2(e) {setTimeout(() {this.my e.detail.scrollTop;}, 0);},这里还会有一个坑前面说了scroll本身有延时当滚动b容器到顶部的时候手指离开后。会有概率导致a表还没有滚动到顶部还差一小段。因为b容器已经到顶部了。所以无法滚动这就很尴尬了 这个也有思路 获取a表的滚动位置和b容器的滚动位置对比。如果b容器已经到顶部。而a表没有到顶部。那么手指离开后设置this.my0; 以此类推。底部最左最右
最终完全解决得到和安卓效果相似的表
