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

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

hxing64110个月前 (11-07)vue1944


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


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

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


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

<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代码:


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



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


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  // 设置当前滚动到的元素(加载前最后一个元素)
}





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

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

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

分享给朋友:

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

vue3 scoped样式穿透

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

vue 路由 vue-router

vue 路由 vue-router

前面的话  在Web开发中,路由是指根据URL分配到对应的处理程序。对于大多数单页面应用,都推荐使用官方支持的vue-router。Vue-router通过管理URL,实现URL和组件的对应,以及通过URL进行组件之间的切换。本文将详细介绍Vue路由vue-router 安装  在使用vu...

【Vue】深入探究Vue生命周期

Vue.js 是一款流行的前端框架,广泛应用于各种 Web 应用开发中。在 Vue.js 中,每个组件都有一个生命周期,它包括一系列钩子函数,用于在特定阶段执行特定的操作。本文将详细介绍 Vue 组件生命周期,并讲述它们的实际应用。生命周期钩子函数Vue 组件的生命周期分成了 8 个不同的阶段,每个...

Vue过渡动画之CSS过渡

Vue.js 是一个以数据驱动视图的前端框架,它提供了丰富的组件化特性来帮助我们创建交互丰富的 Web 应用程序。Vue 框架内置了一些过渡特效,以及钩子函数,让我们可以在过渡期间添加自定义 CSS 类来实现过渡效果。本文将着重讲解 Vue.js 中的 CSS 过渡,并介绍如何使用它来实现各种有趣的...

深入探索Vue自定义过滤器

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

发表评论

访客

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