uniapp、vue，关于scroll-view中scroll-into-view的坑

最新推荐文章于 2024-08-20 08:52:10 发布
最新推荐文章于 2024-08-20 08:52:10 发布
阅读量9.9k 收藏 8
点赞数 8
分类专栏： uniapp 文章标签： vue.js css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/tryzhang/article/details/105496808
版权

因为项目需要一个聊天室的功能，每次收到消息都要滑动到最底部来确保每次新消息都能显示出来。于是打算用scroll-into-view来实现这个功能。
html:
在这里插入图片描述
js:
在这里插入图片描述

思路没毛病，就是每次监听到有新消息时，自动滑动到这条新消息的位置！
但是写出来后发现，特喵的不跳转！我就感觉是不是我哪里犯了低级错误，于是一遍又一遍检查，但检查不出来哪里有错，要跳转的view的id也没写错，F12检查dom元素也有最新的id，思路没毛病啊。于是就思考是不是最后一个view有问题？于是我就试着去跳转倒数第二个view。
在这里插入图片描述
好嘛，这一下试出来了，滑动到倒数第二个view是正常滑动的！那也就是说最后一个view有问题！
后来经过反复试验，最终确定原因，是因为vue的虚拟dom导致的，每次有新的消息时，我不能立即拿到
dom元素，但是页面上有这条消息。所以，解决方法很简单：setTimeout一下，变成异步的就解决了，让其先渲染再滑动就ok了！

uniapp结合vue scroll-view中scroll-into-view的坑

