#uniapp#案例#滚动组件制造

最新推荐文章于 2024-07-24 19:54:09 发布

.Passion

最新推荐文章于 2024-07-24 19:54:09 发布

阅读量650

点赞数

本文链接：https://blog.csdn.net/qq_43923045/article/details/107152207

版权

移动端专栏收录该内容

43 篇文章 1 订阅

订阅专栏

在这里插入图片描述


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