开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

原生脚本-Vue ScrollView可滚动高度始终为0。我的目标是滚动到底部，因为它是一个聊天应用程序

原生脚本-Vue ScrollView可滚动高度始终为0是指在使用Vue框架中的ScrollView组件时，出现了无法滚动到底部的问题。下面是对这个问题的完善且全面的答案：

问题描述：在使用Vue框架中的ScrollView组件时，发现可滚动高度始终为0，导致无法滚动到底部。

解决方案：

确保ScrollView组件的父元素具有固定的高度，否则ScrollView无法正常工作。
检查ScrollView组件的内容是否超出了父元素的高度，如果没有超出，则无法滚动。可以通过设置内容的高度或添加更多内容来测试是否可以滚动。
确保ScrollView组件的样式属性overflow设置为auto或scroll，以启用滚动功能。
检查是否有其他CSS样式或JavaScript代码干扰了ScrollView组件的滚动行为，可以尝试暂时移除其他代码，看是否能解决问题。
确保ScrollView组件的滚动事件绑定正确，可以使用Vue的@scroll事件监听滚动事件，并在事件处理函数中进行相应的操作。

推荐的腾讯云相关产品：腾讯云提供了一系列与云计算相关的产品和服务，以下是一些推荐的产品和产品介绍链接地址：

云服务器（CVM）：提供弹性计算能力，满足各种规模和业务需求。产品介绍链接：https://cloud.tencent.com/product/cvm
云数据库MySQL版（CDB）：提供高性能、可扩展的关系型数据库服务。产品介绍链接：https://cloud.tencent.com/product/cdb_mysql
云存储（COS）：提供安全可靠、高扩展性的对象存储服务。产品介绍链接：https://cloud.tencent.com/product/cos
人工智能机器学习平台（AI Lab）：提供丰富的人工智能算法和模型，支持开发者进行机器学习和深度学习的应用开发。产品介绍链接：https://cloud.tencent.com/product/ailab

请注意，以上推荐的产品和链接仅供参考，具体选择和使用需根据实际需求进行评估和决策。

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

仿腾讯课堂固定滚动列表ReactNative组件

说道这里，我尝试着写了个测试js例子，最外面套一个ReactNative自带的ScrollView并设置视频播放控件的高度为200和 Tab导航控件的style={{height: windowHeight...- 80}}，那这样滚动距离到120时，滚动条到底部了，视频播发控件的区域距离屏幕顶部还有80。...跑起来运行后发现的一个严重的问题是，如果Tab导航控件的内容区域存在ScrollView或者ListView时，无法滚动，只有最外层可以滚动，也就是手势滚动被拦截了？...一开始想两种大的思路：一种是完全靠JS层面，通过ScrollView暴露的API去实现，第二种是原生+JS，这里涉及到几个关键的东西，如何寻找Tab导航控件中的ScrollView或者ListView和控制手势实现的效果...一个是怎么判断手势滑动以及外层滚动容器到底部和内层滚动到顶部？第二个是寻找滚动组件并通知内层滚动组件开始滚动？

4.8K7 0

深入了解 SwiftUI 5 中 ScrollView 的新功能

不限于 ScrollView，支持所有可滚动容器（包括 List、TextEditor 等）。将可滚动容器内的所有子视图视为一个整体，并为其添加 margin。...例如，在下面的代码中，为 ScrollView 的 leading 方向添加安全区域的两种方式效果是一致的。...例如，下面的两种实现中，ScrollView 的底部空间是不同的。....automatic 是默认行为，在紧凑的水平尺寸类中受限，否则不受限。 .always 始终限制可滚动视图的数量。 .never 不限制可滚动视图的数量。...就我个人而言，在 SwiftUI 5 中，ScrollView 的原生方案已经能够满足大多数需求，因此我们将看到更多人采用 ScrollView + LazyStack 的组合方式。

6772 0

Android中文API——ScrollView

protected int computeVerticalScrollRange () 滚动视图的可滚动范围是所有子元素的高度。...返回值由垂直方向滚动条代表的所有垂直范围，缺省的范围是当前视图的画图高度。 protected float getBottomFadingEdgeStrength () 返回滚动底部的能见度。...能见度的值的范围是0.0（没有消失）到1.0（完全消失）之间。缺省的执行返回值为0.0或者1.0，而不是他们中间的某个值。滚动时子类需要重载这个方法来提供一个平缓的渐隐的实现。...能见度的值的范围是0.0（没有消失）到1.0（完全消失）之间。缺省的执行返回值为0.0或者1.0，而不是他们中间的某个值。滚动时子类需要重载这个方法来提供一个平缓的渐隐的实现。...如果只是添加到视图，调用时显示的是旧值0。（译者注：也就是添加到视图时，oldw和oldh返回的是0）。

