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自动滚动最底部内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • JS中的防抖与节流及作用详解

    JS中的防抖与节流及作用详解

    这篇文章主要介绍了JS中的防抖与节流及作用详解,本文通过文字说明加示例代码的形式给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-04-04
  • Swiper实现导航栏滚动效果

    Swiper实现导航栏滚动效果

    这篇文章主要为大家详细介绍了Swiper实现导航栏滚动效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-10-10
  • js 根据对象数组中的属性进行排序实现代码

    js 根据对象数组中的属性进行排序实现代码

    这篇文章主要介绍了js 根据对象数组中的属性进行排序实现代码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2019-09-09
  • JS使用AudioContext实现音频流实时播放

    JS使用AudioContext实现音频流实时播放

    这篇文章主要为大家详细介绍了JavaScript如何使用AudioContext实现音频流实时播放功能,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下
    2024-01-01
  • Javascript 多浏览器兼容总结(实战经验)

    Javascript 多浏览器兼容总结(实战经验)

    多浏览器兼容一直都是前端备受关注的问题,本文整理了一些实战的经验,个人感觉还不错,需要的朋友可以参考下
    2013-10-10
  • 整理CocosCreator常用知识点

    整理CocosCreator常用知识点

    这篇文章主要介绍了整理CocosCreator常用知识点,这些知识点,平时几乎都能用到,希望同学们看完后,可以自己去试一下,加深印象
    2021-04-04
  • javascript实现点击图片切换

    javascript实现点击图片切换

    这篇文章主要介绍了javascript实现点击图片切换,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-04-04
  • javascript实现删除前弹出确认框

    javascript实现删除前弹出确认框

    删除确认对话框的JS代码,有好几种写法,有简单的,有兼容好的,下面分别说几种方法,可根据自己需要选用
    2015-06-06
  • JavaScript实现节点的删除与序号重建实例

    JavaScript实现节点的删除与序号重建实例

    这篇文章主要介绍了JavaScript实现节点的删除与序号重建方法,涉及javascript针对页面节点的删除与遍历技巧,非常具有实用价值,需要的朋友可以参考下
    2015-08-08
  • 微信小程序云开发如何使用云函数生成二维码

    微信小程序云开发如何使用云函数生成二维码

    这篇文章主要为大家详细介绍了微信小程序云开发如何使用云函数生成二维码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-05-05

最新评论