uniapp内置组件scroll-view案例解析

参考资料

文档地址：https://uniapp.dcloud.net.cn/component/scroll-view.html

官方给的完整代码

<script>
	export default {
		data() {
			return {
				scrollTop: 0,
				old: {
					scrollTop: 0
				}
			}
		},
		methods: {
			upper: function(e) {
				console.log(e)
			},
			lower: function(e) {
				console.log(e)
			},
			scroll: function(e) {
				console.log(e)
				this.old.scrollTop = e.detail.scrollTop
			},
			goTop: function(e) {
				// 解决view层不同步的问题
				this.scrollTop = this.old.scrollTop
				this.$nextTick(function() {
					this.scrollTop = 0
				});
				uni.showToast({
					icon: "none",
					title: "纵向滚动 scrollTop 值已被修改为 0"
				})
			}
		}
	}
</script>

<template>
	<view>
		<view class="uni-padding-wrap uni-common-mt">
			<view class="uni-title uni-common-mt">
				Vertical Scroll
				<text>\n纵向滚动</text>
			</view>
			<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>
			<view @tap="goTop" class="uni-link uni-center uni-common-mt">
				点击这里返回顶部
			</view>

			<view class="uni-title uni-common-mt">
				Horizontal Scroll
				<text>\n横向滚动</text>
			</view>
			<view>
				<scroll-view class="scroll-view_H" scroll-x="true" @scroll="scroll" scroll-left="120">
					<view id="demo1" class="scroll-view-item_H uni-bg-red">A</view>
					<view id="demo2" class="scroll-view-item_H uni-bg-green">B</view>
					<view id="demo3" class="scroll-view-item_H uni-bg-blue">C</view>
				</scroll-view>
			</view>
			<view class="uni-common-pb"></view>
		</view>
	</view>
</template>

<style>
	.scroll-Y {
		height: 300rpx;
	}
	.scroll-view_H {
		white-space: nowrap;
		width: 100%;
	}
	.scroll-view-item {
		height: 300rpx;
		line-height: 300rpx;
		text-align: center;
		font-size: 36rpx;
	}
	.scroll-view-item_H {
		display: inline-block;
		width: 100%;
		height: 300rpx;
		line-height: 300rpx;
		text-align: center;
		font-size: 36rpx;
	}
</style>

此时的渲染效果

在这里插入图片描述

小目标

这个案例代码比较复杂，需要拆解来看。拆分为垂直滚动和横向滚动两个小案例。

之前代码是基于vue2写的，需要改造为vue3的代码。

先把代码改为vue3的setup语法

之前的代码：

export default {
		data() {
			return {
				scrollTop: 0,
				old: {
					scrollTop: 0
				}
			}
		},
		methods: {
			upper: function(e) {
				console.log(e)
			},
			lower: function(e) {
				console.log(e)
			},
			scroll: function(e) {
				console.log(e)
				this.old.scrollTop = e.detail.scrollTop
			},
			goTop: function(e) {
				// 解决view层不同步的问题
				this.scrollTop = this.old.scrollTop
				this.$nextTick(function() {
					this.scrollTop = 0
				});
				uni.showToast({
					icon: "none",
					title: "纵向滚动 scrollTop 值已被修改为 0"
				})
			}
		}
	}

改造后的代码：

import {
		ref
	} from 'vue';
	const scrollTop = ref(0)
	const old = ref({
		scrollTop: 0
	})

	function upper(e) {
		console.log(e)
	}

	function lower(e) {
		console.log(e)
	}

	function scroll(e) {
		console.log(e)
		old.value.scrollTop = e.detail.scrollTop
	}

	function goTop(e) {
		// 解决view层不同步的问题
		scrollTop.value = old.value.scrollTop
		nextTick(function() {
			scrollTop.value = 0
		});
		uni.showToast({
			icon: "none",
			title: "纵向滚动 scrollTop 值已被修改为 0"
		})
	}

垂直滚动案例

接下来拆分案例，先记录一下此时的完整代码，避免改乱了无法恢复。

<script setup>
	import {
		ref
	} from 'vue';
	const scrollTop = ref(0)
	const old = ref({
		scrollTop: 0
	})

	function upper(e) {
		console.log(e)
	}

	function lower(e) {
		console.log(e)
	}

	function scroll(e) {
		console.log(e)
		old.value.scrollTop = e.detail.scrollTop
	}

	function goTop(e) {
		// 解决view层不同步的问题
		scrollTop.value = old.value.scrollTop
		nextTick(function() {
			scrollTop.value = 0
		});
		uni.showToast({
			icon: "none",
			title: "纵向滚动 scrollTop 值已被修改为 0"
		})
	}