4.5K3 0

【Android从零单排系列二十六】《Android视图控件——ScrollView》

一 ScrollView基本介绍 ScrollView是Android平台上的一个可滚动视图容器，它用于在一个可滚动区域内显示大量内容。...二 ScrollView使用方法在XML布局文件中定义ScrollView容器。在需要可滚动内容的区域内添加ScrollView标签，并指定其宽度、高度以及其他属性。...为了让ScrollView正常工作，内容视图的高度应根据其内容进行适当调整。您可以通过设置高度为"wrap_content"或固定高度，或使用权重来控制内容视图的高度。...常见方法： scrollTo(int x, int y)：将ScrollView滚动到指定的位置，参数x和y分别代表目标位置的水平和垂直偏移量。...fullScroll(int direction)：使ScrollView滚动到指定的边界，参数direction可以是View.FOCUS_UP（滚动到顶部）或View.FOCUS_DOWN（滚动到底部

3392 0

Android带你解析ScrollView--仿QQ空间标题栏渐变

中可看的这个效果 android:scrollY 以像素为单位设置垂直方向滚动的的偏移值 android:scrollbarAlwaysDrawHorizontalTrack 设置是否始终显示垂直滚动条...ScrollView滑动监听： Google并没有给我们提供ScrollView的滑动距离、是否滑动到布局底部、顶部的方法，但是提供了一个onScrollChanged方法： @Override...ScrollView，包裹着一张背景图片和一个ListView（ListView重写为不可以滑动）,然后布局的上面有一个TextView当做标题栏，你也可以用布局。...image.png 然后我们需要获取图片的高度，并且设置滚动监听，随着滚动的距离来设置标题栏的颜色透明度和字体颜色的透明度 /** * 获取顶部图片高度后，设置滚动监听 */...https://github.com/Hankkin/GradationTitleBar 项目里面我还添加了一个带banner的，原理是一样的。

1.5K1 0

写了个自定义指令，支持elementUI2.0下拉框组件虚拟列表显示

，由于数据是按需加载，所以我们首先就要明白如何实现虚拟列表，具体可以参考以前写的一篇文章了解虚拟列表背后原理，轻松实现虚拟列表快速实现页面我们是使用vue-cli2快速搭建了一个基本项目我们可以非常清晰的看到右侧下拉测试...scrollView: null // 滚动容器 } } } } 从指令配置所需要的参数来看，主要是以下几个关键字段： viewHeight可视区域的高度 rowHeight当前行的默认高度...px`; 用一张图还原一下，为什么需要设置scrollView的高度，以及当内部容器滚动时，我们需要给内部设置一个paddingTop,不然显示就会有空白块 3、确定当前滚动的起始位主要是当我们滚动容器时...，将滚动的当前位置设置为起始位置 if (currentIndex !...this.renderOptions(); } 但是我们注意到，这里我们重置了scrollView的paddingTop,因为我们在滚动时设置了paddingTop,所以此时我们需要重置paddingTop

2.1K2 0

MyLayout&TangramKit 的重大升级!

].active = YES; //6.关键的一步，如果需要上下滚动则将容器视图中的最底部子视图这里是C的底部边界依赖于容器视图的底部边界。...要实现UIScrollView滚动时，只需要在一个滚动视图内添加一个布局视图，然后将所有其他子视图都添加到这个布局视图中去，这个和上面的AutoLayout的处理方式是一样的，最后将布局视图的尺寸自适应属性设置为...的布局体系是基于原生的frame的计算来实现布局，而AutoLayout则不再依赖frame而是依赖视图之间的约束来是实现布局。...这里只介绍将MyLayout&TangramKit的布局视图加入到AutoLayout布局体系中去的一些方法。 1.将布局视图添加到非布局父视图中因为布局视图也是一个视图，都是从UIView派生。...，这里不需要设置高度约束，因为使用了布局视图的高度自适应属性。

2K2 0

Android的FixScrollView自定义控件

