当前位置: 首页 > news >正文

uniapp 滚动到指定元素的位置(锚点)

需求:在页面中,不管位于何处,点击按钮页面滚动到对应的标题位置。

最简单有效的方式(直接复制改数据就行)

使用  scroll-view 标签的属性:scroll-top(距离值 num) 或 scroll-into-view(子元素的id,不能以数字开头 string);

<scroll-view class="scroller" :scroll-into-view="toView" scroll-y="true" scroll-with-animation="true">你渲染的内容
</scroll-view>

点击事件(位置随便写,根据页面需求)

<p v-for="(item,index) in gameList[current-1].list" :key="index" @tap="filterList(item.name)">{{item.name}}
</p>

需要滚动到的地方(使用动态id)

<p :id="item.name">{{item.name}}</p>

事件

filterList(id) {uni.createSelectorQuery().select('#' + id).boundingClientRect(function(rect){// 使用scrollIntoView方法滚动到目标元素uni.pageScrollTo({scrollTop: rect.top - 70,duration: 300})}).exec();},

 总体思路:

1.使用scroll-view 标签,并配置;

2.点击事件获取想要的id;

3.设置滚动距离,时长

http://www.lryc.cn/news/138421.html

相关文章:

  • Spring AOP 的 afterReturing 返回值是否能修改问题
  • MyBatis分页插件PageHelper的使用及特殊字符的处理
  • [语音识别] 基于Python构建简易的音频录制与语音识别应用
  • Matlab彩色图像转索引图像
  • 测试框架pytest教程(11)-pytestAPI
  • Docker自学:利用FastAPI建立一个简单的web app
  • 微调bert做学术论文分类(以科大讯飞学术论文分类挑战赛为例)
  • Springboot中sharding-jdbc的API模式并使用自定义算法
  • MySQL回表是什么?哪些情况下会回表
  • VR、AR、MR 傻傻分不清楚?区别的底层逻辑?
  • VScode运行C语言出现的调试问题 lauch:program does not exist 解决方法
  • 云原生安全:保护现代化应用的新一代安全策略
  • mysql操作
  • 前端(十四)——DOM节点操作手册:你需要了解的一切
  • PDF怎么转成PPT文件免费?一个软件解决
  • 数据结构基础:P3-树(上)----编程作业02:List Leaves
  • 山西电力市场日前价格预测【2023-08-25】
  • 手机无人直播软件,有哪些优势?
  • SpringBoot概述SpringBoot基础配置yml的使用多环境启动
  • Python Pandas 处理Excel数据 制图
  • 如何自己实现一个丝滑的流程图绘制工具(五)bpmn的xml和json互转
  • mysql--数据库的操作
  • kafka--技术文档--架构体系
  • ctfshow web入门 web103-web107
  • 前端工程化之模块化
  • 文件服务器实现方式汇总
  • ChatGPT计算机科学与技术专业的本科毕业论文,2000字。论文查重率低于30%。
  • 【Winform学习笔记(八)】通过委托实现跨窗体传值
  • Windows用户如何安装Cpolar
  • C++最易读手撸神经网络两隐藏层(任意Nodes每层)梯度下降230820a