</script>

<template>
	<view>
		<view class="uni-padding-wrap uni-common-mt">
			<view class="uni-title uni-common-mt">
				Vertical Scroll
				<text>\n纵向滚动</text>
			</view>
			<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>
			<view @tap="goTop" class="uni-link uni-center uni-common-mt">
				点击这里返回顶部
			</view>

			<view class="uni-title uni-common-mt">
				Horizontal Scroll
				<text>\n横向滚动</text>
			</view>
			<view>
				<scroll-view class="scroll-view_H" scroll-x="true" @scroll="scroll" scroll-left="120">
					<view id="demo1" class="scroll-view-item_H uni-bg-red">A</view>
					<view id="demo2" class="scroll-view-item_H uni-bg-green">B</view>
					<view id="demo3" class="scroll-view-item_H uni-bg-blue">C</view>
				</scroll-view>
			</view>
			<view class="uni-common-pb"></view>
		</view>
	</view>
</template>

<style>
	.scroll-Y {
		height: 300rpx;
	}

	.scroll-view_H {
		white-space: nowrap;
		width: 100%;
	}

	.scroll-view-item {
		height: 300rpx;
		line-height: 300rpx;
		text-align: center;
		font-size: 36rpx;
	}

	.scroll-view-item_H {
		display: inline-block;
		width: 100%;
		height: 300rpx;
		line-height: 300rpx;
		text-align: center;
		font-size: 36rpx;
	}
</style>

接着移除水平滚动相关的代码，移除后得到的代码如下：

<template>
	<view>
		<view class="uni-padding-wrap uni-common-mt">
			<view class="uni-title uni-common-mt">
				Vertical Scroll
				<text>\n纵向滚动</text>
			</view>
			<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>
			<view @tap="goTop" class="uni-link uni-center uni-common-mt">
				点击这里返回顶部
			</view>
			<view class="uni-common-pb"></view>
		</view>
	</view>
</template>

这里发现了另一个一个比较细节的知识点，就是回到顶部的功能。先分析回到顶部的功能。

回到顶部的功能

HTML代码如下：

<view @tap="goTop" class="uni-link uni-center uni-common-mt">
				点击这里返回顶部
			</view>

js代码如下：

async function goTop(e) {
		// 解决view层不同步的问题
		scrollTop.value = old.value.scrollTop
		await nextTick(function() {
			scrollTop.value = 0
		});
		uni.showToast({
			icon: "none",
			title: "纵向滚动 scrollTop 值已被修改为 0"
		})
	}

注意，这个函数是异步的，因为nextTick是一个异步方法，需要使用await。
这个方法是从vue引入的：

	import {
		ref,
		nextTick,
	} from 'vue';

回到顶部的功能是如何生效的？

经过测试， 我现在垂直滚动到了C：
在这里插入图片描述

然后我点击返回顶部：
在这里插入图片描述

可以发现，垂直滚动的位置又回到了A。

不过我们在学习的时候，应该先学习垂直滚动是如何实现的，再学习如何实现回到顶部的功能。

继续分析如何实现垂直滚动

核心的HTML代码如下：

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

代码分析：

  • 首先组件使用了scroll-view
  • 动态绑定了一个值，这个值记录的是滚动的顶部的位置 :scroll-top="scrollTop" ，这个值的初始值为0，在js中定义如下 const scrollTop = ref(0)
  • 这个属性 scroll-y="true" 是最关键的，将滚动方向设置成了垂直方向
  • 通过 class="scroll-Y" 样式，给容器设置了一个固定高度 height: 300rpx;，因为父盒子的高度是固定的，而内容的高度超过了父元素的限制，所以就出现了滚动的效果
  • @scrolltoupper="upper" 经过官方文档的解释，滚动到顶部/左边，会触发 scrolltoupper 事件，因为我们是垂直滚动的，不会滚动到左边，所以，当我们滚动到最顶部的时候，会触发这个事件
  • @scrolltolower="lower" 这个就是滚动到最底部的时候触发的事件了
  • @scroll="scroll" 这个是只要滚动，就会产生的事件
  • <view id="demo1" class="scroll-view-item uni-bg-red">A</view> 内容就比较简单了，核心的地方在于每个内容item的高度都和父元素的高度一样 height: 300rpx;

所以得出的结论如下：

  • 使用 scroll-view 能够得到一个滚动的容器
  • 设置 scroll-y="true" 可以实现垂直滚动
  • 将父元素的高度和每个子元素的高度都设置为相同的高度，会产生类似于整个屏幕滚动的效果

