uniapp內置組件scroll-view案例詳解(完整代碼)

更新時間：2024年07月17日 10:16:33 作者：Python私教

這篇文章主要介紹了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>

這里發(fā)現(xiàn)了另一個一個比較細節(jié)的知識點，就是回到頂部的功能。先分析回到頂部的功能。

回到頂部的功能

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"
		})
	}

注意，這個函數(shù)是異步的，因為nextTick是一個異步方法，需要使用await。
這個方法是從vue引入的：

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

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

經過測試，我現(xiàn)在垂直滾動到了C：

然后我點擊返回頂部：

可以發(fā)現(xiàn)，垂直滾動的位置又回到了A。

不過我們在學習的時候，應該先學習垂直滾動是如何實現(xiàn)的，再學習如何實現(xiàn)回到頂部的功能。

繼續(xù)分析如何實現(xiàn)垂直滾動

核心的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
動態(tài)綁定了一個值，這個值記錄的是滾動的頂部的位置 :scroll-top="scrollTop" ，這個值的初始值為0，在js中定義如下 const scrollTop = ref(0)
這個屬性 scroll-y="true" 是最關鍵的，將滾動方向設置成了垂直方向
通過 class="scroll-Y" 樣式，給容器設置了一個固定高度 height: 300rpx;，因為父盒子的高度是固定的，而內容的高度超過了父元素的限制，所以就出現(xiàn)了滾動的效果
@scrolltoupper="upper" 經過官方文檔的解釋，滾動到頂部/左邊，會觸發(fā) scrolltoupper 事件，因為我們是垂直滾動的，不會滾動到左邊，所以，當我們滾動到最頂部的時候，會觸發(fā)這個事件
@scrolltolower="lower" 這個就是滾動到最底部的時候觸發(fā)的事件了
@scroll="scroll" 這個是只要滾動，就會產生的事件
<view id="demo1" class="scroll-view-item uni-bg-red">A</view> 內容就比較簡單了，核心的地方在于每個內容item的高度都和父元素的高度一樣 height: 300rpx;

所以得出的結論如下：

使用 scroll-view 能夠得到一個滾動的容器
設置 scroll-y="true" 可以實現(xiàn)垂直滾動
將父元素的高度和每個子元素的高度都設置為相同的高度，會產生類似于整個屏幕滾動的效果如何實現(xiàn)水平滾動

核心代碼如下：

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

可以發(fā)現(xiàn)，和水平滾動類似，只不過通過 scroll-x="true" 設置了水平滾動。

scroll-left="120" 經過官方文檔解釋，是在設置滾動條的位置。

實現(xiàn)垂直滾動的完整代碼

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

到此這篇關于uniapp內置組件scroll-view案例解析的文章就介紹到這了,更多相關uniapp內置組件scroll-view內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

JS自動倒計時30秒后按鈕才可用(兩種場景)
在WEB程序開發(fā)中經常會見到用倒計時限制用戶對表單的操作，希望用戶在規(guī)定的時間內閱讀完協(xié)議信息才允許用戶繼續(xù)下一步操作，本文通過兩種場景分析js實現(xiàn)自動倒計時30秒后按鈕才可用，小伙伴快來學習吧
2015-08-08
論壇轉貼工具中用到的正則表達式學習正則的好例子
論壇轉貼工具中用到的正則表達式學習正則的好例子...
2007-11-11
JavaScript獲取當前頁面上的指定對象示例代碼
這篇文章主要介紹了JavaScript獲取當前頁面上指定對象的方法,需要的朋友可以參考下
2014-02-02
20行JS代碼實現(xiàn)粘貼板復制功能
本文給大家分析20行JS代碼實現(xiàn)粘貼板功能,非常不錯，具有參考借鑒價值，需要的朋友可以參考下
2018-02-02
setTimeout在類中使用的問題！
setTimeout在類中使用的問題！...
2007-04-04
JS判斷瀏覽器是否安裝flash插件的簡單方法
下面小編就為大家?guī)硪黄狫S判斷瀏覽器是否安裝flash插件的簡單方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2016-09-09
JavaScript實現(xiàn)字符串與HTML格式相互轉換
這篇文章主要介紹了JavaScript實現(xiàn)字符串與HTML格式相互轉換,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下
2020-03-03
微信支付如何實現(xiàn)內置瀏覽器的H5頁面支付
這篇文章主要介紹了微信支付如何實現(xiàn)內置瀏覽器的H5頁面支付的相關資料,需要的朋友可以參考下
2015-09-09
在IE和VB中支持png圖片透明效果的實現(xiàn)方法(vb源碼打包)
在IE和VB中支持png圖片透明效果的實現(xiàn)方法(vb源碼打包)，需要的朋友可以參考下。
2011-04-04
javascript+HTML5 canvas繪制時鐘功能示例
這篇文章主要介紹了javascript+HTML5 canvas繪制時鐘功能,結合實例形式分析了javascript+HTML5 canvas數(shù)值運算、圖形繪制與時間顯示相關操作技巧,需要的朋友可以參考下
2019-05-05