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; 以此类推。底部,最左,最右;

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

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

Achronix提供由FPGA赋能的智能网卡(SmartNIC)解决方案来打破智能网络性能极限

作者&#xff1a;Achronix 随着人工智能/机器学习&#xff08;AI/ML&#xff09;和其他复杂的、以数据为中心的工作负载被广泛部署&#xff0c;市场对高性能计算的需求持续飙升&#xff0c;对高性能网络的需求也呈指数级增长。高性能计算曾经是超级计算机这样一个孤立的领域&a…

【控制器局域网】CAN报文学习笔记(四)之 字节排序、信号提取实例1

以下面的表格来表示字节顺序和位顺序&#xff0c;用红色表示高位MSB&#xff0c;蓝色表示低位LSB&#xff0c;绿色为LSB到MSB的过度 Bit oderMSB→→→→→→LSBByte oder\Bit7Bit6Bit5Bit4Bit3Bit2Bit1Bit0MSBByte076543210↓Byte115141312111098↓Byte22322212019181716↓By…

谷歌手机安装证书到根目录

1、前提你已经root&#xff0c;安装好面具 2&#xff0c;下载movecert模块&#xff0c;自动帮你把证书从用户证书移动成系统证书 视频教程&#xff0c;手机为谷歌手机 https://www.bilibili.com/video/BV1pG4y1A7Cj?p11&vd_source9c0a32b00d6d59fecae05b4133f22f06 软件下…

【C语言指针专题(4)】指针与一维数组

一、数组名的理解 在之前我们我们使用指针访问数组的时候&#xff0c;使用到了这样一段代码&#xff1a; int arr[10] { 0 }; int* pa &arr[0]; 这里我们使用 &arr[0] 的方式拿到了数组第一个元素的地址&#xff0c;但是其实数组名本来就是地址&#xff0c;而且 是…

使用opencv实现图像中几何图形检测

1 几何图形检测介绍 1.1 轮廓(contours) 什么是轮廓&#xff0c;简单说轮廓就是一些列点相连组成形状、它们拥有同样的颜色、轮廓发现在图像的对象分析、对象检测等方面是非常有用的工具&#xff0c;在OpenCV 中使用轮廓发现相关函数时候要求输入图像是二值图像&#xff0c;这…

麒麟V10 ARM 离线生成RabbitMQ docker镜像并上传Harbor私有仓库

第一步在外网主机执行&#xff1a; docker pull arm64v8/rabbitmq:3.8.9-management 将下载的镜像打包给离线主机集群使用 在指定目录下执行打包命令&#xff1a; 执行&#xff1a; docker save -o rabbitmq_arm3.8.9.tar arm64v8/rabbitmq:3.8.9-management 如果懒得打包…

力扣:77. 组合(回溯, path[:]的作用)

题目&#xff1a; 给定两个整数 n 和 k&#xff0c;返回范围 [1, n] 中所有可能的 k 个数的组合。 你可以按 任何顺序 返回答案。 示例 1&#xff1a; 输入&#xff1a;n 4, k 2 输出&#xff1a; [[2,4],[3,4],[2,3],[1,2],[1,3],[1,4], ] 示例 2&#xff1a; 输入&…

机器学习数据的清洗,转化,汇总及建模完整步骤(基于Titanic数据集)

目录 介绍&#xff1a; 一、数据 二、检查数据缺失 三、数据分析 四、数据清洗 五、数据类别转化 六、数据汇总和整理 七、建模 介绍&#xff1a; 线性回归是一种常用的机器学习方法&#xff0c;用于建立一个输入变量与输出变量之间线性关系的预测模型。线性回归的目标…

Inkscape SVG 编辑器 导入 Gazebo

概述 本教程描述了拉伸 SVG 文件的过程&#xff0c;这些文件是 2D 的 图像&#xff0c;用于在 Gazebo 中为您的模型创建 3D 网格。有时是 更容易在 Inkscape 或 Illustrator 等程序中设计模型的一部分。 在开始之前&#xff0c;请确保您熟悉模型编辑器。 本教程将向您展示如…

神经网络:池化层知识点

1.CNN中池化的作用 池化层的作用是对感受野内的特征进行选择&#xff0c;提取区域内最具代表性的特征&#xff0c;能够有效地减少输出特征数量&#xff0c;进而减少模型参数量。按操作类型通常分为最大池化(Max Pooling)、平均池化(Average Pooling)和求和池化(Sum Pooling)&a…