如何实现水平滚动

核心代码如下：

<scroll-view 
	class="scroll-view_H" 
	scroll-x="true" 
	@scroll="scroll" 
	scroll-left="120">
	<view id="demo1" class="scroll-view-item_H uni-bg-red">A</view>
	<view id="demo2" class="scroll-view-item_H uni-bg-green">B</view>
	<view id="demo3" class="scroll-view-item_H uni-bg-blue">C</view>
</scroll-view>

可以发现，和水平滚动类似，只不过通过 scroll-x="true" 设置了水平滚动。

scroll-left="120" 经过官方文档解释，是在设置滚动条的位置。

实现垂直滚动的完整代码

<script setup>
	import {
		ref,
		nextTick,
	} from 'vue';
	const scrollTop = ref(0)
	const old = ref({
		scrollTop: 0
	})

	function upper(e) {
		console.log(e)
	}

	function lower(e) {
		console.log(e)
	}

	function scroll(e) {
		console.log(e)
		old.value.scrollTop = e.detail.scrollTop
	}

	async function goTop(e) {
		// 解决view层不同步的问题
		scrollTop.value = old.value.scrollTop
		await nextTick(function() {
			scrollTop.value = 0
		});
		uni.showToast({
			icon: "none",
			title: "纵向滚动 scrollTop 值已被修改为 0"
		})
	}
</script>

<template>
	<view>
		<view class="uni-padding-wrap uni-common-mt">
			<view class="uni-title uni-common-mt">
				Vertical Scroll
				<text>\n纵向滚动</text>
			</view>
			<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>
			<view @tap="goTop" class="uni-link uni-center uni-common-mt">
				点击这里返回顶部
			</view>
			<view class="uni-common-pb"></view>
		</view>
	</view>
</template>

<style>
	.scroll-Y {
		height: 300rpx;
	}

	.scroll-view_H {
		white-space: nowrap;
		width: 100%;
	}

	.scroll-view-item {
		height: 300rpx;
		line-height: 300rpx;
		text-align: center;
		font-size: 36rpx;
	}

	.scroll-view-item_H {
		display: inline-block;
		width: 100%;
		height: 300rpx;
		line-height: 300rpx;
		text-align: center;
		font-size: 36rpx;
	}
</style>

设置水平滚动的完整代码

<script setup>
	import {
		ref,
		nextTick,
	} from 'vue';
	const scrollTop = ref(0)
	const old = ref({
		scrollTop: 0
	})

	function upper(e) {
		console.log(e)
	}

	function lower(e) {
		console.log(e)
	}

	function scroll(e) {
		console.log(e)
		old.value.scrollTop = e.detail.scrollTop
	}

	async function goTop(e) {
		// 解决view层不同步的问题
		scrollTop.value = old.value.scrollTop
		await nextTick(function() {
			scrollTop.value = 0
		});
		uni.showToast({
			icon: "none",
			title: "纵向滚动 scrollTop 值已被修改为 0"
		})
	}
</script>

<template>
	<view>
		<scroll-view 
			class="scroll-view_H" 
			scroll-x="true" 
			@scroll="scroll" 
			scroll-left="120">
			<view id="demo1" class="scroll-view-item_H uni-bg-red">A</view>
			<view id="demo2" class="scroll-view-item_H uni-bg-green">B</view>
			<view id="demo3" class="scroll-view-item_H uni-bg-blue">C</view>
		</scroll-view>
	</view>
</template>

<style>
	.scroll-Y {
		height: 300rpx;
	}

	.scroll-view_H {
		white-space: nowrap;
		width: 100%;
	}

	.scroll-view-item {
		height: 300rpx;
		line-height: 300rpx;
		text-align: center;
		font-size: 36rpx;
	}

	.scroll-view-item_H {
		display: inline-block;
		width: 100%;
		height: 300rpx;
		line-height: 300rpx;
		text-align: center;
		font-size: 36rpx;
	}
</style>

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mfbz.cn/a/796635.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

computed计算属性用法及方法对比

computed计算属性用法及方法对比

模板中的插值表达式虽然方便&#xff0c;但当要写复杂逻辑时就会变得臃肿&#xff0c;难以维护&#xff0c;遇上复杂逻辑时&#xff0c;推荐使用计算属性来描述以响应式状态的复杂逻辑。这里我们做个对比&#xff0c;先用表达式的方法进行计算&#xff0c;先把页面写好&#xf…
阅读更多...
centos单机配置多个内网IP地址

centos单机配置多个内网IP地址

