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.rhkb.cn/news/223916.html

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

相关文章

基于SpringBoot + Vue的图书管理系统

功能概述 该图书管理系统提供了一系列功能&#xff0c;包括图书管理、图书类型管理、读者借阅归还图书、用户管理和重置密码等。 在图书管理功能中&#xff0c;管理员可以方便地进行图书信息的管理。他们可以添加新的图书记录&#xff0c;包括书名、作者、出版社、ISBN等信息&a…

MacOS+Homebrew+iTerm2+oh my zsh+powerlevel10k美化教程

MacOS终端 你是否已厌倦了MacOS终端的大黑屏&#xff1f; 你是否对这种美观的终端抱有兴趣&#xff1f; 那么&#xff0c;接下来我将会教你用最简单的方式来搭建一套自己的终端。 Homebrew的安装 官网地址&#xff1a;Homebrew — The Missing Package Manager for macOS (o…

MySQL的事务-原子性

MySQL的事务处理具有ACID的特性&#xff0c;即原子性&#xff08;Atomicity)、一致性&#xff08;Consistency&#xff09;、隔离性&#xff08;Isolation&#xff09;和持久性&#xff08;Durability&#xff09;。 1. 原子性指的是事务中所有操作都是原子性的&#xff0c;要…

从mice到missForest:常用数据插值方法优缺点

一、引言 数据插值方法在数据处理和分析中扮演着至关重要的角色。它们可以帮助我们处理缺失数据&#xff0c;使得数据分析更加准确和可靠。数据插值方法被广泛应用于金融、医疗、社会科学等领域&#xff0c;以及工程和环境监测等实际应用中。 在本文中&#xff0c;我们将探讨三…

P4 音频知识点——PCM音频原始数据

目录 前言 01 PCM音频原始数据 1.1 频率 1.2 振幅&#xff1a; 1.3 比特率 1.4 采样 1.5 量化 1.6 编码 02. PCM数据有以下重要的参数&#xff1a; 采样率&#xff1a; 采集深度 通道数 ​​​​​​​ PCM比特率 ​​​​​​​ PCM文件大小计算&#xff1a; ​…

堆与二叉树(下)

接着上次的&#xff0c;这里主要介绍的是堆排序&#xff0c;二叉树的遍历&#xff0c;以及之前讲题时答应过的简单二叉树问题求解 堆排序 给一组数据&#xff0c;升序&#xff08;降序&#xff09;排列 思路 思考&#xff1a;如果排列升序&#xff0c;我们应该建什么堆&#x…

DLLNotFoundException:xxx tolua... 错误打印

DLLNotFoundException:xxx tolua... 错误打印 一、DLLNotFoundException介绍二、Plugins文件夹文件目录结构如下&#xff1a; 三、Plugins中的Android文件夹四、Plugins中的IOS文件夹这里不说了没测试过不过原理应该也是选择对应的平台即可五、Plugins中的x86和X86_64文件夹 一…

【贪心】买卖股票的最佳时机含手续费