使用STM32微控制器读取和显示DHT11温湿度传感器数据

在本文中&#xff0c;我们将介绍如何使用STM32微控制器读取和显示DHT11温湿度传感器的数据。我们将使用C语言和STM32的库函数来实现这个功能。本文包含硬件连接和软件编程两个方面的内容。 硬件连接 首先&#xff0c;我们需要将DHT11温湿度传感器连接到STM32微控制器上。DHT11…

基于ASF-YOLO融合空间特征和尺度特征的新型注意力尺度序列融合模型开发构建涵洞隧道场景下墙壁建筑缺陷分割检测系统

在ASF-YOLO提出之初&#xff0c;我们就进行了相应的实践开发&#xff0c;感兴趣的话可以自行移步阅读&#xff1a; 《基于ASF-YOLO融合空间特征和尺度特征的新型注意力尺度序列融合模型开发构建医学场景下细胞分割检测识别系统&#xff0c;以【BCC、DSB2018数据集为基准】》 …

性能压力测试--确保企业数字化业务稳健运行

随着企业的数字化转型和依赖云计算的普及&#xff0c;软件系统的性能已经成为企业成功运营的关键因素之一。性能压力测试作为确保系统在各种条件下都能高效运行的关键步骤&#xff0c;对企业的重要性不可忽视。以下是性能压力测试对企业的几个重要方面的影响和作用&#xff1a;…

行为型设计模式(二)责任链模式 策略模式

责任链模式 Chain of Responsibility 1、什么是责任链模式 责任链模式为请求创建一个接收者对象的链&#xff0c;每个接收者都包含对另一个接收者的引用。如果一个对象不能处理请求&#xff0c;它会将请求传递给链中的下一个接收者&#xff0c;如此模式下&#xff0c;请求沿着…

机器视觉工程师,我存多少钱可以躺平

钱钱钱&#xff01;还是钱&#xff01;除了钱还能聊点别的吗&#xff1f;钱可以让你生活的更好&#xff0c;也可以让你​在生活中的选择很无奈。 如果想要知道拥有多少存款才能躺平不上班&#xff0c;那么首先要明确躺平的定义。所谓的躺平&#xff0c;其实并不代表不能工作&a…

ASP.NET Core面试题之Redis高频问题

&#x1f388;&#x1f388;在.NET后端开发岗位中&#xff0c;如今也少不了、微服务、分布式、高并发高可用相关的面试题&#x1f388;&#x1f388; &#x1f44d;&#x1f44d;本文分享一些整理的Redis高频面试题&#x1f389; &#x1f44d;&#x1f44d;机会都是给有准备…

WPF——样式和控件模板、数据绑定与校验转换

样式和控件模板 合并资源字典 Style简单样式的定义和使用 ControlTemplate控件模板的定义和使用 定义 使用 Trigger触发器 数据绑定与校验转换 数据绑定的设置 代码层实现绑定 数据模板DataTemplate xml文件的读取与显示 方法的返回值作为源绑定到控件中ObjectDataProvider L…

Axure之中继器的使用(交互动作reperter属性Item属性)

目录 一.中继器的基本使用 二.中继器的动作&#xff08;增删改查&#xff09; 2.1 新增 2.2 删除 2.3 更新行 2.4 效果展示 2.5 模糊查询 三.reperter属性 在Axure中&#xff0c;中继器&#xff08;Repeater&#xff09;是一种功能强大的组件&#xff0c;用于创建重复…

ES集群G1回收器,堆空间无法被回收问题

ES堆空间不足的问题&#xff0c;困扰了我有两年的时间。dump堆去分析&#xff0c;也未能分析出来&#xff0c;堆到底是被什么占用了。 我把堆空间给了31.9G&#xff0c;这是指针压缩生效的临界值&#xff0c;如果再大就指针压缩失效了。 痛苦的是&#xff0c;随着时间的增长。堆…

【HarmonyOS开发】ArkTs关系型和非关系型数据库的存储封装

前面使用了首选项的存储方式&#xff0c;因此将其他的两种存储方式&#xff08;键值型数据库和关系型数据库&#xff09;也学习一下&#xff0c;简单记录一下&#xff0c;并进行封装&#xff0c;方便后续使用。 1、效果预览 2、使用条件 2.1 键值型数据库 键值型数据库实现数据…