当前位置:首页 > javascript > vue > 正文内容

uniapp 中 ScrollView 组件上拉分页怎么不滚动到最顶部

hxing6411年前 (2023-11-07)vue2157


实现类似微信聊天页面,上拉加载更多历史聊天记录,每次上拉到顶部,界面自动会滚动到最顶部,我希望ScrollView不要滚动到最顶部,每次就停留在当前位置


1,绑定scroll-view中scroll-into-view属性

Markup
<scroll-view class="scroll-view"  :scroll-y="true"  :scroll-with-animation="false" :scroll-into-view="scrollViewIntoView" @scrolltoupper="loadHistory"></scroll-view>

2,将scroll-view中包裹元素设置flex样式

Markup
<scroll-view class="scroll-view"  :scroll-y="true"  :scroll-with-animation="false" :scroll-into-view="scrollViewIntoView" @scrolltoupper="loadHistory">
    <view id="scroll-view-content" >
        <view class="item" v-for="item in list">{{item.name}}</view>
    </view>
</scroll-view>



css代码:

CSS
#scroll-view-content {
    display: flex;
    flex-direction: column-reverse;
}



3,绑定数据list,获得的数据为data,以下为实现代码

JavaScript
loadHistory: function () {    
    if (data.length) {
      let start = this.list.length
    for (let i = start; i < start + data.length; i++) {
        const item = data[i - start] // 拿到data遍历的item
        this.list.push(item)
    }
    this.scrollViewIntoView = "view" + this.msgList[start - 1].id  // 设置当前滚动到的元素(加载前最后一个元素)
}


扫描二维码推送至手机访问。

版权声明:本文由星星博客发布,如需转载请注明出处。

本文链接:https://xingxinghan.cn/?id=449

“uniapp 中 ScrollView 组件上拉分页怎么不滚动到最顶部” 的相关文章

uniapp uview 3.0官方文档地址

https://vkuviewdoc.fsq.pub/...

vue3 scoped样式穿透

用于修改很多vue常用的组件库,在组件中还是避免不了修改组件库样式以elementui为例:<div class="box">     <el-input class="input"...

【Vue】详解Vue组件系统

Vue是一款流行的JavaScript框架,它的组件系统是它最重要的特性之一。Vue组件系统允许开发人员将UI界面划分成独立、可重复使用的组件,从而提高代码的可维护性和可重用性。本文将详细介绍Vue组件系统的各个方面。组件的定义在Vue中,一个组件是由一个Vue实例构成的。组件通常包含一个模板、一个...

深入探索Vue自定义过滤器

Vue.js是一种流行的JavaScript框架,提供了很多有用的功能来构建交互式的Web应用程序。其中一个非常有用且经常被忽视的功能是自定义过滤器。通过使用自定义过滤器,我们可以在Vue应用程序中轻松地转换、格式化和处理数据。本文将深入探索Vue自定义过滤器的使用方法和实际应用。一、什么是Vue自...

Vue中的防抖节流技术,提升用户交互体验

在Vue开发中,我们经常会遇到需要处理用户频繁操作的场景,例如搜索框输入联想、窗口大小改变等。这时,使用防抖节流技术能够有效地控制事件触发频率,提升用户体验和页面性能。 1. 防抖技术 防抖(Debounce)是指在事件被触发后,等...

uniapp运行APP报错reportJSException >>>> exception function:createInstanceContext, exception:white screen

今天分享个自己在工作中遇到的头疼问题,记录下,在使用pinia时,引入use模块,h5端没问题,我使用的是vue3,运行在APP端一直报错:reportJSException >>>> exception function:createInstanceContext, exc...

发表评论

访客

◎欢迎参与讨论,请在这里发表您的看法和观点。