淺談VUE uni-app 基礎(chǔ)組件
1 .scroll-view
使用豎向滾動(dòng)時(shí),需要給 一個(gè)固定高度,通過 css 設(shè)置 height;使用橫向滾動(dòng)時(shí),需要給添加white-space: nowrap
;樣式。
scroll-y
:允許縱向滾動(dòng),scroll-x:允許橫向滾動(dòng)
@scroll
: 滾動(dòng)時(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)文章
Vue項(xiàng)目打包并部署nginx服務(wù)器的詳細(xì)步驟
vue項(xiàng)目開發(fā)好之后需要部署到服務(wù)器上進(jìn)行外網(wǎng)訪問,下面這篇文章主要給大家介紹了關(guān)于Vue項(xiàng)目打包并部署nginx服務(wù)器的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-07-07如何解決vuex在頁面刷新后數(shù)據(jù)被清除的問題
這篇文章主要介紹了如何解決vuex在頁面刷新后數(shù)據(jù)被清除的問題,具有很好的參考價(jià)值,希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-05-05Vue.js基礎(chǔ)指令實(shí)例講解(各種數(shù)據(jù)綁定、表單渲染大總結(jié))
這篇文章主要為大家詳細(xì)介紹了Vue.js基礎(chǔ)指令實(shí)例,各種數(shù)據(jù)綁定、表單渲染大總結(jié),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-07-07vue3父子組件通信、兄弟組件實(shí)時(shí)通信方式
這篇文章主要介紹了vue3父子組件通信、兄弟組件實(shí)時(shí)通信方式,具有很好的參考價(jià)值,希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-06-06vue+elementUI實(shí)現(xiàn)簡單日歷功能
這篇文章主要為大家詳細(xì)介紹了vue+elementUI實(shí)現(xiàn)簡單日歷功能,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2020-09-09Vue from-validate 表單驗(yàn)證的示例代碼
本篇文章主要介紹了Vue from-validate 表單驗(yàn)證的示例代碼,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-09-09vue+element使用動(dòng)態(tài)加載路由方式實(shí)現(xiàn)三級菜單頁面顯示的操作
這篇文章主要介紹了vue+element使用動(dòng)態(tài)加載路由方式實(shí)現(xiàn)三級菜單頁面顯示的操作,具有很好的參考價(jià)值,希望對大家有所幫助。一起跟隨小編過來看看吧2020-08-08