uniapp中scroll-view基礎(chǔ)用法示例代碼

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

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

前言

在uniapp日常開(kāi)發(fā)的過(guò)程中經(jīng)常會(huì)有局部滾動(dòng)的需求，而scroll-view組件正好可以滿(mǎn)足這一需求。需注意在webview渲染的頁(yè)面中，區(qū)域滾動(dòng)的性能不及頁(yè)面滾動(dòng)。

縱向滾動(dòng)

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

實(shí)現(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>

效果圖：

橫向滾動(dòng)

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

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

實(shí)現(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>

效果圖：

錨點(diǎn)定位

當(dāng)我們已進(jìn)入頁(yè)面就需要滾動(dòng)到某一個(gè)元素的時(shí)候，錨點(diǎn)定位就可以很好的幫助我們定位并滾動(dòng)到指定位置

將scroll-with-animation設(shè)定為true開(kāi)啟動(dòng)畫(huà)效果、對(duì)scroll-into-view進(jìn)行動(dòng)態(tài)綁定

注意：scroll-into-view綁定的值得是字符串，使用其他類(lèi)型則會(huì)報(bào)錯(cuò)

實(shí)現(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>

效果圖：

觸底事件

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

實(shí)現(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組件也可以滿(mǎn)足我們下拉刷新的需求、首先通過(guò)設(shè)置refresher-enabled為true開(kāi)啟下拉加載、動(dòng)態(tài)綁定refresher-triggered對(duì)下拉加載的狀態(tài)進(jìn)行控制、綁定refresherrefresh觸發(fā)下拉刷新事件

實(shí)現(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，否則可能會(huì)發(fā)生下拉加載無(wú)法復(fù)位的情況
				setTimeout(() => {
					this.refresh = false;
				}, 500)
			}
		}
	}
</script>
 
<style>
 
</style>

效果圖：