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.mzph.cn/news/234330.shtml

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

相关文章

比例化简C语言

分析&#xff1a;由于我们输出的数字只能小于L&#xff0c;所以我们就枚举所以的可能&#xff0c;在对每一种可能相除&#xff0c;在和原始数据相处的值做差&#xff0c;插值越小说明符合程度越大&#xff0c;保留更新更小的差值&#xff0c;直到最后输出最小的情况。&#xff…

我们经常使用的AI技术

窄人工智能 Narrow AI 窄人工智能主要集中于处理相对单一的任务&#xff0c;可以理解&#xff0c;科学家在研究如何模拟人类智能时&#xff0c;一种思路就是我们是不是可以先分别模拟人的不同能力&#xff0c;例如我们的视觉能力&#xff0c;文字识别能力等等。所以就演化出针…

【pytorch】自动求导机制

基础概念汇总 Tensor是 torch.autograd中的数据类型&#xff0c;主要用于封装 Tensor&#xff0c;进行自动求导。 grad : data的梯度grad_fn : 创建 Tensor的 Function&#xff0c;是自动求导的关键requires_grad&#xff1a;指示是否需要梯度is_leaf : 指示是否是叶子结点 …

MySQL主从复制与切换

1.主从架构及基本原理 常见主从部署架构&#xff1a;一主多从、一丛多主、双主复制、主从级联复制。 1.1主从复制原理 1.从节点开启start slave&#xff0c;开启主从复制&#xff0c;从节点IO线程与主节点建立连接&#xff0c;请求数据同步&#xff1b; 2.主节点接收到从节点…

将smiles转为图片都有什么包?rdkit、Open Babel、Indigo

除了 RDKit&#xff0c;还有几个其他的Python库可以用来将SMILES&#xff08;Simplified Molecular Input Line Entry System&#xff09;字符串转换为分子图片。这些库通常用于化学信息学和分子建模领域。一些常见的选项包括&#xff1a; rdkit Open Babel Open Babel 命令行…

【NeRF】内容准备

论文地址 项目主页 参考文章&#xff1a; NeRF入门之体渲染 NeRF:火爆科研圈的三维重建技术大揭秘 【三维重建】NeRF原理代码讲解 精选17篇神经辐射场&#xff08;NeRF&#xff09;高分论文分享&#xff01;最新技术成果一次看完&#xff01;2023/9/29 计划看一下NeRF相关的热…

Ansible的playbook脚本使用

本章注意介绍如何在ansible中写脚本 playbook的语法在写playbook时如何进行错误处理 ansible的许多模块都是在命令行中执行的&#xff0c;每次只能执行一个模块。如果需要执行多个模块&#xff0c;且要写判断语句&#xff0c;判断模块是否执行成功了&#xff0c;如果没成功会…

SpringBoot基于gRPC进行RPC调用

SpringBoot基于gRPC进行RPC调用 一、gRPC1.1 什么是gRPC&#xff1f;1.2 如何编写proto1.3 数据类型及对应关系1.4 枚举1.5 数组1.6 map类型1.7 嵌套对象 二、SpringBoot gRPC2.1 工程目录2.2 jrpc-api2.2.1 引入gRPC依赖2.2.2 编写 .proto 文件2.2.3 使用插件机制生产proto相关…

CWE-611

CWE-611&#xff0c;也称为“URL Redirection to Untrusted Site (‘Open Redirect’)”&#xff0c;是一种常见的Web应用程序安全漏洞。这种漏洞出现在应用程序接受用户提供的URL作为重定向参数&#xff0c;并在未经充分验证的情况下直接将用户重定向到该URL时。攻击者可以利用…

Java 基础学习(十四)Map集合与Set集合

1 Map集合 1.1 Map接口 1.1.1 Map接口概述 Map接口是一种双列集合。Map的每个元素都包含一个键对象Key和一个值对象Value &#xff0c;键对象和值对象之间存在对应关系&#xff0c;这种关系称为映射&#xff08;Mapping&#xff09;。 Map接口中的元素&#xff0c;可以通过…

DC-6靶场

DC-6靶场下载&#xff1a; https://www.five86.com/downloads/DC-6.zip 下载后解压会有一个DC-3.ova文件&#xff0c;直接在vm虚拟机点击左上角打开-->文件-->选中这个.ova文件就能创建靶场&#xff0c;kali和靶机都调整至NAT模式&#xff0c;即可开始渗透 首先进行主…

【Transformer框架代码实现】

Transformer Transformer框架注意力机制框架导入必要的库Input Embedding / Out EmbeddingPositional EmbeddingTransformer EmbeddingScaleDotProductAttention(self-attention)MultiHeadAttention 多头注意力机制EncoderLayer 编码层Encoder多层编码块&#xff0f;前馈网络层…

【机器学习】密度聚类:从底层手写实现DBSCAN

【机器学习】Building-DBSCAN-from-Scratch 概念代码数据导入实现DBSCAN使用样例及其可视化 补充资料 概念 DBSCAN&#xff08;Density-Based Spatial Clustering of Applications with Noise&#xff0c;具有噪声的基于密度的聚类方法&#xff09;是一种基于密度的空间聚类算…

新手做抖店应该怎么做?应该注意些什么?踩坑避雷!

我是电商珠珠 新手做抖店&#xff0c;对于办理营业执照、选类目确定品&#xff0c;或是找达人这些&#xff0c;往往会在这上面吃很多亏。 我做抖店也已经三年了&#xff0c;关于抖店的玩法和规则这块也非常熟悉&#xff0c;这就来给大家讲讲我所踩的那些坑。 第一个&#xf…

自动化边坡监测设备是什么?

随着科技的不断进步&#xff0c;我们的生活和环境也在不断地发生变化。然而&#xff0c;自然灾害仍然是我们无法完全避免的风险。其中&#xff0c;边坡滑坡就是一种常见的自然灾害。为了保护人民的生命财产安全&#xff0c;科学家们研发出了自动化边坡监测设备。 WX-WY1 自动化…

C++基础-内存模型详解

目录 一、概述 二、内存分区模型分类 三、代码区 四、全局区 五、栈区

亚信安慧AntDB数据库引领中文信息处理标准化创新

近期&#xff0c;亚信科技旗下的AntDB数据库再获殊荣&#xff0c;成功通过GB 18030-2022《信息技术中文编码字符集》最高实现级别&#xff08;级别3&#xff09;的检测认证&#xff0c;成为首批达到该认证标准的数据库产品之一。这一认证不仅是对AntDB数据库卓越技术实力的肯定…

算法02哈希法

算法01之哈希法 1.哈希法理论基础1.1哈希表&#xff08;1&#xff09;哈希表&#xff08;2&#xff09;哈希函数&#xff08;3&#xff09;哈希碰撞 1.2哈希法基本思想1.3哈希法适用场景与最常用的哈希结构 2.LeetCode242&#xff1a;有效的字母异位词&#xff08;1&#xff09…

《每天一分钟学习C语言·三》

1、 scanf的返回值由后面的参数决定scanf(“%d%d”,& a, &b); 如果a和b都被成功读入&#xff0c;那么scanf的返回值就是2如果只有a被成功读入&#xff0c;返回值为1如果a和b都未被成功读入&#xff0c;返回值为0 如果遇到错误或遇到end of file&#xff0c;返回值为EOF…