centos单机配置多个内网IP地址 引配置1. 查看当前网络IP配置2. 打开网络配置目录3. 设置静态IP4. 编辑ifcfg-eno1:15. 重启网络配置 引 同一个局域网&#xff0c;但是对接的多个子系统使用了不同的网段&#xff0c;如一个系统主机IP地址是192.168.10.1&#xff0c;另一个系统主…
阅读更多...
昇思25天学习打卡营第8天|模型权重保存与加载

昇思25天学习打卡营第8天|模型权重保存与加载

打卡 目录 打卡 模型的两种保存形式 Checkpoint 中间表示IR 模型保存与加载 模型权重保存-例1 模型权重加载-例1 模型权重保存-例2 模型权重加载-例2 模型权重文件的空间占用计算-例 模型的两种保存形式 Checkpoint 权重参数文件 中间表示IR 中间表示&#xff08;…
阅读更多...
罗技K380无线键盘及鼠标：智慧互联，一触即通

罗技K380无线键盘及鼠标：智慧互联，一触即通

目录 1. 背景2. K380无线键盘连接电脑2.1 键盘准备工作2.2 电脑配置键盘的连接 3. 无线鼠标的连接3.1 鼠标准备工作3.2 电脑配置鼠标的连接 1. 背景 有一阵子经常使用 ipad&#xff0c;但是对于我这个习惯于键盘打字的人来说&#xff0c;慢慢在 ipad 上打字&#xff0c;实在是…
阅读更多...
【人工智能】-- 迁移学习

【人工智能】-- 迁移学习

个人主页&#xff1a;欢迎来到 Papicatch的博客 课设专栏 &#xff1a;学生成绩管理系统 专业知识专栏&#xff1a; 专业知识 文章目录 &#x1f349;引言 &#x1f349;迁移学习 &#x1f348;基本概念 &#x1f34d;定义 &#x1f34c;归纳迁移学习&#xff08;Induct…
阅读更多...
jenkins系列-01.docker安装jenkins

jenkins系列-01.docker安装jenkins

进入官网&#xff1a;https://www.jenkins.io/ 使用LONG term support版本&#xff1a;2.387.1 docker pull jenkins/jenkins:2.387.1-lts 拉取镜像&#xff1a; 编写docker-compose文件&#xff1a; 启动jenkins: 查看启动日志&#xff1a; 默认生成的密码&#xff1a;…
阅读更多...
初阶数据结构速成

初阶数据结构速成

本篇文章算是对初阶数据结构的总结&#xff0c;内容较多&#xff0c;请耐心观看 基础概念部分 顺序表 线性表&#xff08; linear list &#xff09;是n个具有相同特性的数据元素的有限序列。 线性表是⼀种在实际中⼴泛使 ⽤的数据结构&#xff0c;常⻅的线性表&#xff1a;…
阅读更多...
从概念到完成：Midjourney——设计思维与AI技术的完美结合

从概念到完成：Midjourney——设计思维与AI技术的完美结合

文章目录 本文来自 Python学研大本营 作者 学研君 去年 AI 爆火的时候&#xff0c;学研君也赶时髦用上了 Midjourney。平时用它生成图片&#xff0c;感觉生成的图片好看&#xff0c;比上网四处找图更省时省事&#xff0c;更合心意&#xff0c;还不用担心版权问题。 给大家看一下…
阅读更多...
Vue3 引入Vanta.js使用

Vue3 引入Vanta.js使用

能搜到这篇文章 想必一定看过demo效果图了吧 示例 Vanta.js - Animated 3D Backgrounds For Your Website (vantajs.com) 1. 引入 在根目录 index.html中引入依赖 <script src"https://cdnjs.cloudflare.com/ajax/libs/three.js/r134/three.min.js"></sc…
阅读更多...
JVM系列 | 垃圾收集算法

JVM系列 | 垃圾收集算法

JVM系列 | 垃圾收集算法 文章目录 前言如何判断对象已"死"&#xff1f;引用计数法可达性分析算法可达性分析2.0版 | 引用的增强对象的消亡过程回收方法区主要回收目标&#xff1a;回收操作 垃圾收集算法分代收集理论 与 跨代引用假说分代收集理论跨带引用假说 垃圾收…
阅读更多...
x-anylabeling打开后变成anylabeling且菜单缺失

x-anylabeling打开后变成anylabeling且菜单缺失

有小伙伴应该遇到过&#xff0c;你输入python app.py去启动x-anylabeling&#xff0c;会出现找不到.xanylabelingrc的提示&#xff0c;同时C:\Users\用户名内会出现一个.anylabelingrc配置文件&#xff0c;此时你把它手动改为.xanylabelingrc再启动软件&#xff0c;软件启动了&…
阅读更多...
使用java实现快速排序算法的性能测试

