uniapp中scroll-view基礎用法範例程式碼

2022-11-25 14:00:28

前言

在uniapp日常開發的過程中經常會有區域性捲動的需求，而scroll-view元件正好可以滿足這一需求。需注意在webview渲染的頁面中，區域捲動的效能不及頁面捲動。

縱向捲動

將scroll-view元件中的屬性scroll-y設定為true開啟縱向捲動功能，給scroll-view設定一個高度，當內容高度大於scroll-view高度時即可開啟捲動功能（內容高度小於scroll-view高度時無法體現捲動功能）

實現程式碼：

<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寬度時無法體現捲動功能）

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

實現程式碼：

<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進行動態繫結

注意：scroll-into-view繫結的值得是字串，使用其他型別則會報錯

實現程式碼：

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

效果圖：

觸底事件

在滑動的資料需要懶載入的時候，我們就需要通過使用者滑動到底部時觸發懶載入方法，通過繫結scrolltolower方法即可實現縱/橫觸底時觸發懶載入方法

實現程式碼：

<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:"觸發了觸底事件",
					duration:1500,
					icon:"none"
				})
			}
		}
	}
</script>
 
<style>
 
</style>

效果圖：

下拉重新整理事件

scroll-view元件也可以滿足我們下拉重新整理的需求、首先通過設定refresher-enabled為true開啟下拉載入、動態繫結refresher-triggered對下拉載入的狀態進行控制、繫結refresherrefresh觸發下拉重新整理事件

實現程式碼：

<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:"觸發了下拉重新整理",
					duration:1500,
					icon:"none"
				})
				// 這裡不能直接讓refresh直接為false，否則可能會發生下拉載入無法復位的情況
				setTimeout(() => {
					this.refresh = false;
				}, 500)
			}
		}
	}
</script>
 
<style>
 
</style>

效果圖：