uniapp scroll-view基礎(chǔ)用法和示例
我要評(píng)論前言
在uniapp日常開發(fā)的過程中經(jīng)常會(huì)有局部滾動(dòng)的需求，而scroll-view組件正好可以滿足這一需求。需注意在webview渲染的頁面中，區(qū)域滾動(dòng)的性能不及頁面滾動(dòng)。
縱向滾動(dòng)
將scroll-view組件中的屬性scroll-y設(shè)定為true開啟縱向滾動(dòng)功能，給scroll-view設(shè)置一個(gè)高度，當(dāng)內(nèi)容高度大于scroll-view高度時(shí)即可開啟滾動(dòng)功能（內(nèi)容高度小于scroll-view高度時(shí)無法體現(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開啟橫向滾動(dòng)功能，給scroll-view設(shè)置一個(gè)寬度，當(dāng)內(nèi)容寬度大于scroll-view寬度時(shí)即可開啟滾動(dòng)功能（內(nèi)容寬度小于scroll-view寬度時(shí)無法體現(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)入頁面就需要滾動(dòng)到某一個(gè)元素的時(shí)候，錨點(diǎn)定位就可以很好的幫助我們定位并滾動(dòng)到指定位置
將scroll-with-animation設(shè)定為true開啟動(dòng)畫效果、對(duì)scroll-into-view進(jìn)行動(dòng)態(tài)綁定
注意：scroll-into-view綁定的值得是字符串，使用其他類型則會(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í)候，我們就需要通過用戶滑動(dòng)到底部時(shí)觸發(fā)懶加載方法，通過綁定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組件也可以滿足我們下拉刷新的需求、首先通過設(shè)置refresher-enabled為true開啟下拉加載、動(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ā)生下拉加載無法復(fù)位的情況
setTimeout(() => {
this.refresh = false;
}, 500)
}
}
}
</script>
<style>
</style>效果圖：
總結(jié)
以上就是我整理的scroll-view的基礎(chǔ)用法、想要了解更多的用法可以前往uniapp scroll-view部分進(jìn)行了解
到此這篇關(guān)于uniapp scroll-view基礎(chǔ)用法和示例的文章就介紹到這了,更多相關(guān)uniapp scroll-view用法內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！
相關(guān)文章
uniapp+Html5端實(shí)現(xiàn)PC端適配
這篇文章主要介紹了uniapp+Html5端實(shí)現(xiàn)PC端適配,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)2020-07-15