使用java实现快速排序算法的性能测试

Date: 2024.07.12 16:32:32 author: lijianzhan **简述&#xff1a;**在我的上一篇文章中简单的提到过算法&#xff0c;关于算法&#xff0c;现在再次的说明一下&#xff0c;算法是指在解决问题时,按照某种机械步骤一定可以得到问题结果的处理过程&#xff0c;一个算法的质量优…
阅读更多...
【系统架构设计师】九、软件工程(面向对象方法|逆向工程)

【系统架构设计师】九、软件工程(面向对象方法|逆向工程)

目录 六、面向对象方法 6.1 基本概念 6.2 面向对象的分析 6.2.1 用例关系 6.2.2 类之间的关系 6.3 面向对象的设计 6.4 面向对象设计原则与设计模式 6.5 面向对象软件的测试 七、逆向工程 历年真题练习 六、面向对象方法 面向对象的分析方法 (Object-Oriented Analys…
阅读更多...
外国程序猿是什么水平？印度/越南/泰国/菲律宾

外国程序猿是什么水平？印度/越南/泰国/菲律宾

外国程序猿是什么水平？ 中国互联网企业在海外扩张中，会遇到哪些困难和问题？ 文化的差异本地法律法规的问题产品定位的问题人员招聘的问题等等…… 文化的差异和法律法规只能去适应，产品定位可以做调研，参考竞争对手和竞品。 人呢？这是最不可控的因素！ 这里所说的人肯定…
阅读更多...
Snap Video：用于文本到视频合成的扩展时空变换器

Snap Video：用于文本到视频合成的扩展时空变换器

图像生成模型的质量和多功能性的显著提升&#xff0c;研究界开始将其应用于视频生成领域。但是视频内容高度冗余&#xff0c;直接将图像模型技术应用于视频生成可能会降低运动的保真度和视觉质量&#xff0c;并影响可扩展性。来自 Snap 的研究团队及其合作者提出了 "Snap …
阅读更多...
pdf只要前几页，pdf中只要前几页怎么处理

pdf只要前几页，pdf中只要前几页怎么处理

在处理pdf文件时&#xff0c;我们有时只需要其中的一页或几页&#xff0c;而不是整个文档。那么&#xff0c;如何快速且高效地从pdf中提取单独的一页呢&#xff1f;本文将为你揭示几种简单易行的方法&#xff0c;让你轻松实现这一目标。 使用 “轻云处理pdf官网” 打开 “轻云…
阅读更多...
【QT】QComboBox允许输入查询，且不区分大小写

【QT】QComboBox允许输入查询，且不区分大小写

目录 0.简介 1.环境 2.详细代码 3.参考 0.简介 项目需求&#xff0c;原本有一个下拉框&#xff0c;但是条目太多&#xff0c;不好搜索&#xff0c;所以用户要求可以输入查找 修改前 &#xff1a; 修改后&#xff1a; 1.环境 windows11 vs-code qt5.12 2.详细代码 QComboB…
阅读更多...
信息技术应用创新人才评价～信创规划管理师

信息技术应用创新人才评价～信创规划管理师

信创规划管理师背景 为加速培养信息技术应用创新人才&#xff0c;为企业合理选拔和聘用信创人才&#xff0c;为其发展壮大提供强有力的人才支持&#xff0c;工信部教育与考试中心开展“信创人才考试评价认证”工作。 信创是一种以科技为核心新兴产业。这几年来&#xff0c;国…
阅读更多...
【Spring Cloud】 使用Eureka实现服务注册与服务发现

【Spring Cloud】 使用Eureka实现服务注册与服务发现

文章目录 &#x1f343;前言&#x1f38d;解决方案&#x1f6a9;关于注册中⼼&#x1f6a9;CAP理论&#x1f6a9;常见的注册中心 &#x1f384;Eureka&#x1f6a9;搭建 Eureka Server&#x1f388;创建Eureka-server ⼦模块&#x1f388;引入依赖&#x1f388;项目构建插件&am…
阅读更多...
【结构性型模式-适配器模式】

【结构性型模式-适配器模式】

定义 将一个类的接口转换成客户希望的另外一个接口&#xff0c;使得原本由于接口不兼容而不能一起工作的那些类能一起工作。 适配器模式分为类适配器模式和对象适配器模式&#xff0c;前者类之间的耦合度比后者高&#xff0c;且要求程序员了解现有组件库中的相关组件的内部结…
阅读更多...
最新文章

Copyright @ 2022~2023