-20170331111723820-1491053367.gif 基本思路：是最外层有个父ScrollView,子tab页面中有ListView（React-native原生实现也是ScrollView...），现在外部的ScrollView设定一个固定高度（屏幕高度+视频高度一半），接下来解决的难点是要使用原生的父ScrollView根据手势以及父ScrollView滚到底部判断是否把事件分发给子页面中ListView...接下来要了解几个知识点， ①了解下Android事件分发的机制 ②了解哪些触摸类型事件以及之间的联系 ③如何在ViewGroup中寻找子控件（递归找一个具体的控件大坑，尤其是再React-Native...这一个过程为同一个事件系列，如果在onInterceptTouchEvent中返回false，那么所有的事件都不会再交给ViewGroup的的onTouchEvent。...在整个屏幕中的坐标如果x==0的话代表这个scrollview是正在显示 int[] location = new int[2];

1.8K8 0

Scroll，你玩明白了嘛？

2.3 注意 1、在可滚动的容器上设置了 scroll-behavior: smooth 之后，其优先级是高于 JS 方法的。...2、在可滚动的容器上设置了 scroll-behavior: smooth 之后，还能够影响到浏览器 Ctrl+F 的表现，使其也呈现平滑滚动的效果。...而且相较于其他的方法，一般不会出什么幺蛾子（后文会讲到）。 3.2 应用自己以往需要用到滚动的场景有：组件初始化，定位到目标位置点击当前页靠底部的某个元素，触发滚动翻页 .........比如说置顶某个元素，可以定义可滚动容器的 scrollTop 为该元素的 offsetTop： container.scrollTop = element.offsetTop; 值得一提的是，结合 CSS...1、定义一个长列表，并通过 useRef 记录：滚动容器的 ref 脚本滚动的判断变量 isScriptScroll 当前的滚动位置 scrollTop 2、接着，为滚动容器绑定一个 onScroll

3.1K2 1

微信小程序实践：2.3 可滚动的容器组件之 scroll-view

关于这个组件，有以下几个问题值得思考： 1，当我们说滚动时，涉及到外面的滚动容器与里面的可滚动实体两个对象，我们说滚动到顶部、滚动到底部，指的是什么呢？是什么到顶部，什么到底部了？...默认情况下，WXS在视图层执行，与页面JS中的代码不是一路的，后者是在逻辑层执行的。如微信官方文档所讲，WXS是一套不一样的脚本语言，它是WeXin Script的简写。...拿到windowHeight之后，它还不是scroll-view应有的高度，因为页面上还可能有自定义的底部导航栏、顶部导航栏，这些高度也要减去。...因为这些原因，给scroll-view设置高度，在不同页面是不一样的，必须区别对待。 5.7，scroll-view 内不支持嵌套原生组件吗？...不支持也情有可原，因为要滚动，普通组件与原生组件都不在一个层，一个要上面，一个要下面，怎么同步？网上有人说，小程序scroll-view不支持嵌套textarea等组件，那是旧版本。

14.4K3 0

React Native之ScrollView控件详解

概述 ScrollView在Android和ios原生开发中都比较常见，是一个滚动视图控件。在RN开发中，系统也给我们提供了这么一个控件。...不过在RN开发中，使用ScrollView必须有一个确定的高度才能正常工作，因为它实际上所做的就是将一系列不确定高度的子组件装进一个确定高度的容器（通过滚动操作）。...所以，要给一个ScrollView确定一个高度的话，要么直接给它设置高度（不建议），要么确定所有的父容器都已经绑定了高度。在视图栈的任意一个位置忘记使用{flex:1}都会导致错误。...8：onContentSizeChange function 此函数会在ScrollView内部可滚动内容的视图发生变化时调用。...更大的数值能够更及时的跟踪滚动位置，不过可能会带来性能问题，因为更多的信息会通过bridge传递。默认值为0，意味着每次视图被滚动，scroll事件只会被调用一次。

5.8K7 0

实现图文消息的正确加载

