淺談VUE uni-app 基礎(chǔ)組件
更新時(shí)間：2021年10月20日 08:56:36 作者：上晴下雪
這篇文章主要介紹了uni-app 的基礎(chǔ)組件，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
1 .scroll-view
使用豎向滾動時(shí)，需要給 一個(gè)固定高度，通過 css 設(shè)置 height；使用橫向滾動時(shí)，需要給添加white-space: nowrap;樣式。
scroll-y：允許縱向滾動，scroll-x：允許橫向滾動
@scroll： 滾動時(shí)觸發(fā)，event.detail = {scrollLeft, scrollTop, scrollHeight, scrollWidth, deltaX, deltaY}
數(shù)據(jù)雙向綁定
<template>
<view>
<scroll-view class="scroll" scroll-y="true" @scroll="scroll">
<view v-for="i in 100">{{i}}</view>
</scroll-view>
</view>
</template>
<script>
export default {
data() {
return {
flag:true
}
},
methods: {
scroll(e){
console.log(e.detail);
}
}
}
</script>
<style>
.scroll{
height:400rpx;
}
</style>
總結(jié)
本篇文章就到這里了，希望能夠給你帶來幫助，也希望您能夠多多關(guān)注腳本之家的更多內(nèi)容!
相關(guān)文章
vue3使用iframe嵌入ureport2設(shè)計(jì)器,解決預(yù)覽時(shí)NullPointerException異常問題
這篇文章主要介紹了vue3使用iframe嵌入ureport2設(shè)計(jì)器,解決預(yù)覽時(shí)NullPointerException異常問題,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10
這篇文章主要介紹了vue遞歸生成樹狀結(jié)構(gòu)的示例,本文給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧2024-07-07
在本篇文章中我們給大家整理了2種關(guān)于VUE項(xiàng)目中使用百度地圖的最簡單的方法，非常實(shí)用，一起來學(xué)習(xí)下。2018-09-09
解決vue組件中使用v-for出現(xiàn)告警問題及v for指令介紹
這篇文章主要介紹了解決vue組件中使用v-for出現(xiàn)告警問題,在文中給大家介紹了v for指令，需要的朋友可以參考下2017-11-11
vue element實(shí)現(xiàn)表格合并行數(shù)據(jù)
這篇文章主要為大家詳細(xì)介紹了vue element實(shí)現(xiàn)表格合并行數(shù)據(jù)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-11-11
這篇文章主要介紹了VUE 全局變量的幾種實(shí)現(xiàn)方式,小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-08-08
在實(shí)際開發(fā)項(xiàng)目過程中有時(shí)候需要上傳比較大的文件，然后呢，上傳的時(shí)候相對來說就會慢一些，so，后臺可能會要求前端進(jìn)行文件切片上傳。本文介紹了Vue實(shí)現(xiàn)文件切片上傳的示例代碼，需要的可以參考一下2022-10-10
這篇文章主要為大家詳細(xì)介紹了vue echarts實(shí)現(xiàn)橫向柱狀圖，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-09-09
Vue中this.$refs獲取為undefined的原因和解決辦法(this.$refs.屬性為undefined原因
在Vue項(xiàng)目開發(fā)中,使用this.$refs訪問組件或DOM元素的引用時(shí),可能會遇到獲取為undefined的情況,這篇文章主要介紹了Vue中this.$refs獲取為undefined的原因和解決辦法,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-11-11
這篇文章主要給大家介紹了關(guān)于vue中組件＜router-view＞使用方法的相關(guān)資料,Vue 路由中的 <router-view/> 是用來承載當(dāng)前級別下的子級路由的一個(gè)視圖標(biāo)簽,此標(biāo)簽的作用就是顯示當(dāng)前路由級別下一級的頁面,需要的朋友可以參考下2024-06-06