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

news2024/11/16 8:51:47

参考资料

文档地址：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.coloradmin.cn/o/1923574.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

MSPM0G3507(三十七)——最新资料包

MSPM0G3507(三十七)——最新资料包

所有代码本人全部试过都能用 &#xff0c;有啥疑问直接提出 推荐用软件OLED硬件6050&#xff0c;硬件6050读取速度较快&#xff0c;比较稳定 OLED是单独的纯OLED 两个6050程序分别为硬件6050软件oled&#xff0c;软件6050硬件OLED 全都是在CCStheia上编程&#xff0c;有啥问…
阅读更多...
sentinel源码分析: dashboard与微服务的交互、pull模式持久化

sentinel源码分析: dashboard与微服务的交互、pull模式持久化

文章目录 原始方式微服务端规则如何保存规则如何加载进内存微服务端接收控制台请求控制台推送规则总结 pull拉模式官方demo如何整合Spring Cloud整合Spring Cloud 前置知识 SentinelResource的实现原理、SphU.entry()方法中ProcessorSlotChain链、entry.exit() 建议先会使用se…
阅读更多...
SvANet：微小医学目标分割网络，增强早期疾病检测

SvANet：微小医学目标分割网络，增强早期疾病检测

SvANet&#xff1a;微小医学目标分割网络&#xff0c;增强早期疾病检测 提出背景前人工作医学对象分割微小医学对象分割注意力机制 SvANet 结构图SvANet 解法拆解解法逻辑链 论文&#xff1a;SvANet: A Scale-variant Attention-based Network for Small Medical Object Segmen…
阅读更多...
微博图片下载助手

微博图片下载助手

开发的一款「微博图片下载助手」支持一键保存用户图片 / 原图保存 / 支持保存 live 动图&#xff0c;支持免登录&#xff0c;但是不支持去水印哦。另外软件是易语言编写的&#xff0c;一些杀毒软件可能会误报。 链接: https://pan.baidu.com/s/1ZwDuuS2AF0-nxGgYYPve_g?pwdwn…
阅读更多...
LLM大模型从入门到精通（3）--LLM主流大模型类别

LLM大模型从入门到精通（3）--LLM主流大模型类别

目录 1 ChatGLM-6B模型简介&#xff1a; 2 LLaMA模型简介&#xff1a; 3 BLOOM模型简介 4 Baichuan-7B模型 随着ChatGPT迅速火爆&#xff0c;引发了大模型的时代变革&#xff0c;国内外各大公司也快速跟进生成式AI市场&#xff0c;近百款大模型发布及应用。开源语言大模型种…
阅读更多...
centos部署jar包

centos部署jar包

第一步&#xff1a; 将IDEA中的项目打包为jar,将这个jar文件放到centos服务器上的目录里&#xff0c;我在opt新建api目录&#xff0c;将jar文件放入&#xff0c;如下图&#xff1a; 第二步&#xff1a; 将需要读取的配置文件也放入此目录(其他目录也可以&#xff0c;和脚本中…
阅读更多...
python：在同一视窗中画出三个函数的图形

python：在同一视窗中画出三个函数的图形

编写 function_3.py 如下 # -*- coding: utf-8 -*- """ 在同一视窗中画出三个函数的图形 """ import numpy as np from matplotlib import pyplot as plt# 用于正常显示中文标题&#xff0c;负号 plt.rcParams[font.sans-serif] [SimHei] plt…
阅读更多...
TypeError: Rule.__init__() got an unexpected keyword argument ‘method‘报错的解法

TypeError: Rule.__init__() got an unexpected keyword argument ‘method‘报错的解法

报错如图&#xff1a; 原代码&#xff1a; app.route(/query,method[get,post]) 解决办法很简单&#xff0c;method后加s app.route(/query,methods[get,post]) 重新执行代码&#xff0c;不报错了
阅读更多...
Leetcode104.求二叉树的最大深度

Leetcode104.求二叉树的最大深度