问题分析如下图所示，我们点开一个聊天窗口，最后一条消息是图片，滚动条位置计算有误，没有触底，导致图片没有显示完全，在上拉加载历史消息时也是因为图片导致的滚动条位置计算失误，没有正确定位到上次浏览的消息位置...如上述代码所示，我们在nextTick回调中获取了消息容器的滚动区域高度，然后修改滚动条位置为滚动区域高度，这样滚动条就会触底了，逻辑上没问题，而且在纯文字的消息中是正常的。...此时，我们就找到了问题，那么我们就可以得到下述解决思路：获取页面内的所有聊天图片遍历获取到的图片每一张图片加载完成后就获取可滚动容器的高度，然后修改滚动条位置滚动条触顶分析触顶加载数据时，也是因为图片的缘故...经过一番思考后，我想到了一个解决方案，既然等图片加载完行不通，那我就用定时器吧。 nextTick()后，等待150ms，然后获取消息容器的可滚动高度....，是因为我发现当加载的消息超过20页时，等待150ms已经拿不到正确的可滚动容器高度了，需要等待400ms。

1.3K3 0

iOS开发常用之网络

TextProgress - 自定义实现数字进度条：1，可以自定义数字（0-100），填充的比例为当前设置的数字，2，可以实现自定义填充颜色，上下部分都可以，3，可以自定义边界的颜色4，实现了水波动画...SwiftyFORM - swift表单输入框架（亮点是表单验证规则引擎），是我见过地最易用的Swift表单组件。...LayoutTrait - swift一个小类库。做iPad多任务分屏适配的同学可以看一下。 HACursor - HACursor，是一个对横向ScrollView中的视图进行管理的UI控件。...BEMCheckBox - BEMCheckBox是一款用于iOS应用的构造漂亮，高度可定制化的动画效果的复选框类，最低支持到iOS 7系统，有多种不同风格的动画效果可供选择。...ADo_GuideView - 转动的用户引导页（模仿网易bobo）因为没有从应用程序包里抓到@ 3x的图片，建议在iPhone5模拟器运行，保证效果〜（版本新特性，导航页，引导页）。

23.6K1 0

这一次，彻底解决滚动穿透

首先，一般而言滚动不是我们自己监听事件去改变元素的位置而实现的，当我们设置 overflow:scroll/auto时，实际上是浏览器原生实现的滚动效果。...由此可见，滚动穿透问题其实并不是一个浏览器的bug（虽然在ios下fixed定位确实会导致很多bug），它是完全符合规范的，滚动的原则应该是 scrollforwhat can scroll，不应该因为某个元素的...我们可以在加入 overflow:hidden的同时选择性做：将 html,body的高度设置为 100% 将 html,body设置为绝对定位这两个操作都可以完美地禁止整个body的滚动，但带来的最大问题是...（请注意蒙层出现时，底部列表发生的变化）在这个交互过程中，浮层弹出时，底部列表首先滚动条被置为初始态，关闭浮层后重置为之前的记录位置。...这样一来只需要在可滚动的容器上加入 can-scroll类名即可滚动，但是这种滚动又随之带来一个问题：当滚动到元素顶部和底部再继续滚动时，又会触发滚动穿透！

2.4K2 1

用 SwiftUI 的方式进行布局

需求不久前，在聊天室[3] 中，有网友提出了这样一个布局需求：有两个竖向排列的视图。...四、ScrollView 考虑到本文需求的动画形态（竖向滚动），使用 ScrollViewReader 提供的滚动定位功能，同样可以满足需求。...ScrollView 会使用父视图给定的全部建议尺寸创建滚动区域，但在询问其子视图的需求尺寸时只会提供理想尺寸。...这意味着，在 ScrollView 中，子视图最好明确的设定尺寸（提出明确地需求尺寸）。因此，在上面的代码中，需要通过屏幕高度和视图一的高度差来计算上方的空白站位视图高度。...scrollDisabled（则让我们可以在 iOS 16+ 中屏蔽 ScrollView 的滚动手势）。

3.2K0 0

基础篇章：关于 React Native 之 ListView 组件的讲解

大家好，我是ListView，我是React Native大家族中基础组件中，一个核心组件。我可以高效的展示垂直滚动的变化的数据列表，而且这个列表有一个特点就是结构和数据比较相似才可以哦。...我和ScrollView那家伙不太相同，我更适于长列表数据，且元素个数可以增删。和ScrollView不同的是，我并不立即渲染所有元素，而是优先渲染屏幕上可见的元素。怎么样？是不是感觉我更聪明？...，这个函数会接受数组中的每个数据作为参数，返回一个可渲染的组件（作为我的每一行）。...onEndReached function 当所有的数据都已经渲染过，并且列表被滚动到距离最底部不足onEndReachedThreshold个像素的距离时调用。原生的滚动事件会被作为参数传递。...返回一个可渲染的组件来为这行数据进行渲染。默认情况下参数中的数据就是放进数据源中的数据本身，不过也可以提供一些转换器。

