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

这篇具有很好参考价值的文章主要介绍了uniapp scroll-view用法[下拉刷新,触底事件等等...](4)。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

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

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

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

讲一下常用的几个

@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 自定义下拉刷新被触发文章来源地址https://www.toymoban.com/news/detail-824148.html


<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>

到了这里，关于uniapp scroll-view用法[下拉刷新,触底事件等等...](4)的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！