uniapp 页面滚动到指定位置的方法

ops/2024/10/18 16:55:39/
方法一:使用uni.pageScrollTo 使页面纵向滚到到指定位置
uni.pageScrollTo({scrollTop: 0,duration: 300
});

如果滚动无效,可以尝试将代码放在settimeOut(异步),或者nextTick(微任务)。若仍滚动无效,可以将html为外层的盒子高度设置为 height:auto!important;

方法二:使用<scroll-view>标签,可以将页面横向(或纵向)滚动到指定位置

html

<scroll-view scroll-x="true" class="scrollSku" :scroll-left="scrollLeft"><view v-for="(item,index) in data" :key="item.id" :id="'target'+index"></view>
</scroll-view>
changeScroll(index) {uni.createSelectorQuery().in(this).select('#target' + index).boundingClientRect(res => {let left = res.left < 0 ? res.left + 20 : res.left - 20this.scrollLeft = left; // 设置滚动条距离左侧的距离    				        }).exec();
},


http://www.ppmy.cn/ops/20311.html

相关文章

数据结构与算法-图论-DFS/BFS

图搜索算法在数据结构与算法领域中非常关键&#xff0c;用于在图形数据结构中搜索节点或路径。图是由节点&#xff08;也称为顶点&#xff09;以及连接这些节点的边组成的。在本文中&#xff0c;我们将详细探讨两种基础的图搜索算法&#xff1a;深度优先搜索&#xff08;DFS&am…

力扣1518. 换水问题

题目链接 力扣1518. 换水问题 简单方法(模拟) 思路 对换水进行模拟&#xff0c;每次喝完 n u m E x c h a n g e numExchange numExchange 瓶水后就去换一瓶水&#xff0c;直到不能再兑换为止&#xff0c;也就是剩余水的数量小于 n u m E x c h a n g e numExchange numE…

使用 Dify 和 Moonshot API 构建你的 AI 工作流(一):让不 AI 的应用 AI 化

有了之前的文章铺垫&#xff0c;这篇文章开始&#xff0c;我们聊聊如何折腾 AI 工作流&#xff0c;把不 AI 的应用&#xff0c;“AI 起来”。 写在前面 上个月&#xff0c;我们聊过了《使用 Dify 和 AWS Bedrock 玩转 Anthropic Claude 3》&#xff0c;里面介绍了如何使用交互…

VScode调用devcpp编译

打开环境变量&#xff0c;用户和系统都可以&#xff0c;只是给的权限不一样而已&#xff0c;个人pc一般不会设置多个用户 找到path双击 新建一个&#xff0c;把你的dev的MinGW64\bin路径粘贴过去 然后重启电脑&#xff0c;VScode要重启电脑才能加载新的环境变量 打开VScode&a…

linux笔记4--shell命令1

文章目录 一. 目录1.说明2.盘符3.linux根目录(以Ubuntu为例)①说明②根目录下一些文件夹的解析/home/root/mnt/media/var/cdrom/etc/lib (/lib32--32位的&#xff0c;/lib64-64位的)/lostfound/boot/proc/bin/sbin/snap/srv/usr/opt/dev/run/tmp 二. ls命令--操作文件夹1.说明2…

Cadence OrCAD学习笔记(2)OrCAD原理图

最近换份工作主要用到Cadence&#xff0c;之前都是用AD居多&#xff0c;所以现在也开始记录下Cadence学习过程&#xff0c;方便后面复习。 参考教程&#xff1a; OrCAD视频教程第2期&#xff1a;10分钟学会OrCAD原理图_哔哩哔哩_bilibili 本期主要介绍原理图中的基本操作&…

设计模式学习笔记 - 项目实战一:设计实现一个支持各种算法的限流框架(实现)

概述 上篇文章&#xff0c;我们介绍了如何通过合理的设计&#xff0c;来实现框架的功能性需求的同时&#xff0c;满足易用、易扩展、灵活、低延迟、高容错等非功能性需求。在设计的过程中&#xff0c;我们也借鉴了之前讲过的一些开源项目的设计思想。比如 Spring 的低侵入松耦…

005 延时交换机

文章目录 延时交换机插件的安装PluginsDelayConfigProducer.javaConsumer.javaapplication.yaml RabbitMQ中既有延时队列的概念&#xff0c;也有延时交换机的概念&#xff0c;但两者在实现机制上有所不同。以下是关于这两者的详细解释&#xff1a; 延时队列&#xff1a; 延时队…