2K8 0

基于 Vue 的两层吸顶踩坑总结

，因为我已经帮大家测试过了，IE9 及以上的浏览器都可以支持。...、left 、right 4 个值中的一个，否则只会处于相对定位父元素的高度不能低于 sticky 元素的高度 sticky 元素仅在其父元素内生效问题汇总 ◎ 吸顶“叠罗汉” 吸顶元素在滚动到组件底部时...这里有一个需要注意的点在于：一开始第一层吸顶元素的高度并非两者之和，所以这里就需要监听滚动事件，在吸顶元素距离底部的距离为两者高度之和的位置处给第一层吸顶元素添加 minHeight 属性以下代码块中...主要原因：在滚动过程中吸顶元素的 position:sticky; 属性始终存在解决方案：监听滚动事件，当滚动到组件底部时，将 v-sticky="{ stickyTop: 0, disabled:...position 值为 static 即可 ◎ 吸顶“变形” 同样 DOM 结构的吸顶元素，在 IE 浏览器中，吸顶会变形查看 vue-sticky 的源码，发现 position:fixed; 是设置在要吸顶的元素的第一个子元素上

7471 0

基于 Vue 的两层吸顶踩坑总结

，因为我已经帮大家测试过了，IE9 及以上的浏览器都可以支持。...、left 、right 4 个值中的一个，否则只会处于相对定位父元素的高度不能低于 sticky 元素的高度 sticky 元素仅在其父元素内生效问题汇总 ◎ 吸顶“叠罗汉” 吸顶元素在滚动到组件底部时...这里有一个需要注意的点在于：一开始第一层吸顶元素的高度并非两者之和，所以这里就需要监听滚动事件，在吸顶元素距离底部的距离为两者高度之和的位置处给第一层吸顶元素添加 minHeight 属性以下代码块中...主要原因：在滚动过程中吸顶元素的 position:sticky; 属性始终存在解决方案：监听滚动事件，当滚动到组件底部时，将 v-sticky="{ stickyTop: 0, disabled:...position 值为 static 即可 ◎ 吸顶“变形” 同样 DOM 结构的吸顶元素，在 IE 浏览器中，吸顶会变形查看 vue-sticky 的源码，发现 position:fixed; 是设置在要吸顶的元素的第一个子元素上

1.4K2 0

项目需求讨论- 自定义滚轮(第二波新实现)

，所以你会发现闪动一下的感觉，因为比如冲第一组的A(position为0)到了第二组的A(position为6)。...而且如果你手指快速的滑动，不停的滚动，你就会滑到顶部的位置。因为我们的是ScrollView 最后选中哪一项，才让它滚动到中间相应的那一项。那有些人可能会说，那我就不只弄这几组。...因为比如我们建立一千组一万组数据，我不需要考虑要重新滚回中间，问题1和2就解决了。问题3因为RecyclerView 的特性，也被解决了。是一个很理想的循环滚动的滚轮。...因为我们当前获取到该手机界面上显示的第一个的position是1，说明position为0的已经被滑出去了。...无非是二种情况（假设一个ItemHeight为100）：已经有80滚动在外面了。我就通过ScrollBy 再向上过给它滚动20到外面。已经有20滚动在外面了。

1.1K2 0

【H5】209-可能这些是你想要的H5软键盘兼容方案

）整体往上滚了，且最大滚动高度（scrollTop）为软键盘高度。...Android 软键盘弹起表现同样，在 Android 上，输入框获取焦点，键盘弹起，但是页面（webview）高度会发生改变，一般来说，高度为可视区高度（原高度减去软键盘高度），除了因为页面内容被撑开可以产生滚动...i < $inputs.length; i++) { listenKeybord($inputs[i]); } 弹起软键盘始终让输入框滚动到可视区有时我们会做一个输入表单，有很多输入项，输入框获取焦点...="tel"，是 HTML5 的一个属性，表示输入框类型为电话号码，在 Android 和 IOS 上表现差不多，都会有数字键盘，但是也会有字母，略显多余。...了解软键盘弹起页面在 IOS 和 Android 上的表现差异是前提，其次是将焦点元素滚动到可视区，同时要考虑到第三方输入法和某些浏览器上的差别。

3.9K1 2

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