uni-app 滚动到指定位置

在这里插入图片描述
方法1:使用标签,可以将页面横向(或纵向)滚动到指定位置
无法滚动 将代码放在setTimeout,nextTick里执行

<!-- 左边 -->
			<scroll-view show-scrollbar="false" scroll-y="true" class="left-box"
				:scroll-top="scrollLeftTop" scroll-with-animation="true">
				<view class="scroll-view-item" v-for="(item,index) in servicesLeftList" :key="item.id"
					:id="'scroll' + activeLeftTab" :class="{'active':activeLeftTab==item.id}">
					{{item.name}}
				</view>
			</scroll-view>
data(){
return {
servicesLeftList:[],
scrollLeftTop:0,//滚动位置
activeLeftTab:"" //选中的样式
}
}

//方法
getData() {
		getServicesTree().then(res => {
			this.servicesLeftList= res.data
			res.data.forEach((item, ind) => {
					setTimeout(()=>{
						uni.createSelectorQuery().in(this).select('#scroll' + item.id)
							.boundingClientRect(res => {
								scrollLeftTop.value = 65 * ind; // 设置滚动条距离左侧的距离    				        
							}).exec()
					},100)
			})
		})
	}

方法二 使用uni.pageScrollTo 使页面纵向滚到到指定位置
建议设置height为auto :height:auto

uni.pageScrollTo({
	scrollTop: 0,
	duration: 500
});

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mfbz.cn/a/609533.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

Flutter笔记:Widgets Easier组件库(13)- 使用底部弹窗

Flutter笔记 Widgets Easier组件库&#xff08;13&#xff09;使用底部弹窗 - 文章信息 - Author: 李俊才 (jcLee95) Visit me at CSDN: https://jclee95.blog.csdn.netMy WebSite&#xff1a;http://thispage.tech/Email: 291148484163.com. Shenzhen ChinaAddress of this …

局域网语音对讲系统_IP广播对讲系统停车场解决方案

局域网语音对讲系统_IP广播对讲系统停车场解决方案 需求分析&#xff1a; 随着国民经济和社会的发展&#xff0c; 选择坐车出行的民众越来越多。在保护交通安全的同时&#xff0c;也给停车场服务部门提出了更高的要求。人们对停车场系统提出了更高的要求与挑战&#xff0c; 需要…

Android 开机启动模式源码分析

在机器关机情况下&#xff0c;长按Power键启动机器&#xff0c;如果这时机器低电&#xff0c;会提示低电&#xff0c;机器不会正常启动&#xff1a; 而代码如下&#xff1a; 如果不是低电&#xff0c;正常情况是可以启动的。 在关机情况下&#xff0c;插入USB&#xff0c;机…

AUS GLOBAL 再次荣登皇家贝蒂斯俱乐部官网

AUS GLOBAL 作为一家备受信赖的金融服务领导者&#xff0c;一直以来都在致力于为客户提供卓越的交易体验和专业的服务。再次登上皇家贝蒂斯俱乐部官网Banner&#xff0c;不仅是对我们过去合作的肯定&#xff0c;更是对未来合作的信心和期待。这标志着我们之间的合作更加稳固和成…

IP报文在设备间传递的封装过程

IP报文传递过程 1、PC1访问PC2报文传递过程1.1、PC1准备数据请求报文封装1.2、PC1准备ARP请求报文1.3、PC2准备ARP响应报文1.4、PC1完成数据请求报文封装 2、PC1访问PC3报文传递过程2.1、PC1准备数据请求报文封装2.2、PC1准备获取网关MAC地址的ARP请求报文2.3、网关准备ARP响应…

kotlin语法快速入门--(完整版)

Kotlin语法入门 文章目录 Kotlin语法入门一、变量声明1、整型2、字符型3、集合3.1、创建array数组3.2、创建list集合3.3、不可变类型数组3.4、Set集合--不重复添加元素3.5、键值对集合Map 4、kotlin特有的数据类型和集合4.1、Any、Nothing4.2、二元组--Pair4.3、三元组--Triple…

vue数据大屏并发请求

并发? 处理并发 因为js是单线程的&#xff0c;所以前端的并发指的是在极短时间内发送多个数据请求&#xff0c;比如说循环中发送 ajax , 轮询定时器中发送 ajax 请求. 然后还没有使用队列, 同时发送 的. 1. Promise.all 可以采用Promise.all处理并发&#xff0c; 当所有pro…

gjfjiv是什么意思

GJFJV-4B1&#xff0c;gjfjv-6a1a&#xff0c;gjfjv光缆 室内光缆型号命名 产品描述 多样的光缆结构选择&#xff0c;可在有限的空间内布设&#xff0c;且无缠绕效应 可于建设物间导管托盘和通道中使用 理想的网络光缆在保证对光纤的保护前提下易于布设&#xff0c;插接和识…

数据链路层之 以太网协议

