A brief introduction to VUE uni-app basic components

1. scroll-view

When using vertical scrolling, you need to give a fixed height and set the height through CSS; when using horizontal scrolling, you need to add white-space: nowrap ; style.

scroll-y : allows vertical scrolling, scroll-x: allows horizontal scrolling

@scroll : triggered when scrolling, event.detail = {scrollLeft, scrollTop, scrollHeight, scrollWidth, deltaX, deltaY}

Two-way data binding

<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>

Summarize

This article ends here. I hope it can be helpful to you. I also hope you can pay more attention to more content on 123WORDPRESS.COM!