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>
相关推荐
iOS阿玮1 小时前
AppStore教你一招免备案的骚操作!
uni-app·app·apple
ModyQyW19 小时前
用 AI 驱动 wot-design-uni 开发小程序
前端·uni-app
耶啵奶膘1 天前
uniapp+firstUI——上传视频组件fui-upload-video
前端·javascript·uni-app
耶啵奶膘2 天前
uniapp——地图路线绘制map
uni-app
shadouqi2 天前
uniapp实现图片预览,懒加载,下拉刷新等
uni-app
走,带你去玩2 天前
uniapp 微信小程序水印
微信小程序·小程序·uni-app
菌菇汤2 天前
uni-app实现单选,多选也能搜索,勾选,选择,回显
前端·javascript·vue.js·微信小程序·uni-app·app
某公司摸鱼前端2 天前
uniapp socket 封装 (可拿去直接用)
前端·javascript·websocket·uni-app
today喝咖啡了吗2 天前
uniapp项目中node_modules\sass\sass.dart.js的体积过大怎么处理
javascript·uni-app·sass
遗憾随她而去.2 天前
uniapp 中使用路由导航守卫,进行登录鉴权
前端·uni-app