当前位置：首页 > uni-app

uniapp滚动组件

2026-02-06 04:17:12uni-app

uniapp 滚动组件实现方法

scroll-view 基础组件

uniapp 提供了 scroll-view 组件作为基础的滚动容器，支持横向和纵向滚动。通过设置 scroll-x 或 scroll-y 属性控制滚动方向。

<scroll-view scroll-y style="height: 300px;">
  <view v-for="item in list" :key="item.id">{{item.text}}</view>
</scroll-view>

滚动监听

scroll-view 支持 @scroll 事件监听滚动位置，通过事件对象的 detail.scrollTop 或 detail.scrollLeft 获取当前滚动位置。

<scroll-view scroll-y @scroll="handleScroll">
  <!-- 内容 -->
</scroll-view>

methods: {
  handleScroll(e) {
    console.log(e.detail.scrollTop)
  }
}

滚动到指定位置

使用 scroll-into-view 属性可以将内容滚动到指定子元素位置，需要设置子元素的 id 属性。

uniapp滚动组件

<scroll-view scroll-y :scroll-into-view="toView">
  <view id="item1">Item 1</view>
  <view id="item2">Item 2</view>
</scroll-view>
<button @click="scrollToItem2">滚动到Item2</button>

data() {
  return {
    toView: ''
  }
},
methods: {
  scrollToItem2() {
    this.toView = 'item2'
  }
}

下拉刷新与上拉加载

uniapp 的 scroll-view 支持通过 @refresherrefresh 和 @scrolltolower 事件实现下拉刷新和上拉加载功能。

<scroll-view 
  scroll-y
  refresher-enabled
  @refresherrefresh="onRefresh"
  @scrolltolower="onLoadMore">
  <!-- 内容 -->
</scroll-view>

methods: {
  onRefresh() {
    // 下拉刷新逻辑
    setTimeout(() => {
      uni.stopPullDownRefresh()
    }, 1000)
  },
  onLoadMore() {
    // 上拉加载更多逻辑
  }
}

性能优化

对于长列表滚动性能优化，建议使用 uni-list 组件或虚拟列表技术。uniapp 的 easycom 机制可以自动引入 uni-list 组件。

uniapp滚动组件

<uni-list>
  <uni-list-item v-for="item in longList" :title="item.title" />
</uni-list>

自定义滚动条样式

通过 CSS 可以自定义滚动条的样式，增强用户体验。

::-webkit-scrollbar {
  width: 5px;
  background-color: #f5f5f5;
}
::-webkit-scrollbar-thumb {
  background-color: #888;
}

第三方滚动组件

对于更复杂的滚动需求，可以考虑使用第三方组件如 mescroll-uni，它提供了更丰富的滚动功能和更好的性能优化。

<mescroll-uni ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback">
  <!-- 内容 -->
</mescroll-uni>

import MescrollUni from '@/components/mescroll-uni/mescroll-uni.vue'
export default {
  components: { MescrollUni },
  methods: {
    mescrollInit(mescroll) {
      this.mescroll = mescroll
    },
    downCallback() {
      // 下拉刷新回调
    },
    upCallback() {
      // 上拉加载回调
    }
  }
}