UniApp Scroll-view学习使用

最新推荐文章于 2024-09-14 11:03:24 发布

rose_zz

最新推荐文章于 2024-09-14 11:03:24 发布

阅读量196

点赞数

分类专栏：前端学习文章标签： uni-app 学习前端

本文链接：https://blog.csdn.net/rose_zz/article/details/132619694

版权

前端学习专栏收录该内容

1 篇文章 0 订阅

订阅专栏

本文介绍了如何在Vue应用中使用`scroll-view`组件实现下拉加载更多功能，通过`loadmore`指令管理和控制内容的动态加载，保持页面布局的灵活性。

摘要由CSDN通过智能技术生成

<template>
    <view class="fund">
     	<!-- @scrolltolower 用来控制下拉加载
     	  height: 100% 控制内容高度100 不设置也会导致超出上层view 前提是你想把当前的scroll-view 控制在页面的下方显示
     	 -->
       <scroll-view scroll-y style="height: 100%;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2; overflow-x: hidden;"  @scrolltolower="lower">
	  		<view class="insert_cont" v-for="(item,index) in add" :key="index">
	  		<!-- 内容区域 -->
	  		</view>
 	  		<u-loadmore :status="status" @loadmore="loadmore"></u-loadmore>
  	     	<view style="height: 10rpx;"></view>
	   </scroll-view>
    </view>
</template>

<style scoped>
	.fund {
		display: flex;
		flex-direction: column;
		height: 100vh; /** 这个设置很重要,不设置此处会导致内容超出去*/
	}
</style>