/** 贪心&#xff1a;每次选取更低的价格买入&#xff0c;遇到高于买入的价格就出售(此时不一定是最大收益)。* 使用buy表示买入股票的价格和手续费的和。遍历数组&#xff0c;如果后面的股票价格加上手续费* 小于buy&#xff0c;说明有更低的买入价格更新buy。如…

先进制造身份治理现状洞察:从手动运维迈向自动化身份治理时代

在新一轮科技革命和产业变革的推动下&#xff0c;制造业正面临绿色化、智能化、服务化和定制化发展趋势。为顺应新技术革命及工业发展模式变化趋势&#xff0c;传统工业化理论需要进行修正和创新。其中&#xff0c;对工业化水平的判断标准从以三次产业比重标准为主回归到工业技…

Qt制作定时关机小程序

文章目录 完成效果图ui界面ui样图 main函数窗口文件头文件cpp文件 引言 一般定时关机采用命令行模式&#xff0c;还需要我们计算在多久后关机&#xff0c;我们可以做一个小程序来定时关机 完成效果图 ui界面 <?xml version"1.0" encoding"UTF-8"?>…

EA常见画图(类图、包图、构件图、状态图、顺序图、活动图)

EA常见活动图&#xff0c;状态图画法 类图:111&#xff08;1&#xff09;给关系添加注释&#xff08;2&#xff09;设置关系线样式 包图&#xff1a;&#xff08;1&#xff09;创建包图&#xff08;2&#xff09;在包中添加子包&#xff1a;&#xff08;3&#xff09;在包中添加…

微前端——无界wujie

B站课程视频 课程视频 课程课件笔记&#xff1a; 1.微前端 2.无界 现有的微前端框架&#xff1a;iframe、qiankun、Micro-app&#xff08;京东&#xff09;、EMP&#xff08;百度&#xff09;、无届 前置 初始化 新建一个文件夹 1.通过npm i typescript -g安装ts 2.然后可…

IDEA控制台乱码

报错情况&#xff1a; 报错原因&#xff1a;Idea的vm用的编码格式不一致&#xff1a;需要修改为UTF-8 你看Tomcat我之前下在后修改果&#xff0c;就没有报错&#xff0c;新人刚下载也有乱码问题 问题解决&#xff1a; 按我步骤来一定对 下面这俩文件打开输入&#xff1a; -D…

CSS-SVG-环形进度条

线上代码地址 <div class"circular-progress-bar"><svg><circle class"circle-bg" /><circle class"circle-progress" style"stroke-dasharray: calc(2 * 3.1415 * var(--r) * (var(--percent) / 100)), 1000" …

esp32使用lvgl,给图片取模显示图片

使用LVGL官方工具。 https://lvgl.io/tools/imageconverter 上传图片&#xff0c;如果想要透明效果&#xff0c;那么选择 输出格式C array&#xff0c;点击Convert进行转换。 下载.c文件放置到工程下使用即可。

Java开发框架和中间件面试题(1)

1.什么是Spring框架&#xff1f; Spring是一种轻量级框架&#xff0c;旨在提高开发人员的开发效率以及系统的可维护性。 我们一般说的Spring框架就是Spring Framework,它是很多模块的集合&#xff0c;使用这些模块可以很方便的协助我们进行开发。这些模块是核心容器、数据访…

3.[BUUCTF HCTF 2018]WarmUp1

1.看题目提示分析题目内容 盲猜一波~ &#xff1a; 是关于PHP代码审计的 2.打开链接&#xff0c;分析题目 给你提示了我们访问source.php来看一下 大boss出现&#xff0c;开始详细手撕~ 3.手撕PHP代码&#xff08;代码审计&#xff09; 本人是小白&#xff0c;所以第一步&…

解读SPP / SPPF / SimSPPF / ASPP / RFB / SPPCSPC

SPP与SPPF 一、SPP的应用的背景 在卷积神经网络中我们经常看到固定输入的设计&#xff0c;但是如果我们输入的不能是固定尺寸的该怎么办呢&#xff1f; 通常来说&#xff0c;我们有以下几种方法&#xff1a; &#xff08;1&#xff09;对输入进行resize操作&#xff0c;让他们…

案例144:基于微信小程序的自修室预约系统

文末获取源码 开发语言&#xff1a;Java 框架&#xff1a;SSM JDK版本&#xff1a;JDK1.8 数据库&#xff1a;mysql 5.7 开发软件&#xff1a;eclipse/myeclipse/idea Maven包&#xff1a;Maven3.5.4 小程序框架&#xff1a;uniapp 小程序开发软件&#xff1a;HBuilder X 小程序…

Unity手机移动设备重力感应

Unity手机移动设备重力感应 一、引入二、介绍三、测试成果X Y轴Z轴横屏的手机&#xff0c;如下图竖屏的手机&#xff0c;如下图 一、引入 大家对重力感应应该都不陌生&#xff0c;之前玩过的王者荣耀的资源更新界面就是使用了重力感应的概念&#xff0c;根据手机的晃动来给实体…