在uni-app中,scroll-view 组件用于实现可滚动视图区域。要将 scroll-view 滚动到底部,可以通过以下几种方法来实现: 1. 使用 scroll-into-view 属性 这种方法要求为 scroll-view 内的每个子元素设置唯一的 id,然后通过 scroll-into-view 属性指定要滚动到的子元素的 id。 vue <template> <scroll-vie...
uniapp中scroll-view滚动到指定组件位置 最近做一个uniapp的聊天室界面,当获取聊天信息之后需要下滑到底部最新消息处,当上拉刷新的时候需要再往上一格移动到下面的消息 通过scroll-view的滚动和下拉刷新来实现 在scroll-view的属性中设置:scroll-into-view="state.scrollIntoMessageId"通过动态设置scrollIntoMessageId来...
-- 横向滚动条 --> <view class="uni-padding-wrap uni-common-mt"> <scroll-view class="scroll-view_H" scroll-x="true" @scroll="scroll" scroll-left="100%" @scrolltolower="scrolltolower"> <view class="scroll-view-item_H uni-bg-red">A</view> <view class="scroll-view-item_H uni...
回答:内容自动滚动到可视化区域的底部,你可以自己写一个函数,在页面加载完成后调用即可,这个功能一般不需要采用组件来实现,书写起来也并不复杂,简单的逻辑如下: function getMaxHeight() { messageContainer = document.getElementsByClassName("message-container")[0]; messageContainer.scrollTo({ top: messageContainer...
scroll-into-view 值应为某子元素id id不能以数字开头 设置哪个方向可滚动,则在哪个方向滚动到该元素 开始 布局部分示例 <scroll-viewscroll-y="true":scroll-info-view="childrenId"><viewv-for="(item,index) in msg":key="index":id="'id-'+index">聊天内容等布局... 我就不一一写出来了</view>...
输入内容后,必然要在对话界面的底部显示内容,可以通过uni.pageScrollTo的方式,但是这个页面刷新的太厉害,输入框都刷新了,没法使用。所以只能使用scroll-view组件。但是通过scroll-view使用竖向滚动时,需要给 一个固定高度。为了适配屏幕的大小,则需要通过计算来确定scroll-view的高度。
对于聊天评论界面,有的时候需要使用scroll-view组件做固定区域的滚动效果,但是,当有新的评论内容显示的时候,如何能够做到动态让评论区滚动到最底部,以便于显示最新的评论,下面就简单介绍一下处理方式。 效果 一、模板代码 #1.定义外层评论框scroll-view的ID(commentContainer) ...
</scroll-view> </view> </template> export default { data() { return { } }, methods: { handleScrollToLower(){ console.log('已经滚动到底部了'); } } } .item { height: 300rpx; width: 100%; background-color: beige; border-...
场景一:布局中已知高度局部滚动 一般页面布局中某个模块需要局部滚动,以横向滚动更多,纵向滚动其实也类似。这个也是 scroll-view 最简单的用法,纵向滚动直接设置一个已知的固定高度 height 就行了,没啥难度。 场景二:整个布局上、中、下3个模块布局,中间局部滚动 ...
第一个考虑的上拉加载事件:onReachBottom页面滚动到底部的事件,常用于上拉加载下一页数据。但是如使用scroll-view导致页面级没有滚动,则触底事件不会被触发,所以这里存在的问题是有时候无法触发onReachBottom。 最终选择了适用scroll-view自带的滚到底部触发事件scrolltolower事件,虽然这个事件确实能够实现上拉加载数据分...