微信小程序代码实现滚动条同步问题

作者：优雅的鼻涕泡 | 来源：互联网 | 2023-07-30 08:51

项目中需要实现与EXCEL中冻结一样的效果，即上边栏目和左侧栏目固定，数据区域上下或左右滚动。具体实现时采用了同步滚动条的方法，在WXML页面通过bindscroll和scroll-top

项目中需要实现与EXCEL中冻结一样的效果，即上边栏目和左侧栏目固定，数据区域上下或左右滚动。
具体实现时采用了同步滚动条的方法，
在WXML页面通过bindscroll 和 scroll-top

在js页面的bindscroll 事件中，通过setData设置页面绑定scroll-top值，初步实现了滚动同步的效果，但出现2个问题：
1.滚动的时候延迟较大，初步判断为setData后页面刷新有较大延迟
2.滚动停止后有错位现象

想请问各位，这个问题应该怎么改进；或者有其他方式方法可以做到这个效果？
另外，微信小程序里没法直接控制元素吗？

5 个解决方案

#1

做微信小程序开发的人这么少？

#2

无法直接控制dom元素，调试工具里面你获取不到dom，会报错

你可以用css的fixed定位来做，水平滚动才需要用到js控制

Web开发学习资料推荐
jqGrid事件
javascipt修改css级联样式表类和伪类样式

#3

引用 2 楼 showbo 的回复:

无法直接控制dom元素，调试工具里面你获取不到dom，会报错

你可以用css的fixed定位来做，水平滚动才需要用到js控制

Web开发学习资料推荐
jqGrid事件
javascipt修改css级联样式表类和伪类样式

谢谢版主的回答

不管是垂直滚动，或者水平滚动，只满足一个方向的同步确实不需要js控制，
但项目需要在一个页面实现水平和垂直2个方向分别同步，而js控制同步的时候有明显的延迟
现在寻求 改善延迟的方法

#4

我也遇到相同问题，请问楼主是否解决。

#5

引用 3 楼 forwin 的回复:

Quote: 引用 2 楼 showbo 的回复:

无法直接控制dom元素，调试工具里面你获取不到dom，会报错

你可以用css的fixed定位来做，水平滚动才需要用到js控制

Web开发学习资料推荐
jqGrid事件
javascipt修改css级联样式表类和伪类样式

谢谢版主的回答

不管是垂直滚动，或者水平滚动，只满足一个方向的同步确实不需要js控制，
但项目需要在一个页面实现水平和垂直2个方向分别同步，而js控制同步的时候有明显的延迟
现在寻求 改善延迟的方法

垂直fixed就行了，水平只能靠事件驱动，这个得靠微信支持了，而且明确说了不能频繁setData，会导致性能问题

而且小程序小程序，你搞这么麻烦就不适合小程序了，做个h5页面就好了

CSS表格固定表头示例

推荐阅读

dom
前端人员必须知道的三个问题及其发展阶段

本文介绍了前端人员必须知道的三个问题，即前端都做哪些事、前端都需要哪些技术，以及前端的发展阶段。初级阶段包括HTML、CSS、JavaScript和jQuery的基础知识。进阶阶段涵盖了面向对象编程、响应式设计、Ajax、HTML5等新兴技术。高级阶段包括架构基础、模块化开发、预编译和前沿规范等内容。此外，还介绍了一些后端服务，如Node.js。 ... [详细]

蜡笔小新 2023-12-12 12:45:59
input
实例详解CSS3实现弹幕

项目需要实现弹幕，网上参考了各种方法，最后觉得transform+transition实现的效果在移动设备上性能最好，在iphone6和红米4上测试，看不到 ... [详细]

蜡笔小新 2023-10-17 12:33:46
post
layui表格分页不生效怎么办

web前端|Layui教程layuiweb前端-Layui教程小程序实例源码,ubuntuip切换,tomcat默认端改为80,爬虫完整源码,微信小程序php接口,seo专业培训班 ... [详细]

