脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → uniapp scroll-view自动滚动最底部

uniapp中scroll-view实现自动滚动到最底部的方法

 更新时间：2023年10月08日 15:34:25   作者：TA远方  
这篇文章主要给大家介绍了关于uniapp中scroll-view实现自动滚动到最底部的相关资料,在uniapp日常开发的过程中经常会有局部滚动的需求，而scroll-view组件正好可以满足这一需求,需要的朋友可以参考下

引言

在做uniapp项目中，有个滚动视图组件scroll-view，跟微信小程序里的组件一样的，想要实现自动滚动到最底部，是一件容易忽略的，小事情。

问题呈现

官网uniapp文档上说可以控制滚动条，并没有自动滚动到底部的设置选项，请看布局源代码，如下，大多数可能都是这样写的

<template>
	<view>
		<scroll-view class="scroll-view" :style="{height:scrollViewHeight+'px'}" :scroll-y="true" :scroll-top="scrollTop" :scroll-with-animation="true">
				<block v-for="(item,index) in images" :key="index">
					<image class="item" :src="item.src" mode="aspectFill"></image>
				</block>
		</scroll-view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				images:[],
				scrollTop:0,//滚动条位置
				scrollViewHeight:300,//滚动视图的高度
				//...
			};
		},
		//...
	}
</script>

虽然可以控制滚动条位置，但是，不知道滚动视图框内的内容高度，要怎么精准控制滚动条位置呢

解决方案

通过各种尝试，认为最好的方案就是，在滚动视图组件内再加一层view视图，布局改动后，源代码如下

<template>
	<view>
		<scroll-view class="scroll-view" :style="{height:scrollViewHeight+'px'}" :scroll-y="true" :scroll-top="scrollTop" :scroll-with-animation="true">
			<view id="scroll-view-content">
				<block v-for="(item,index) in images" :key="index">
					<image class="item" :src="item.src" mode="aspectFill"></image>
				</block>
			</view>
		</scroll-view>
	</view>
</template>
<script>
	//此处省略...
</script>

还有，实现滚动底部的处理方法scrollToBottom()，代码如下

export default {
	data() {
		return {
			images:[],
			scrollTop:0,//滚动条位置
			scrollViewHeight:300,//滚动视图的高度
			//...
		};
	},
	mounted() {
		let i = 10;
		do{
			this.images.push({
				src:'../../static/test.jpg',
				//...
			});
			i--;
		}while(i>0);
	},
	//...
	methods:{
		scrollToBottom(){
			this.$nextTick(()=>{
				uni.createSelectorQuery().in(this).select('#scroll-view-content').boundingClientRect((res)=>{
					let top = res.height-this.scrollViewHeight;
					if(top>0){
						this.scrollTop=top;
					}
				}).exec()
			})
		}
	}
}

注意事项

需要注意组件scroll-view的属性设置

  • 需要设置固定高度,这样视图里面内容当只有超过该高度才会有滚动效果
  • 需要设置scroll-with-animation=true，可以出现慢慢滚动到底部效果

总结

到此这篇关于uniapp中scroll-view实现自动滚动到最底部的文章就介绍到这了,更多相关uniapp scroll-view自动滚动最底部内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

相关文章

最新评论