多个scroll-view绑定

在做项目过程中遇到一个问题，需要做一个类似table的表格，但是uni-app好像没有table的组件，所以还是只能从scroll-view上做文章

功能描述

1、内容区可以上下和左右滑动
2、table head 需要和table body需要同步实现左右滑动
3、body上下滑动时，head不能被顶上去

解决方法

如果把head和body放在同一个scroll-view中，可以完美实现左右滑动的同步（好像是废话），但是上下滑动的话，head就会被顶上去，就导致不能快速确定内容所对应的标题名称，尤其是数据量很大时，会大大降低使用体验。
所以，我就想到了使用两个scroll-view组件，一个做head,只能左右滑动，一个做body，可以上下左右滑动。如此的话，需要让两个scroll-view实现左右滑动的绑定。scroll-view有一个属性scroll-left,它的作用是设置横向滚动条位置。只需要绑定![](https://img-blog.csdnimg.cn/20190924142422293.png)
只需要绑定这两个scroll-view的scroll-left属性，就能够实现左右滑动的同步（伪同步）。
但是这种方法有点瑕疵，这也是我为什么认为这是伪同步。比如滑动head时，由于把head的scroll-left传递给body的scroll-left需要时间，就导致body的滑动慢那么一拍，反过来也是这样。

双向绑定的bug

scroll-left的值是通过@scroll事件获取的。刚开始两个scroll-view都添加了@scroll时间，目的是为了实现不论是滑动head还是body，都能实现同步，当数据量只有一二十条时，问题还没出来，当时当数据量逐渐变大，问题就暴露了，尤其是在真机上调试时。数据量越大，抖动的频率越高，时间越长。
出现上述状况的原因是两个scroll-view都添加了@scroll事件，当其中一个滑动，带动另一个滑动，都响应了@scroll,于是两个scroll-left互传，你给我一个值，我给你一个值，产生了逻辑bug。
解决办法就是取消一个@scroll事件，我是取消了head的@scroll，这样滑动body时，head的scroll-left不会反向传给body。缺点是滑动head，不能带着body一起滑动。不过滑动body时，不管head错位有多大，最后都能对齐，也算是达到了想要的效果。

其他

项目中我使用的是scroll-left，目的是为了实现左右滑动的绑定，同理，如果想要实现上下滑动的绑定，可以使用scroll-top。

uni-app踩坑记录相关推荐

HbuilderX:uni app踩坑之uView-ui
HbuilderX:uni app踩坑之uView-ui 最近在自学uniapp,想找一个ui框架提高一下学习和开发的效率,于是就网上冲浪,浪来浪去,最后选择了uView-ui这款.其实有些框架我是有 ...
uniapp开发聊天APP踩坑记录
最近工作重心转移到了uniapp上,有一说一,这个框架跨端确实牛逼,一套代码能一次编译到多端使用.但随之而来的兼容性问题也是层出不穷,同样的在面临APP底层的改动也显得力不从心.同时,uniapp的性 ...
uni-app真坑 uni.scss踩坑记录
希望设计这块的产品进来被骂希望开发这块的程序员进来被骂希望所有偷懒耍滑的程序员进来被骂希望uni-app的负责人进来被骂希望uni-app的老板进来被骂你们脑子都进水了吗??? 每个scss ...
uni-app 开发安卓app踩坑记录
uni-app离线打包android -- 官方文档 Android studio打包apk后弹窗提示"打包时未添加ui模块" 在工程应用目录的build.gradle文件中bui ...
微信开放标签wx-open-launch-app唤醒app踩坑记录,launch:fail问题解决
微信开放标签调试了一天,各方面都正常,但是一直报错launch:fail,百思不得其解,早网上搜答案,辛得指点,原来问题如下如果要唤醒app,必须使用sdk生成的卡片,或者使用微信开发者工具的浏览功 ...
【STM32+机智云】机智云手机APP点灯实验踩坑记录
[STM32+机智云]机智云手机APP点灯实验踩坑记录一.实验背景因为项目开发需要用到云平台,所以开始学习机智云平台,听说机智云比较容易入门,还有手机APP.因此开始了踩坑之旅,一切的一切开始于一 ...
TVM: Deep Learning模型的优化编译器(强烈推荐, 附踩坑记录)
本文作者是阿莱克西斯,原载于知乎,雷锋网(公众号:雷锋网)获得授权转载. (前排提醒,本文的人文内容部分稍稍带有艺术加工,请保持一定的幽默感进行阅读) 关注我最近想法的同学应该知道我最近都在把玩 TV ...
vue-i18n使用及踩坑记录
使用步骤 1. 安装 npm i vue-i18n 2. vue-cli下使用 //1. 引入 vue-i18n import Vue from 'vue' import VueI18n from ' ...
转：android.support升级到androidx踩坑记录
原文链接:android.support升级到androidx踩坑记录 - 简书年前想着Google老大之前提醒过将项目升级到androidx,所以年前一通操作猛如虎把Android Studio唰 ...
日常踩坑记录-汇总版
开发踩坑记录,不定时更新心得 RTFM 严谨的去思考问题,处理问题严格要求自己的代码编写习惯与风格注意单词拼写 20200207 mybatis plus 自带insert插入异常 sql i ...

uni-app踩坑记录

uni-app问题记录——scroll-view组件

多个scroll-view绑定

功能描述

解决方法

双向绑定的bug

其他

uni-app踩坑记录相关推荐

最新文章

热门文章