#uniapp#案例#滾動組件製造

<template>
	<view class="scroll">
		<scroll-view class="list-scroll" scroll-y>
			<view>
				<view v-for="i in 100">{{ i }} hello world</view>
			</view>
		</scroll-view>
	</view>
</template>

<style lang="scss">
.scroll {
	display: flex;
	border: 1px solid red;
	box-sizing: border-box;
	overflow: hidden;
	.list-scroll {
		height: 100%;
		display: flex;
		flex-direction: column;
	}
}
</style>

可以將內容抽取，改造成插槽

---

內容如下，動態插入 內容

<template>
	<view class="scroll">
		<scroll-view class="list-scroll" scroll-y>
			<view>
				<slot></slot>
			</view>
		</scroll-view>
	</view>
</template>

<style lang="scss">
.scroll {
	display: flex;
	border: 1px solid red;
	box-sizing: border-box;
	overflow: hidden;
	.list-scroll {
		height: 100%;
		display: flex;
		flex-direction: column;
	}
}
</style>

調用模板部分：

<template>
	<view id="flex-box">
		<view style="position: fixed;">hello</view>
		 
		 <about>
			 <view v-for="i in 100"> {{ i }} </view>
		 </about>
	</view>
</template>

<script>
	// import about from '@/pages/about/about'
	export default {
		
		data() {
			return {
				
			}
		} 
		 
	}
</script>

<style scoped lang="scss">
	 

</style>