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>
相关推荐
Q_Q19632884752 小时前
python+springboot+uniapp微信小程序题库系统 在线答题 题目分类 错题本管理 学习记录查询系统
spring boot·python·django·uni-app·node.js·php
百思可瑞教育4 小时前
使用UniApp实现一个AI对话页面
javascript·vue.js·人工智能·uni-app·xcode·北京百思可瑞教育·百思可瑞教育
不想吃饭e4 小时前
在uniapp/vue项目中全局挂载component
前端·vue.js·uni-app
00后程序员张5 小时前
iOS App 混淆与资源保护:iOS配置文件加密、ipa文件安全、代码与多媒体资源防护全流程指南
android·安全·ios·小程序·uni-app·cocoa·iphone
不知名的前端专家10 小时前
uniapp原生插件 TCP Socket 使用文档
网络·tcp/ip·uni-app·netty
fakaifa11 小时前
【独立版】智创云享知识付费小程序 v5.0.23+小程序 搭建教程
小程序·uni-app·知识付费·源码下载·智创云享独立版
2501_9160074711 小时前
Transporter App 使用全流程详解:iOS 应用 ipa 上传工具、 uni-app 应用发布指南
android·ios·小程序·https·uni-app·iphone·webview
fakaifa12 小时前
CRMEB多门店 v3.3源码 无授权限制+PC端+uniapp前端
小程序·uni-app·商城小程序·技术教程·源码下载·crmeb多门店
编程迪12 小时前
小说阅读系统Java源码 小说阅读软件开发 小说app小程序
小程序·uni-app·小说源码·小说系统·小说阅读app
Q_Q51100828513 小时前
springboot+python+uniapp基于微信小程序的旅游服务系统景点信息展示 路线推荐 在线预约 评论互动系统
spring boot·python·微信小程序·django·flask·uni-app