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

Python私教2024-07-17 21:43

参考资料

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

官方给的完整代码

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

之前的代码：

js 复制代码 
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"
				})
			}
		}
	}

改造后的代码：

js 复制代码 
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"
		})
	}

垂直滚动案例

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

html 复制代码 
<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>

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

html 复制代码 
<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代码如下：

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

js代码如下：

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引入的：

js 复制代码 
	import {
		ref,
		nextTick,
	} from 'vue';

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

经过测试， 我现在垂直滚动到了C：

然后我点击返回顶部：

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

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

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

核心的HTML代码如下：

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" 可以实现垂直滚动
  • 将父元素的高度和每个子元素的高度都设置为相同的高度，会产生类似于整个屏幕滚动的效果

如何实现水平滚动

核心代码如下：

html 复制代码 
<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" 经过官方文档解释，是在设置滚动条的位置。

实现垂直滚动的完整代码

html 复制代码 
<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>

设置水平滚动的完整代码

html 复制代码 
<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>
相关推荐
史努比的大头16 分钟前
前端开发深入了解webpack
前端
Dovir多多22 分钟前
渗透测试入门学习——php与mysql数据库连接、使用session完成简单的用户注册、登录
前端·数据库·后端·mysql·安全·html·php
B.-25 分钟前
Remix 学习 - @remix-run/react 中主要的 hooks
前端·javascript·学习·react.js·web
2302_8028361637 分钟前
JS考核答案
javascript
小刘|40 分钟前
《实现 HTML 图片轮播效果》
前端·html
罗_三金1 小时前
微信小程序读写NFC标签（实现NFC标签快速拉起小程序）实战
前端·javascript·微信小程序·小程序
双普拉斯1 小时前
微信小程序实现转盘抽奖，可以自定义编辑奖项列表
javascript·微信小程序·小程序
徐同保1 小时前
el-table的树形结构结合多选框使用，实现单选父子联动，全选，反选功能
javascript
J总裁的小芒果1 小时前
vue3-print打印eletable某一行的数据
javascript·vue.js·elementui
大大。2 小时前
el-input 只能输入数字和一个小数点，或者只能输入正整数
前端·javascript·vue.js
热门推荐
01RAG 实践- Ollama+RagFlow 部署本地知识库02组基轨迹建模 GBTM的介绍与实现（Stata 或 R）032024年高教社杯数学建模国赛C题超详细解题思路分析04【立创EDA-PCB设计基础】6.布线铺铜实战及细节详解05苍穹外卖面试总结06【2024数模国赛赛题思路公开】国赛B题思路丨附可运行代码丨无偿自提07【NVIDIA】Jetson Orin Nano系列：安装 Qt6、firefox、jtop、flameshot08Coze扣子平台完整体验和实践（附国内和国际版对比）09【2024高教社杯全国大学生数学建模竞赛】B题 生产过程中的决策问题——解题思路 代码 论文10海康Visionmaster-通讯管理：使用 Modbus TCP 通讯 协议与流程交互