Burgess不写Bug
关注
专栏目录
uniapp中scroll-view利用scroll-into-view实现锚点功(滚动到某个view重新回到第一个view)
高桥留de博客
09-07 1407
uniapp中scroll-view利用scroll-into-view实现锚点功(滚动到某个view重新回到第一个view)
微信小程序或uni-app scrollView 之scroll-into-view无法跳转的一个坑
qq_41630387的博客
11-20 7846
微信小程序 scrollView 之scroll-into-view无法跳转的一个坑 反复测试发现就是scroll-view的高或宽要给个固定值。 <scroll-view class="page-body" scroll-y :scroll-into-view="scrollIntoView" :style="'height:'+scrollHeight+'px'"> let sy...
uniapp 使用scroll-view 实现聊天记录触顶加载 踩坑 （记录）
song17631538490的博客
08-01 316
4.在此期间 可以获取一下 老列表的长度 然后 用新列表长度减去老列表长度 就是 你加载前index为0的消息盒子 你要做的就是滚动到这个消息盒子的位置。1.每条会话都是循环出来的 所有可以对每个 消息盒子 增加一个 独一无二的ID 我里用的是 ‘msg’+index 的方式 增加的。（有问题）首先记录列表加载前的高度 然后 记录 触顶后 列表已经添加 加载记录后的高度 获得 应该滚动的高度 赋给。实现 触顶加载后 滚动到之前的位置 但是发现 会有 闪一下的情况。
Vue-iScroll-View 教程
最新发布
gitblog_00856的博客
08-20 358
Vue-iScroll-View 教程 vue-iscroll-viewIScroll-view component for Vue 2.x项目地址:https://gitcode.com/gh_mirrors/vu/vue-iscroll-view 项目介绍 Vue-iScroll-View 是一款专为 Vue 2.x 设计的 IScroll 组件，它提供了便捷的方式来集成 IScroll ...
小程序scroll-view横向滚动，scroll-into-view定位不准
weixin_45915243的博客
01-06 1251
微信小程序 由于需求是选中的要 字号放大处理 然后发现scroll-into-view每次都定位不到相应的元素
vue 中 scrollIntoView
weixin_45972345的博客
04-22 4703
vue 中使用 scrollIntoView <div class="item_type" :id="item.id"> <span >{{item.label}}</span> </div> document.getElementById(item.id).scrollIntoView() scrollIntoView({ behavior：auto //定义动画过渡效果"auto"或 "smooth" 之一。默认为 "auto"。 block
vue(uniapp) scroll-view
Lucky铂爵
06-12 1950
<template> <view class="box"> <scroll-view scroll-x="true"> <block v-for="(item, index) in dataList" :key="index"> <view class="dayTitle" :class="current == index ? 'select' : ''" @click="Selectd(item, index)">
uniappscroll-view在小程序显示不正确
kfgauss的博客
03-06 802
我需要在一个界面显示如下效果，tab不动，而下面的内容滑动（滚动显示）。 在页面开发没问题，抽出来做组件，tab就没办法静置了。在Chrome是可以正确显示的，但是在小程序没办法。 看了一下是overflow:hidden决定了这个显示效果。参考一下如下文章 css overflow:hidden为什么会失效_.-CSDN博客_overflowhidden失效 但是看上去并没有问题。 昨天开发scroll-view横向滚动也出现这样的问题。最后在父页面加上子组件的width:...
uniapp踩坑日记（scroll-view，样式，布局）
ir1sa的博客
09-07 2478
持续更新记录开发中遇到的问题
uniapp scroll-view 横向和纵向滚动 带滚动回调
09-10
3. **引入组件**：在uni-app项目中，使用`scroll-view`组件非常简单，只需在页面的`.vue`文件中通过`<template>`标签引入，然后在`<script>`部分注册组件，例如： ```html <view> <scroll-view :scroll-x="true...
uniapp 局部scroll-view高度自适应问题，完美解决不同版本机型自适应
qq_40982347的博客
12-04 4855
一、个人分析 简述 这个问题其实就是计算已经存在的组件的高度和整个页面可用的总高度，算出高度后再动态绑定style样式达到自适应。（总高度-其他组件高度 = 局部scroll-view 自适应的高度） 问题 首先，遇到这个问题，我的解决方法是搜索类似问题，寻找答案，在找的过程中，有几个问题让我迷惑 计算高度的这个方法应该写在什么地方？onReady(），computed()，还是methods里？ 怎么计算页面可用总高度？组件的高度怎么获得？ 怎么动态绑定高度？ 解答 1.computed()属于vue
vue-iscroll-view:Vue 2.x的iScroll-view组件
05-07
滚动查看 Vue 2.x的组件 演示版 使用view-scroll-view构建 安装 $ npm i vue-iscroll-view $ npm i iscroll 开始吧 import IScrollView from 'vue-iscroll-view' /* Using these kinds of IScroll class for different cases. */ import IScroll from 'iscroll' // import IScroll from 'iscroll/build/iscroll-infinite.js // import IScroll from 'iscroll/build/iscroll-probe.js // import IScroll from 'iscroll/build/iscroll-view.js // import
scroll-into-view, 如果可能，将元素滚动到视图中.zip
09-18
scroll-into-view, 如果可能，将元素滚动到视图中 什么将元素滚动到视图中同时滚动任何滚动父对象，使该元素处于视图中。捐赠如果你想在财务上显示你的支持，我是在 Patreon示例示例需要它var scrollIntoView = require('scroll-
如果需要，请滚动到视图：Element.scrollIntoView填充“需要”和“平滑”之类的内容
02-06
这曾经是Element.scrollIntoViewIfNeeded的。 此后，CSS工作组决定在Element.scrollIntoView实现其功能，方法是使用scrollMode: "if-needed"选项。 因此，对该库进行了重写，以实现该规范，而不是即将弃用的规范。 安装 yarn add scroll-into-view-if-needed UMD版本也可以在上： < script src =" https://unpkg.com/scroll-into-view-if-needed/umd/scroll-into-view-if-needed.min.js " > </ s
uniapp开发小程序—scroll-view实现内容滚动时， 标题也滚动
weixin_48596030的博客
01-18 1836
scroll-view实现内容滚动时， 标题也滚动。
scroll-view的描点跳转
m0_63250938的博客
10-28 877
在微信小程序中，使用 scroll-view 实现长页面的标记跳转，官方文档中并没有例子演示。 锚点标记主要是使用 的scroll-into-view属性。
VUE iscroll
热门推荐
前端菜鸟
08-21 1万+
https://github.com/Dafrok/vue-iscroll-view 基本使用方法：$ npm i vue-iscroll-view $ npm i iscrollimport IScrollView from 'vue-iscroll-view'/* Using these kinds of IScroll class for different cases. */ import
[vue] 页面滚动到指定位置 scrollIntoView
qq_14993591的博客
07-05 1353
滚动
vue-scroll滚动组件
1234Wu--Blog
03-12 6570
安装方式： 可以在npm官网找到;连接 npm install vue-scroll --save 演示地址： 官方演示地址连接：点击这里 收获： css计算属性calc(); vw,vh: 视图可见宽度和高度； event.currentTarget； 项目实践： 这里是做个记录，留给我自己看，这个组件怎么用，建议去看上面的演示地址，直接复制很多变量没有，可能会报错。 <te...
uniapp scroll-view自动滚动
07-28
在Uniapp中，使用scroll-view实现自动滚动可以通过设置scroll-into-view或scroll-top属性来实现。引用\[1\]中的代码示例展示了如何使用scroll-into-view属性来实现自动滚动。在scroll-view组件中，设置scroll-into-view为一个具有相应id的元素的id值，当该值发生变化时，scroll-view会自动滚动到对应id的元素位置。 另外，引用\[2\]中的代码示例展示了如何使用scroll-into-view属性来实现自动滚动到高亮序号的位置。在Vue文件中，设置scroll-into-view为一个具有相应id的元素的id值，当该值发生变化时，scroll-view会自动滚动到对应id的元素位置。 如果你想要使用scroll-top属性来实现自动滚动，可以参考引用\[3\]中的代码示例。在scroll-view组件中，设置scroll-top为一个具体的数值，表示滚动条距离顶部的距离。当该值发生变化时，scroll-view会自动滚动到对应的位置。 需要注意的是，使用scroll-view实现自动滚动时，需要确保scroll-view具有明确的高度，以便正确计算滚动位置。另外，如果滚动过程需要更加平滑，可以设置scroll-with-animation属性为true，以添加滚动过渡效果。 总结起来，Uniapp中可以通过设置scroll-into-view或scroll-top属性来实现scroll-view的自动滚动效果。具体使用哪种方式取决于你的需求和代码实现。 #### 引用[.reference_title] - *1* *3* [uniapp关于scroll-view一直自动滚动到底部的功能](https://blog.csdn.net/u010513497/article/details/120321441)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insert_down28v1,239^v3^insert_chatgpt"}} ] [.reference_item] - *2* [uni-app开发小程序，利用scroll-view实现自动滚动至对应数据](https://blog.csdn.net/m0_61387674/article/details/122751501)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insert_down28v1,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值