以太网协议 这个协议即规定了数据链路层&#xff0c;同时也规定了物理层的内容。平时使用到的网线&#xff0c;其实也叫做“以太网线”&#xff08;遵守以太网协议的网线&#xff09;。 以太网帧格式 以太网数据帧 帧头 载荷 帧尾。 帧头&#xff1a;目的地址、源地址、类型…

django项目结构介绍

小白的django学习笔记 五一前的某天 文章目录 django项目结构介绍项目的基本配置templates项目模块manage.pyExternal Libraries django项目结构介绍 项目的基本配置 在这里配置&#xff0c;跟工程名是一样的 templates 放网页、js、css的地方 django 项目模块 项目开发时&…

《前端算法宝典:双指针问题解析与应用》

双指针 双指针&#xff0c;指的是在遍历对象的过程中使用两个相同方向&#xff08;快慢指针&#xff09;或者相反方向&#xff08;对撞指针&#xff09;的指针或者是两个指针构成一个滑动窗口进行扫描&#xff0c;从而达到相应的目的。 双指针方法在某些情况下可以对有序数组…

sbt安装

一、sbt介绍 在Spark中&#xff0c;sbt&#xff08;Scala Build Tool&#xff09;是一个用于构建Scala项目的工具。它是Spark项目的主要构建工具之一&#xff0c;用于编译Scala代码、管理依赖项、打包应用程序以及执行其他与项目构建相关的任务。 sbt的用途在Spark开发中主要…

『大模型笔记』Google CEO Sundar Pichai(桑达尔·皮查伊)谈人工智能的未来!

Google CEO Sundar Pichai(桑达尔皮查伊)谈人工智能的未来! 文章目录 一. Google CEO谈人工智能的未来总结摘要观点时间线二. 参考文献简短总结:一. Google CEO谈人工智能的未来 总结 主要介绍了Google CEO Sundar Pichai对人工智能未来的看法,以及Google在AI领域的战略…

JavaScript异步编程——06-Promise入门详解【万字长文,感谢支持】

前言 Promise 是 JavaScript 中特有的语法。可以毫不夸张得说&#xff0c;Promise 是ES6中最重要的语法&#xff0c;没有之一。初学者可能对 Promise 的概念有些陌生&#xff0c;但是不用担心。大多数情况下&#xff0c;使用 Promise 的语法是比较固定的。我们可以先把这些固定…

三月份饮料行业线上市场销售数据分析

2024年3月&#xff0c;中国饮料市场呈现出多样化和健康趋势的明显特征。从消费场景、消费端需求以及销售渠道来看&#xff0c;饮料市场正在经历多元化的发展&#xff0c;这不仅体现在产品种类上&#xff0c;也体现在消费者的购买行为和偏好上。 据鲸参谋数据统计&#xff0c;线…

LLM大语言模型(十五):LangChain的Agent中使用自定义的ChatGLM,且底层调用的是remote的ChatGLM3-6B的HTTP服务

背景 本文搭建了一个完整的LangChain的Agent&#xff0c;调用本地启动的ChatGLM3-6B的HTTP server。 为后续的RAG做好了准备。 增加服务端role&#xff1a;observation ChatGLM3的官方demo&#xff1a;openai_api_demo目录 api_server.py文件 class ChatMessage(BaseModel…

LeetCode HOT 100刷题总结

文章目录 1 哈希1.1 1-1.两数之和&#x1f7e2;1.2 2-49.字母异位词分组&#x1f7e1;1.3 3-128.最长连续序列&#x1f7e1; 2 双指针2.1 4-283.移动零&#x1f7e2;2.2 6-15.三数之和&#x1f7e1;2.3 7-11.盛最多水的容器&#x1f7e1;2.4 8-42.接雨水&#x1f534; 3 滑动窗…

传输层协议——UDP协议

目录 一、传输层 二、再谈端口号 端口号的划分 知名端口号 pidof netstat命令 三、UDP协议 1、UDP协议格式 2、UDP协议特点 3、UDP协议的缓冲区 四、基于UDP的应用层协议 一、传输层 上一篇文章我们所讲到的HTTP协议和HTTPS协议&#xff0c;是属于应用层协议。我们…

【小笔记】问答系统可视化实现的三种方式

下面三种方式都是基于Python的哈&#xff0c;从简单到复杂。 方式一&#xff1a;命令行交互问答 优点&#xff1a;原始简单直接 方式二&#xff1a;使用Python可视化框架 优点&#xff1a;无需学习前端技术栈即可搭建一个web。 streamlit&#xff1a;⭐️⭐️⭐️⭐️gra…

【服务器优化】LVS负载均衡

LVS负载均衡 LVS简介 ​ LVS&#xff08;Linux Virtual Server&#xff09;即Linux虚拟服务器&#xff0c;是由章文嵩博士主导的开源负载均衡项目&#xff0c;目前LVS已经被集成到Linux内核模块中。该项目在Linux内核中实现了基于IP的数据请求负载均衡调度方案&#xff0c;终…
最新文章