uniapp scroll-view用法[下拉刷新,触底事件等等...](4)

前言:可滚动视图区域。用于区域滚动

话不多说 直接上官网属性 官网示例

讲一下常用的几个

@scroll 滚动时触发

@scrolltoupper 滚动到顶部或左边,会触发 scrolltoupper 事件

@scrolltolower 滚动到底部或右边,会触发 scrolltolower 事件

1.纵向滚动

设置scroll-y="true" 开启纵向滚动功能

复制代码
<view>
		<scroll-view :scroll-top="scrollTop" scroll-y="true" class="scroll-Y" 
				 @scrolltoupper="upper"	@scrolltolower="lower" @scroll="scroll">
					<view id="demo1" class="scroll-view-item uni-bg-red">A</view>
					<view id="demo2" class="scroll-view-item uni-bg-green">B</view>
					<view id="demo3" class="scroll-view-item uni-bg-blue">C</view>
				</scroll-view>
	</view>

2.横向滚动

设置scroll-x="true" 开启横向滚动功能

复制代码
<view>
		<scroll-view :scroll-top="scrollTop" scroll-x="true" class="scroll-Y" 
				 @scrolltoupper="upper"	@scrolltolower="lower" @scroll="scroll">
					<view id="demo1" class="scroll-view-item uni-bg-red">A</view>
					<view id="demo2" class="scroll-view-item uni-bg-green">B</view>
					<view id="demo3" class="scroll-view-item uni-bg-blue">C</view>
				</scroll-view>
	</view>

注意:scroll-view本身的display:flex不生效、如果想实现display:flex功能,则可以给scroll-view加上white-space: nowrap,给内容容器加上display:inline-block

3.触底事件

@scrolltolower 滚动到底部或右边,会触发 scrolltolower 事件

复制代码
<template>
	<view>
		<scroll-view  scroll-y="true" style="height: 500rpx;" @scrolltolower="onReachScollBottom">
		
		</scroll-view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
			
			}
		},
		methods: {
			onReachScollBottom(){
				uni.showToast({
					title:"触发了触底事件",
					duration:1500,
					icon:"none"
				})
			}
		}
	}
</script>
 
<style>
 
</style>

4.下拉刷新

refresher-enabled = "true" 开启自定义下拉刷新

refresher-triggered ="true" 设置当前下拉刷新状态,true 表示下拉刷新已经被触发,false 表示下 拉刷新未被触发

@refresherrefresh 自定义下拉刷新被触发

复制代码
<template>
	<view>
		<scroll-view scroll-y="true" style="height: 500rpx;" refresher-enabled="true" :refresher-triggered="refresh" @refresherrefresh="onRefresh">
		
		</scroll-view>
	</view>
</template>


<script>
	export default {
		data() {
			return {
				colorList:["blue","red","yellow"],
				refresh: false
			}
		},
		methods: {
			onRefresh() {
				this.refresh= true;
				uni.showToast({
					title:"触发了下拉刷新",
					duration:1500,
					icon:"none"
				})
				// 这里不能直接让refresh直接为false,否则可能会发生下拉加载无法复位的情况
				setTimeout(() => {
					this.refresh = false;
				}, 500)
			}
		}
	}
</script>
相关推荐
会点法律的程序员几秒前
小程序 地理位置授权怎么搞
前端·小程序·uni-app
重生之我是菜鸡程序员9 分钟前
uniapp 顶部通知 上滑隐藏
前端·javascript·uni-app
FliPPeDround26 分钟前
告别 uni-app 启动烦恼:@uni-helper/unh 让开发流程更顺畅
前端·微信小程序·uni-app
2501_915921433 小时前
iOS 26 电耗监测与优化,耗电问题实战 + 多工具 辅助策略
android·macos·ios·小程序·uni-app·cocoa·iphone
2501_915921433 小时前
苹果软件混淆与 iOS 应用加固白皮书,IPA 文件加密、反编译防护与无源码混淆方案全解析
android·ios·小程序·https·uni-app·iphone·webview
anyup4 小时前
🔥开源零配置!10 分钟上手:create-uni + uView Pro 快速搭建企业级 uni-app 项目
前端·前端框架·uni-app
你真的可爱呀4 小时前
uniapp学习【vue3在uniapp中语法,使用element,使用uView UI】
学习·uni-app
保利威直播4 小时前
保利威uniapp直播插件功能清单-开播端/主播端/观看端(持续测试更新中...)
uni-app·直播·直播平台
dcloud_jibinbin5 小时前
【uniapp】体验优化:开源工具集 uni-toolkit 发布
前端·webpack·性能优化·小程序·uni-app·vue