ios微信小程序table头部与左侧固定双重滚动会抖动的坑,解决思路

在这里插入图片描述

正常情况是左右滑动时,左侧固定不动,上下滑动时表头不动;而且需求不是完整页面滚动。而是单独这个表滚动;

第一个坑是他有一个ios自带的橡胶上下回弹效果。导致滚动时整个表都跟着回弹;
这个是很好解决。微信开发官网/uniapp都有属性可以改

<scroll-view :enhanced="true" :bounces="false"> </scroll-view>

第二个坑。当向y轴滑动时。x轴的方向会轻微的缓动,
想要和安卓一样的效果,滑动y,x轴,每次只有一个方向滚动;
尝试方法有;
做一个假的表头;

<view class="thead" :style="{left:myPos+'px'}">
表头
</view><scroll-view scroll-y :enhanced="true" :bounces="false"  @scroll="onscrollY">
<scroll-view scroll-x :enhanced="true" :bounces="false"  @scroll="onscrollX">
<view class="tbody"><view class="tr" v-for="(tr,index) in trList" :key="index"><view class="td">{{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  :enhanced="true" :bounces="false" :scroll-top="my" :scroll-left="mx"><view class="thead" style="height:30px" ><view class="th" v-for="(item,index) in headList" 		:key="index">{{item.title}}</view></view><view class="tbody "><view class="tr" v-for="(tr,index) in trList" :key="index"><view class="td">{{tr.date}}</view>...</view></view>
</view>
</scroll-view>//用来滚动的表;b容器
<scroll-view scroll-y :enhanced="true" :bounces="false"  @scroll="onscrollY">
//与表头宽高一致<view class="thead" style="height:30px"></view >
<scroll-view scroll-x :enhanced="true" :bounces="false"  @scroll="onscrollX">
<view class="tbody">//与表身宽高一致
</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.my=0; 以此类推。底部,最左,最右;

最终完全解决;得到和安卓效果相似的表;

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/288336.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

浏览器原理篇—渲染原理

目录导航 为什么要学习浏览器的渲染原理浏览器的渲染流程浏览器的渲染阻塞浏览器的渲染优化 为什么要学习浏览器的渲染原理&#xff1f; 知识深度挖掘&#xff1a; 帮助更好地理解前端性能优化。从而对实现效果进行针对性优化。如&#xff1a;**回流和重绘 **渲染机制。帮助…

公共字段自动填充——后端

场景&#xff1a;当处理一些请求时&#xff0c;会重复的对数据库的某些字段进行赋值&#xff08;如&#xff1a;在插入和更新某个物品时&#xff0c;需要更新该物品的更新时间和更新者的信息&#xff09;&#xff0c;这样会导致代码冗余。 如&#xff1a; 思路&#xff1a; 自…

得物-Golang-记一次线上服务的内存泄露排查

1.出现内存泄漏 1.1 事发现场 在风和日丽的一天&#xff0c;本人正看着需求、敲着代码&#xff0c;展望美好的未来。突然收到一条内存使用率过高的告警。 1.2 证人证词 告警的这个项目&#xff0c;老代码是python的&#xff0c;最近一直在go化。随着go化率不断上升&#xff…

phpmyadmin4.8.1远程文件包含漏洞 [GWCTF 2019]我有一个数据库1

打开题目 我们用dirsearch扫描一下后台看看 扫描结果如下 我们访问一下robots.txt看看&#xff0c;提示有phpinfo.php 那我们访问一下phpinfo.php 发现没有任何信息后我们转去看看phpmyadmin看看 成功访问到页面 在这里我们看到phpmyadmin的版本号是4.8.1 我们百度搜索一下看…

备受好评的几个视频素材网站,后期剪辑必看~

现在市面上大大小小的视频素材网站一搜一大把&#xff0c;但是真正能够称得上宝藏实用的却寥寥无几&#xff0c;做过后期的下伙伴们都知道素材站的重要性&#xff0c;一些周期短需要赶时间的项目&#xff0c;根本来不及去实拍&#xff0c;这个时候一个好的素材站真的算得上是救…

自动化测试入门 —— 自动化测试概论

整篇论述总的来讲会很长&#xff0c;从自动化的思维、模型、工具&#xff0c;到各层次的自动化测试技术、测试框架、测试平台&#xff0c;包括面向未来的自动化技术都将涉及&#xff0c;因此打算拆成几个部分去写。此外&#xff0c;由于涉及的范围比较广泛&#xff0c;部分内容…

opencv入门到精通——OpenCV中的绘图功能

目录 目标 代码 画线 画矩形 画圆圈 画椭圆 画多边形 向图像添加文本&#xff1a; 结果 目标 学习使用OpenCV绘制不同的几何形状 您将学习以下功能&#xff1a;cv.line()&#xff0c;cv.circle()&#xff0c;cv.rectangle()&#xff0c;cv.ellipse()&#xff0c;cv.pu…

一个很好用的Docker可视化管理工具

目录 前言Portainer安装部署使用 前言 一个好的docker可视化管理工具&#xff0c;可以提升我们不少的工作效率&#xff0c;下面我就推荐一个我使用过的&#xff0c;感觉很不错的一个可视化管理工具给大家 Portainer Portainer是一个开源的Docker管理工具&#xff0c;提供了容…

Bert-vits2-v2.2新版本本地训练推理整合包(原神八重神子英文模型miko)

近日&#xff0c;Bert-vits2-v2.2如约更新&#xff0c;该新版本v2.2主要把Emotion 模型换用CLAP多模态模型&#xff0c;推理支持输入text prompt提示词和audio prompt提示语音来进行引导风格化合成&#xff0c;让推理音色更具情感特色&#xff0c;并且推出了新的预处理webuI&am…

SpringIOC之BeanExpressionContextAccessor

博主介绍&#xff1a;✌全网粉丝5W&#xff0c;全栈开发工程师&#xff0c;从事多年软件开发&#xff0c;在大厂呆过。持有软件中级、六级等证书。可提供微服务项目搭建与毕业项目实战&#xff0c;博主也曾写过优秀论文&#xff0c;查重率极低&#xff0c;在这方面有丰富的经验…

Ansible(一)

Ansible: 远程操作主机功能&#xff1a; 自动化运维&#xff08;playbook剧本YAML&#xff09; 是基于Python开发的配置管理应用部署攻具&#xff0c;在自动化运维当中&#xff0c;现在是异军突起 Ansible能批量配置&#xff0c;部署&#xff0c;管理上千台主机&#xff0c…

kafka offset sasl加密连接

kafka-tool&#xff08;offset&#xff09; 进行SCRAM连接&#xff0c;直接上图 填写jaas的认证&#xff08;账密 引用包&#xff09;