题目描述 递归法 class Solution {public int maxDepth(TreeNode root) {if (root null) { //帮助下面的else语句判空return 0;} else {int leftHeight maxDepth(root.left);int rightHeight maxDepth(root.right);/*** 要注意的点* 1. 这个return是写在else语句里面的&am…
阅读更多...
西邮计科嵌入式复习

西邮计科嵌入式复习

西邮嵌入式复习 一、第一章复习二、第二章复习三、第三章复习四、第四章复习 一、第一章复习 二、第二章复习 三、第三章复习 四、第四章复习
阅读更多...
MYSQL的面试题

MYSQL的面试题

目录 一.数据库的约束类型 一.创建数据库、修改数据库名、修改表名&#xff0c;修改列名、修改某个属性的语法 三.索引的类型、优缺点以及使用场景 四.索引的常见的索引数据结构 五.数据库中常用的锁 六.事务的四大特性 七.什么是脏读&#xff1f;幻读&#xff1f;不可重…
阅读更多...
知识图谱研究综述笔记

知识图谱研究综述笔记

推荐导读&#xff1a;知识图谱Knowledge Graph Embeddings 论文标题:A Survey on Knowledge Graphs:Representation, Acquisition and Applications发表期刊:IEEE TRANSACTIONS ON NEURAL NETWORKS AND LEARNING SYSTEMS, 2021本文作者&#xff1a;Shaoxiong Ji, Shirui Pan, M…
阅读更多...
PDF公式转Latex

PDF公式转Latex

记录一下&#xff0c;找到两个PDF公式转Latex的开源项目和一个数据集 数据集 UniMER 介绍 UniMER数据集是一个专为推动数学表达式识别&#xff08;MER&#xff09;领域进步而精心策划的专业集合。它包括全面的UniMER-1M训练集&#xff0c;该训练集包含超过一百万个实例&…
阅读更多...
Golang操作ES全系列（olivere curl操作es）

Golang操作ES全系列（olivere curl操作es）

Golang操作ES全系列&#xff08;olivere & curl操作es&#xff09; &#x1f680;全部代码&#xff08;欢迎&#x1f44f;&#x1f3fb;star&#xff09;&#xff1a; https://github.com/ziyifast/ziyifast-code_instruction/tree/main/go-demo/go-es 1 olivere 创建clie…
阅读更多...
一 GD32 MCU 开发环境搭建

一 GD32 MCU 开发环境搭建

GD32 系列为通用型 MCU &#xff0c;所以开发环境也可以使用通用型的 IDE &#xff0c;目前使用较多的是 KEIL、 IAR 、 GCC 和 Embedded Builder &#xff0c;客户可以根据个人喜好来选择相应的开发环境。 目录 1、使用 Keil 开发 GD32 目前市面通用的MDK for ARM版本有Kei…
阅读更多...
Java代码初始化块

Java代码初始化块

目录 实例域代码块 静态域代码块 初始化代码块分为静态域代码块和实例域代码块&#xff0c;静态域代码块在类第一次被加载时被执行&#xff0c;实例域代码块在创建对象时被执行&#xff0c;一个类中可以有多个代码块。 实例域代码块 使用方法 可以有输出语句 可以对类的属…
阅读更多...
02. Hibernate 初体验之持久化对象

02. Hibernate 初体验之持久化对象

1. 前言 本节课程让我们一起体验 Hibernate 的魅力&#xff01;编写第一个基于 Hibernate 的实例程序。 在本节课程中&#xff0c;你将学到 &#xff1a; Hibernate 的版本发展史&#xff1b;持久化对象的特点。 为了更好地讲解这个内容&#xff0c;这个初体验案例分上下 2…
阅读更多...
自学第十六天----深入理解函数中

自学第十六天----深入理解函数中

4. 函数的调用&#xff1a; 4.1 传值调用 函数的形参和实参分别占有不同内存块&#xff0c;对形参的修改不会影响实参。 4.2 传址调用 传址调用是把函数外部创建变量的内存地址传递给函数参数的一种调用函数的方式。 这种传参方式可以让函数和函数外边的变量建立起真正的联系&…
阅读更多...
在 vite+vue3+electron 中使用 express

在 vite+vue3+electron 中使用 express

文章目录 一、Vite Vue3 Electron 项目的搭建二、搭建 express 环境1、安装 express 框架所需依赖2、创建 express 项目3、配置路由4、启动 express 服务5、启动 electron 并获取数据 三、项目打包 一、Vite Vue3 Electron 项目的搭建 详细的项目构建和打包可参考另一篇文…
阅读更多...
【第32章】MyBatis-Plus之代码生成器配置

【第32章】MyBatis-Plus之代码生成器配置

文章目录 前言一、概述1.特点说明2.示例配置3. 数据库配置 (DataSourceConfig) 二、全局配置 (GlobalConfig)1.方法说明2.示例配置 三、包配置 (PackageConfig)1. 方法说明2. 示例配置 四、模板配置 (TemplateConfig)1. 方法说明2. 示例配置 五、注入配置 (InjectionConfig)1. …
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023