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

news2024/9/23 7:18:33

在这里插入图片描述

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

第一个坑是他有一个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.coloradmin.cn/o/1325037.html

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

相关文章

在使用mapstruct,想忽略掉List<DTO>字段里面的,`data` 字段的映射, 如何写ignore: 使用@IterableMapping

在使用mapstruct,想忽略掉List字段里面的,data 字段的映射, 如何写ignore 代码如下: public interface AssigmentFileMapper {AssigmentFileDTO assigmentFileToAssigmentFileDTO(AssigmentFile assigmentFile);AssigmentFile assigmentFileDTOToAssigmentFile(Assigment…

Notepad++:多行数据操作

1&#xff09;删除关键字之后&#xff08;或之前&#xff09;的所有字符 删除s之后&#xff08;包含s&#xff09;的所有内容&#xff1b;快捷键&#xff1a;s.*$ 替换成功 删除s之前&#xff08;包含s&#xff09;的所有内容&#xff1b;快捷键&#xff1a;^.*s 2&#xff09…

MAC苹果笔记本电脑如何彻底清理垃圾文件软件?

苹果电脑以其流畅的操作系统和卓越的性能而备受用户喜爱。然而&#xff0c;随着时间的推移&#xff0c;系统可能会积累大量垃圾文件&#xff0c;影响性能。本文将介绍苹果电脑怎么清理垃圾文件的各种方法&#xff0c;以提升系统运行效率。 CleanMyMac X是一款专业的Mac清理软件…

语音识别之百度语音试用和OpenAiGPT开源Whisper使用

0.前言: 本文作者亲自使用了百度云语音识别,腾讯云,java的SpeechRecognition语言识别包 和OpenAI近期免费开源的语言识别Whisper(真香警告)介绍了常见的语言识别实现原理 1.NLP 自然语言处理(人类语言处理) 你好不同人说出来是不同的信号表示 单位k 16k16000个数字表示 1秒160…

智能优化算法应用:基于水基湍流算法3D无线传感器网络(WSN)覆盖优化 - 附代码

智能优化算法应用&#xff1a;基于水基湍流算法3D无线传感器网络(WSN)覆盖优化 - 附代码 文章目录 智能优化算法应用&#xff1a;基于水基湍流算法3D无线传感器网络(WSN)覆盖优化 - 附代码1.无线传感网络节点模型2.覆盖数学模型及分析3.水基湍流算法4.实验参数设定5.算法结果6.…

Super访问父类成员

1 问题 当子类的成员变量或方法与父类同名时&#xff0c;可能模糊不清&#xff0c;应该怎么解决&#xff1f;如果子类重写了父类的某一个方法&#xff0c;我们又该怎么调用父类的方法&#xff1f; 2 方法 super调用成员属性&#xff1a; 当父类和子类具有相同的数据成员时&…

面向 NLP 任务的大模型 Prompt 设计

很久之前&#xff0c;我们介绍到&#xff0c;prompt是影响下游任务的关键所在&#xff0c;当我们在应用chatgpt进行nlp任务落地时&#xff0c;如何选择合适的prompt&#xff0c;对于SFT以及推理环节尤为重要。 不过&#xff0c;硬想不是办法&#xff0c;我们可以充分参考开源的…

小程序面试题 | 07.精选小程序面试题

&#x1f90d; 前端开发工程师&#xff08;主业&#xff09;、技术博主&#xff08;副业&#xff09;、已过CET6 &#x1f368; 阿珊和她的猫_CSDN个人主页 &#x1f560; 牛客高级专题作者、在牛客打造高质量专栏《前端面试必备》 &#x1f35a; 蓝桥云课签约作者、已在蓝桥云…

语音识别与人机交互:发展历程、挑战与未来前景

导言 语音识别技术作为人机交互领域的重要组成部分&#xff0c;近年来取得了巨大的发展。本文将深入研究语音识别与人机交互的发展历程、遇到的问题、解决过程、未来的可用范围&#xff0c;以及在各国的应用和未来的研究趋势。我们将探讨在这个领域&#xff0c;哪一方能取得竞争…

47 星南二楼

动态规划&#xff0c;相当于求解最长子序列问题 #include <iostream> using namespace::std; using std::cout; using std::cin; int n; int a[5100],dp[5100];int xnel(int n, int a[]) {int result 0;for(int i0; i<n; i){for(int j0; j<i; j){if(a[j]<a[…

每日一博 - Protobuf vs. Protostuff:性能、易用性和适用场景分析

文章目录 历史区别联系性能差异最佳实践场景分析小结 历史 对于Protostuff和Protobuf的关系&#xff0c;需要了解它们的起源和发展。 Protobuf&#xff08;Protocol Buffers&#xff09;是由Google开发的一种数据序列化格式&#xff0c;用于结构化数据的存储和交换。它最初是…

损失函数中正则化中的平方项的作用!!

正则化上的平方项 前言在损失函数中添加正则化项时&#xff0c;通常会使用平方项作为正则化项&#xff0c;原因主要有以下几点&#xff1a; 前言 在损失函数中添加正则化项的原因主要是为了防止过拟合。正则化是一种常用的防止过拟合的技术&#xff0c;它可以对模型的复杂度进…

java反射的实战教程(简单且高效)

1. 参考 建议按顺序阅读以下文章 学了这么久的java反射机制&#xff0c;你知道class.forName和classloader的区别吗&#xff1f; Java反射&#xff08;超详细&#xff01;&#xff09; 2. 实战 2.1 通过Class.forName()方法获取字节码 这个方法会去我们的操作系统寻找这个cl…

linux、widnows的免费局域网桌面远程工具之NoMachine

统信UOS、银河麒麟及其他的linux桌面系统/windows系统都可进行远程桌面操作使用。 1.先到官网下载https://downloads.nomachine.com/自己使用的软件版本。 2.首先下载windwos端的的版本64位进行安装&#xff0c;安装是先暂时退出windows的杀毒软件&#xff0c;以免提示你各种确…

RabbitMQ入门指南(三):Java入门示例

专栏导航 RabbitMQ入门指南 从零开始了解大数据 目录 专栏导航 前言 一、AMQP协议 1.AMQP 2.Spring AMQP 二、使用Spring AMQP实现对RabbitMQ的消息收发 1.案例准备阶段 2.入门案例&#xff08;无交换机&#xff09; 3.任务模型案例&#xff08;Work Queues&#xff0…

论文笔记:Accurate Localization using LTE Signaling Data

1 intro 论文提出LTELoc&#xff0c;仅使用信令数据实现精准定位 信令数据已经包含在已在LTE系统中&#xff0c;因此这种方法几乎不需要数据获取成本仅使用TA&#xff08;时序提前&#xff09;和RSRP【这里单位是瓦】&#xff08;参考信号接收功率&#xff09; TA值对应于信号…

5.6 Linux rsync 服务

1、rsync 概念介绍 官方网站&#xff1a;rsync rsync(Remote Sync) 是一个Unix/linux系统下的文件同步和传输工具。Rsync通过“rsync算法”提供了一个客户机和远程服务器的文件同步的快速方法。 采用C/S模式 端口tcp:873 a. rsync 特性 ① 可以镜像保存整个目录树和文件系…

月薪30k的软件测试工程师,是一个什么样的工作状态?

一位大佬的亲身经历 用了大概6年的时间&#xff0c;成为了年薪30w的测试开发。 回顾我从功能测试到测试开发的成长路径&#xff0c;基本上是伴随着“3次能力飞跃”实现的。 年名企大厂测试岗位内推文末获取&#xff01;2022年名企大厂测试岗位内推文末获取&#xff01; 第一…

OpenCV消除高亮illuminationChange函数的使用

学更好的别人&#xff0c; 做更好的自己。 ——《微卡智享》 本文长度为1129字&#xff0c;预计阅读4分钟 导语 上一篇《OpenCV极坐标变换函数warpPolar的使用》中介绍了极坐标变换的使用&#xff0c;文中提到过因为手机拍的照片&#xff0c;部分地方反光厉害。OpenCV本身也有一…

使用yarn安装electron时手动选择版本

访问1Password或者其他可以提供随机字符的网站&#xff0c;获取随机密码运行安装命令 操作要点&#xff0c;必须触发Couldnt find any versions for "electron" that matches "*"才算成功 将复制的随机密码粘贴到后面 例如&#xff1a;yarn add --dev elec…