【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 实现自动滚动到最底部文章来源地址https://www.toymoban.com/news/detail-514722.html

到了这里,关于【uniapp】scroll-view 实现自动滚动到最底部的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • uniapp scroll-view 隐藏滚动条

     

    2024年02月14日
    浏览(49)
  • uniapp scroll-view横向滚动无效,scroll-view子元素flex布局不生效

    要素排查: 1.scroll-x属性需要开启,官方类型是Boolean,实际字符串也行。   2scroll-view标签需要给予一个固定宽度,可以是百分百也可以是固定宽度或者100vw。    3.子元素需要设置display: inline-block(行内块元素)属性,scroll-view需要设置white-space: nowrap(不换行) 当使用scroll

    2024年02月12日
    浏览(44)
  • uniapp中scroll-view去除滚动条

    uniapp中我们使用scroll-view实现横向或者竖向滑动时,我们会发现横向或者竖向是有一个滚动条的,不是很美观,那么我们就可以尝试去去除一下滚动条(如果采用以下官方方法无法去除时,那么请向官方反馈信息) 不过它默认是false,那就是本身不显示,可以忽略这个方法 代

    2024年02月14日
    浏览(58)
  • uniapp微信小程序scroll-view滚动scrollLeft不准确

    今天在实现微信小程序的一个横向导航的时候出现了一个问题,就是每次滑到滚动条最右边的时候 scrollLeft的值都不准确 原因:因为每次滚动监听事件都会被调用比较耗费资源系统会默认节流,可以在scroll-view 加一个 throttle=“{{false}}” 关闭节流,如下: 但是这种方法会影响

    2024年02月15日
    浏览(51)
  • uniapp 小程序端使用uni-popup组件时,页面用了scroll-view滚动组件,uni-popup组件也使用了scroll-view滚动出现组件滚动导致页面也滚动的解决方案

    在 uni-popup上给一个禁止滚动 @touchmove.stop.prevent=\\\"\\\" 和一个样式height: 100vh;    

    2024年02月10日
    浏览(57)
  • 关于uniapp微信小程序scroll-view组件使用show-scrollbar隐藏不了滚动条

    这里关于使用  scroll-view组件  时候有滚动条 想要隐藏滚动条但是使用show-scrollbar没有效果 这时候又使用类名隐藏滚动条 使用id隐藏滚动条都不行 解决方法:在使用  scroll-view组件 的页面或者app 页面加上以下代码就可以了         

    2024年02月12日
    浏览(49)
  • uni-app:scroll-view滚动盒子,实现横(纵)向滚动条

    参照:scroll-view | uni-app官网 (dcloud.net.cn) 样式:     代码: 扩展:要设置纵向滚动条同理 只是需要将盒子高度小于实际小块的高度,就不会将元素完全展示,再给盒子加上scroll-y=\\\"true\\\"(允许纵向滚动),即可 效果如下:  代码:

    2024年02月17日
    浏览(51)
  • scroll-view不能滚动问题

    js 确定你想实现的滑动方向,检查一下scroll-x或者scroll-y有没有写(scroll-x:true 支持横向滑动 scroll-y:true 支持竖向滑动) 检查一下是不是没有给scroll-view设置一个固定的高度,我就是之前没有设置固定高度导致无法滑动的(注意 设置的高度不要超过父容器的高度,否则如果高度多大

    2024年02月13日
    浏览(54)
  • 【微信小程序】scroll-view滚动

    wxml文件 wxss文件       wxml文件 wxss文件     注意事项: 1、在scroll-view标签上加上样式属性: display:flex; white-space:nowrap; 2、scroll-view标签下的一级栏目标签需要加上样式属性: display: inline-block; 只有结合上面两步,才能实现横向滚动。

    2024年02月13日
    浏览(57)
  • [uniapp] scroll-view 简单实现 u-tabbar效果

    效果图 方案 官方scroll-view 进行封装 配合属性 scroll-left Number/String 设置横向滚动条位置 即可 scroll-into-view 属性尝试过,方案较难实现 踩坑 1.scroll-view 横向失败 安装官网的解释 使用竖向滚动时,需要给 scroll-view 一个固定高度,通过 css 设置 height;使用横向滚动时,需要给scr

    2024年02月11日
    浏览(33)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包