uniapp下拉刷新，锚点等功能实现

关注

VIP免费原创最新推荐文章于 2026-09-18 10:42:04 发布 582 阅读 AI 写同款· GEO 优化 ›

uniapp滚动加载 下拉刷新 在日常开发中，滚动加载和下拉刷新是非常常见的功能，页面数据过多时，需要滚动加载优化性能，本篇技术分享博客将介绍如何在uniapp中实现滚动加载和下拉刷新。至此，我们已经成功地实现了滚动加载和下拉刷新两种常见的移动端功能。大家可以进行扩充或者留言交流！通过以上示例代码，我们可以看到uniapp提供了非常方便的API来实现这些功能，使得开发者可以更加专注于业务逻辑的实现。阅读详情

uniapp下拉刷新，锚点等功能实现

<template>
	<!-- v-if : 防止网络请求完毕之前的 DOM 加载 -->
	<!-- scroll-view 专门的滚动组件, 拥有更多的功能 -->
	<!-- scroll-y: 允许竖向滚动,  默认 false -->
	<!-- 必须指定高度, 否则无法竖向滚动 -->
	<!-- @scrolltolower: scroll-view 的触底事件 -->
	<scroll-view
		v-if="data"
		@scroll="onScroll"
		:style="{ height: wh + 'px' }"
		:scroll-y="true"
		@scrolltolower="onReachBottom1()"
		:scroll-top="curST"
		:scroll-with-animation="true"
	>
		<uni-list>
			<uni-list-item v-for="(item, index) in data.data" :key="index">
				<image
					style="width: 240rpx; height: 240rpx; min-width: 240rpx;"
					slot="header"
					:src="'http://101.96.128.94:9999/' + item.pic"
					mode=""
				></image>
				<view class="content" slot="body">
					<text class="title">{
   
   {
   
    item.title }}</text>
					<text class="price">¥{
   
   {
   
    item.price }}</text>
				</view>
			<