uniapp內(nèi)置組件scroll-view案例詳解(完整代碼)
更新時(shí)間：2024年07月17日 10:16:33 作者：Python私教
這篇文章主要介紹了uniapp內(nèi)置組件scroll-view案例詳解,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),感興趣的朋友跟隨小編一起看看吧
參考資料
文檔地址：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: "縱向滾動(dòng) scrollTop 值已被修改為 0"
})
}
}
}
</script>
<template>
<view>
<view class="uni-padding-wrap uni-common-mt">
<view class="uni-title uni-common-mt">
Vertical Scroll
<text>\n縱向滾動(dòng)</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">
點(diǎn)擊這里返回頂部
</view>
<view class="uni-title uni-common-mt">
Horizontal Scroll
<text>\n橫向滾動(dòng)</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>此時(shí)的渲染效果
小目標(biāo)
這個(gè)案例代碼比較復(fù)雜，需要拆解來看。拆分為垂直滾動(dòng)和橫向滾動(dòng)兩個(gè)小案例。
之前代碼是基于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: "縱向滾動(dòng) 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: "縱向滾動(dòng) scrollTop 值已被修改為 0"
})
}垂直滾動(dòng)案例
接下來拆分案例，先記錄一下此時(shí)的完整代碼，避免改亂了無法恢復(fù)。
<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: "縱向滾動(dòng) scrollTop 值已被修改為 0"
})
}
</script>
<template>
<view>
<view class="uni-padding-wrap uni-common-mt">
<view class="uni-title uni-common-mt">
Vertical Scroll
<text>\n縱向滾動(dòng)</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">
點(diǎn)擊這里返回頂部
</view>
<view class="uni-title uni-common-mt">
Horizontal Scroll
<text>\n橫向滾動(dòng)</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>接著移除水平滾動(dòng)相關(guān)的代碼，移除后得到的代碼如下：
<template> <view> <view class="uni-padding-wrap uni-common-mt"> <view class="uni-title uni-common-mt"> Vertical Scroll <text>\n縱向滾動(dòng)</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"> 點(diǎn)擊這里返回頂部 </view> <view class="uni-common-pb"></view> </view> </view> </template>
這里發(fā)現(xiàn)了另一個(gè)一個(gè)比較細(xì)節(jié)的知識(shí)點(diǎn)，就是回到頂部的功能。先分析回到頂部的功能。
回到頂部的功能
HTML代碼如下：
<view @tap="goTop" class="uni-link uni-center uni-common-mt"> 點(diǎn)擊這里返回頂部 </view>
js代碼如下：
async function goTop(e) {
// 解決view層不同步的問題
scrollTop.value = old.value.scrollTop
await nextTick(function() {
scrollTop.value = 0
});
uni.showToast({
icon: "none",
title: "縱向滾動(dòng) scrollTop 值已被修改為 0"
})
}注意，這個(gè)函數(shù)是異步的，因?yàn)閚extTick是一個(gè)異步方法，需要使用await。
這個(gè)方法是從vue引入的：
import {
ref,
nextTick,
} from 'vue';回到頂部的功能是如何生效的？
經(jīng)過測(cè)試， 我現(xiàn)在垂直滾動(dòng)到了C：
然后我點(diǎn)擊返回頂部：
可以發(fā)現(xiàn)，垂直滾動(dòng)的位置又回到了A。
不過我們?cè)趯W(xué)習(xí)的時(shí)候，應(yīng)該先學(xué)習(xí)垂直滾動(dòng)是如何實(shí)現(xiàn)的，再學(xué)習(xí)如何實(shí)現(xiàn)回到頂部的功能。
繼續(xù)分析如何實(shí)現(xiàn)垂直滾動(dòng)
核心的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
- 動(dòng)態(tài)綁定了一個(gè)值，這個(gè)值記錄的是滾動(dòng)的頂部的位置 :scroll-top="scrollTop" ，這個(gè)值的初始值為0，在js中定義如下 const scrollTop = ref(0)
- 這個(gè)屬性 scroll-y="true" 是最關(guān)鍵的，將滾動(dòng)方向設(shè)置成了垂直方向
- 通過 class="scroll-Y" 樣式，給容器設(shè)置了一個(gè)固定高度 height: 300rpx;，因?yàn)楦负凶拥母叨仁枪潭ǖ?，而?nèi)容的高度超過了父元素的限制，所以就出現(xiàn)了滾動(dòng)的效果
- @scrolltoupper="upper" 經(jīng)過官方文檔的解釋，滾動(dòng)到頂部/左邊，會(huì)觸發(fā) scrolltoupper 事件，因?yàn)槲覀兪谴怪睗L動(dòng)的，不會(huì)滾動(dòng)到左邊，所以，當(dāng)我們滾動(dòng)到最頂部的時(shí)候，會(huì)觸發(fā)這個(gè)事件
- @scrolltolower="lower" 這個(gè)就是滾動(dòng)到最底部的時(shí)候觸發(fā)的事件了
- @scroll="scroll" 這個(gè)是只要滾動(dòng)，就會(huì)產(chǎn)生的事件
- <view id="demo1" class="scroll-view-item uni-bg-red">A</view> 內(nèi)容就比較簡(jiǎn)單了，核心的地方在于每個(gè)內(nèi)容item的高度都和父元素的高度一樣 height: 300rpx;
所以得出的結(jié)論如下：
- 使用
scroll-view能夠得到一個(gè)滾動(dòng)的容器 - 設(shè)置
scroll-y="true"可以實(shí)現(xiàn)垂直滾動(dòng) - 將父元素的高度和每個(gè)子元素的高度都設(shè)置為相同的高度，會(huì)產(chǎn)生類似于整個(gè)屏幕滾動(dòng)的效果 如何實(shí)現(xiàn)水平滾動(dòng)
核心代碼如下：
<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)，和水平滾動(dòng)類似，只不過通過 scroll-x="true" 設(shè)置了水平滾動(dòng)。
scroll-left="120" 經(jīng)過官方文檔解釋，是在設(shè)置滾動(dòng)條的位置。
實(shí)現(xiàn)垂直滾動(dòng)的完整代碼
<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: "縱向滾動(dòng) scrollTop 值已被修改為 0"
})
}
</script>
<template>
<view>
<view class="uni-padding-wrap uni-common-mt">
<view class="uni-title uni-common-mt">
Vertical Scroll
<text>\n縱向滾動(dòng)</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">
點(diǎn)擊這里返回頂部
</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>設(shè)置水平滾動(dòng)的完整代碼
<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: "縱向滾動(dòng) 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>到此這篇關(guān)于uniapp內(nèi)置組件scroll-view案例解析的文章就介紹到這了,更多相關(guān)uniapp內(nèi)置組件scroll-view內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
JS自動(dòng)倒計(jì)時(shí)30秒后按鈕才可用(兩種場(chǎng)景)
在WEB程序開發(fā)中經(jīng)常會(huì)見到用倒計(jì)時(shí)限制用戶對(duì)表單的操作，希望用戶在規(guī)定的時(shí)間內(nèi)閱讀完協(xié)議信息才允許用戶繼續(xù)下一步操作，本文通過兩種場(chǎng)景分析js實(shí)現(xiàn)自動(dòng)倒計(jì)時(shí)30秒后按鈕才可用，小伙伴快來學(xué)習(xí)吧2015-08-08
論壇轉(zhuǎn)貼工具中用到的正則表達(dá)式學(xué)習(xí)正則的好例子
論壇轉(zhuǎn)貼工具中用到的正則表達(dá)式學(xué)習(xí)正則的好例子...2007-11-11
JavaScript獲取當(dāng)前頁面上的指定對(duì)象示例代碼
這篇文章主要介紹了JavaScript獲取當(dāng)前頁面上指定對(duì)象的方法,需要的朋友可以參考下2014-02-02
20行JS代碼實(shí)現(xiàn)粘貼板復(fù)制功能
本文給大家分析20行JS代碼實(shí)現(xiàn)粘貼板功能,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下2018-02-02
setTimeout在類中使用的問題！...2007-04-04
下面小編就為大家?guī)硪黄狫S判斷瀏覽器是否安裝flash插件的簡(jiǎn)單方法。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-09-09
JavaScript實(shí)現(xiàn)字符串與HTML格式相互轉(zhuǎn)換
這篇文章主要介紹了JavaScript實(shí)現(xiàn)字符串與HTML格式相互轉(zhuǎn)換,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-03-03
微信支付如何實(shí)現(xiàn)內(nèi)置瀏覽器的H5頁面支付
這篇文章主要介紹了微信支付如何實(shí)現(xiàn)內(nèi)置瀏覽器的H5頁面支付的相關(guān)資料,需要的朋友可以參考下2015-09-09
在IE和VB中支持png圖片透明效果的實(shí)現(xiàn)方法(vb源碼打包)
在IE和VB中支持png圖片透明效果的實(shí)現(xiàn)方法(vb源碼打包)，需要的朋友可以參考下。2011-04-04
javascript+HTML5 canvas繪制時(shí)鐘功能示例
這篇文章主要介紹了javascript+HTML5 canvas繪制時(shí)鐘功能,結(jié)合實(shí)例形式分析了javascript+HTML5 canvas數(shù)值運(yùn)算、圖形繪制與時(shí)間顯示相關(guān)操作技巧,需要的朋友可以參考下2019-05-05