蜡笔小新 2023-10-17 12:00:22
node.js
黄文俊：Serverless小程序后端技术分享

欢迎大家前往腾讯云+社区，获取更多腾讯海量技术实践干货哦~黄文俊，现任腾讯云SCF无服务器云函数高级产品经理，多年企业级系统开发和架构工作经验，对企业级存储、容器平台、微服务架构、无服务器计 ... [详细]

蜡笔小新 2023-10-12 19:41:44
数组
微信小程序实战之菜谱小程序

最近突发奇想，想要自己搞个小程序玩儿玩儿，但是鉴于自己是搞后端服务器出身，对于偏前端的微信小程序开发实在是一知半解，尤其是对于css类样式相关，更是无从下手，于是乎，只能从晚上找了 ... [详细]

蜡笔小新 2023-09-25 21:24:15
数组
微信小程序Demo导入的示例分析

小编给大家分享一下微信小程序Demo导入的示例分析，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有 ... [详细]

蜡笔小新 2023-09-25 12:14:11
post
微信民众号商城/小顺序商城开源项目介绍及使用教程

本文介绍了一个基于WeiPHP5.0开发的微信民众号商城/小顺序商城的开源项目，包括前端和后端的目录结构，以及所使用的技术栈。同时提供了项目的运行和打包方法，并分享了一些调试和开发经验。最后还附上了在线预览和GitHub商城源码的链接，以及加入前端交流QQ群的方式。 ... [详细]

蜡笔小新 2023-12-09 08:45:47
python
微信小程序订阅消息对接详细记录

起因由于我录制过一个小程序的课程，里面有消息模板的讲解。最近有几位同学反馈官方要取消消息模板，使用订阅消息。为了方便大家容易学 PythonFlask构建微信小程序订餐系统课程。 ... [详细]

蜡笔小新 2023-10-17 17:27:38
python
使用flex弹性布局来为微信小程序写自适应页面

我们知道，写习惯了前端的人，一般切图后布局页面的话，上手最习惯的是基于盒子模型的浮动布局，依赖display属性positi ... [详细]

蜡笔小新 2023-10-17 17:06:23
python
微信小程序实现简易计算器功能_javascript技巧

这篇文章主要为大家详细介绍了微信小程序实现简易计算器功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的 ... [详细]

蜡笔小新 2023-09-24 12:08:32
export
微信小程序实现星级评分与展示

这篇文章主要为大家详细介绍了微信小程序实现星级评分与展示，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的 ... [详细]

蜡笔小新 2023-09-23 14:29:47
list
小程序中如何实现弹出菜单功能

这篇文章给大家分享的是有关小程序中如何实现弹出菜单功能的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。需求点击 ... [详细]

蜡笔小新 2023-09-23 12:41:09
list
我的java微信小程序后台

以前都是用php开发微信公众号，很少有人用java来做,我用java来做了一个微信小程序的后台，前端是一个微信商城,没有开发完，但是已经封装了取得openid,wechat-master目录 ... [详细]

蜡笔小新 2023-09-17 13:39:51
list
微信小程序之仿android fragment之可滑动的底部导航栏实例 —— 微信小程序实战系列（4）

底部3-5个选项的底部导航栏，目前在移动端上是主流布局之一因此腾讯官方特地做了，可以通过设置，就可以做出了一个底部的导航栏相关教程：http:blog.csdn.netmichael_ou ... [详细]

蜡笔小新 2023-09-17 10:00:28
数组
微信小程序学习笔记-3-问题

一些在开发微信小程序中常见的问题页面渲染　　微信小程序中规定所有页面上渲染出来的数据，包括文字和图片皆包含在在每个页面文件夹中的js文件中的page这个内置函数的参数data中， ... [详细]

蜡笔小新 2023-09-16 17:25:35

优雅的鼻涕泡

这个家伙很懒，什么也没留下！

Tags | 热门标签

RankList | 热门文章