uniapp中scroll-view基礎用法示例代碼

更新時間：2022年11月24日 12:01:14 作者：南列莫斯基廖某

我們在項目中往往都能遇到實現(xiàn)左右滑動跟上下滑動的需求,下面這篇文章主要給大家介紹了關于uniapp中scroll-view基礎用法的相關資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下

前言

在uniapp日常開發(fā)的過程中經常會有局部滾動的需求，而scroll-view組件正好可以滿足這一需求。需注意在webview渲染的頁面中，區(qū)域滾動的性能不及頁面滾動。

縱向滾動

將scroll-view組件中的屬性scroll-y設定為true開啟縱向滾動功能，給scroll-view設置一個高度，當內容高度大于scroll-view高度時即可開啟滾動功能（內容高度小于scroll-view高度時無法體現(xiàn)滾動功能）

實現(xiàn)代碼：

<template>
	<view>
		<scroll-view scroll-y="true" style="height: 700rpx;">
			<view v-for="(item,index) in 3" style="height: 500rpx;" :style="{ backgroundColor: colorList[index]}">
				{{index}}
			</view>
		</scroll-view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				colorList:["blue","red","yellow"]
			}
		},
		methods: {
			
		}
	}
</script>
 
<style>
 
</style>

效果圖：

橫向滾動

將scroll-view組件中的屬性scroll-x設定為true開啟橫向滾動功能，給scroll-view設置一個寬度，當內容寬度大于scroll-view寬度時即可開啟滾動功能（內容寬度小于scroll-view寬度時無法體現(xiàn)滾動功能）

注意：scroll-view本身的display:flex不生效、如果想實現(xiàn)display：flex功能，則可以給scroll-view加上white-space: nowrap，給內容容器加上display:inline-block

實現(xiàn)代碼：

<template>
	<view>
		<scroll-view  scroll-x="true" style="height: 500rpx;white-space: nowrap;">
			<view v-for="(item,index) in 3" style="height: 500rpx;width: 100%;display: inline-block;" :style="{ backgroundColor: colorList[index]}">
				{{index}}
			</view>
		</scroll-view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				colorList:["blue","red","yellow"]
			}
		},
		methods: {
			
		}
	}
</script>
 
<style>
 
</style>

效果圖：

錨點定位

當我們已進入頁面就需要滾動到某一個元素的時候，錨點定位就可以很好的幫助我們定位并滾動到指定位置

將scroll-with-animation設定為true開啟動畫效果、對scroll-into-view進行動態(tài)綁定

注意：scroll-into-view綁定的值得是字符串，使用其他類型則會報錯

實現(xiàn)代碼：

<template>
	<view>
		<scroll-view  scroll-x="true" style="height: 500rpx;white-space: nowrap;" scroll-with-animation="true" :scroll-into-view="'scroll'+scrollId">
			<view v-for="(item,index) in 3" style="height: 500rpx;width: 80%;display: inline-block;" :style="{ backgroundColor: colorList[index]}" :id="'scroll'+index">
				{{index}}
			</view>
		</scroll-view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				colorList:["blue","red","yellow"],
				scrollId:1
			}
		},
		methods: {
			
		}
	}
</script>
 
<style>
 
</style>

效果圖：

觸底事件

在滑動的數(shù)據(jù)需要懶加載的時候，我們就需要通過用戶滑動到底部時觸發(fā)懶加載方法，通過綁定scrolltolower方法即可實現(xiàn)縱/橫觸底時觸發(fā)懶加載方法

實現(xiàn)代碼：

<template>
	<view>
		<scroll-view  scroll-x="true" style="height: 500rpx;white-space: nowrap;" @scrolltolower="onReachScollBottom">
			<view v-for="(item,index) in 3" style="height: 500rpx;width: 80%;display: inline-block;" :style="{ backgroundColor: colorList[index]}">
				{{index}}
			</view>
		</scroll-view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				colorList:["blue","red","yellow"],
			}
		},
		methods: {
			onReachScollBottom(){
				uni.showToast({
					title:"觸發(fā)了觸底事件",
					duration:1500,
					icon:"none"
				})
			}
		}
	}
</script>
 
<style>
 
</style>

效果圖：

下拉刷新事件

scroll-view組件也可以滿足我們下拉刷新的需求、首先通過設置refresher-enabled為true開啟下拉加載、動態(tài)綁定refresher-triggered對下拉加載的狀態(tài)進行控制、綁定refresherrefresh觸發(fā)下拉刷新事件

實現(xiàn)代碼：

<template>
	<view>
		<scroll-view scroll-x="true" style="height: 500rpx;white-space: nowrap;" refresher-enabled="true" :refresher-triggered="refresh" @refresherrefresh="onRefresh">
			<view v-for="(item,index) in 3" style="height: 500rpx;width: 80%;display: inline-block;" :style="{ backgroundColor: colorList[index]}">
				{{index}}
			</view>
		</scroll-view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				colorList:["blue","red","yellow"],
				refresh: false
			}
		},
		methods: {
			onRefresh() {
				this.refresh= true;
				uni.showToast({
					title:"觸發(fā)了下拉刷新",
					duration:1500,
					icon:"none"
				})
				// 這里不能直接讓refresh直接為false，否則可能會發(fā)生下拉加載無法復位的情況
				setTimeout(() => {
					this.refresh = false;
				}, 500)
			}
		}
	}
</script>
 
<style>
 
</style>

效果圖：