使用uniapp.pageScrollTo方法进行页面滚动

先看看是不是你想要的:

需求:

有个填写数据的单子在提交的时候,会对必填项做校验,如果必填项没有数据的话,必填项校验生效给出提示,并且页面滚动到第一个需要填写数据的地方。

开发:

因为这个需求是后续增加的,那也不可能改变样式结构,那就在原来的基础上去写吧!

首先想到是用uniapp的内置方法pageScrollTo,这个方法可以让页面滚动到指定的位置,比较合适。

开始上手:

使用的vue3+js写法:

uni.pageScrollTo的参数:

selector使用子元素选择器:(在第二个view标签增加scrlloClass、第三个view标签增加scrollClass1类名)

  • 子元素选择器:.the-parent > .the-child

上代码:

const submit = () => {
// form表单绑定的是ref="form",因此使用使用form.value.validate方法对表单进行校验form.value.validate().then(res => {// 成功后的执行方法,即必填项都已经填写了}).catch(err => {// 失败后的方法,即有必填项没有填写// 输出的是必填项未填写的数据信息console.log('err', err);// 上图中的form表单是有三个view标签,每个view标签中有多个uv-form-item标签,list数组是将第二个和第三个view标签的必填项(每个form-item标签上prop的字段)列举下来let list = ["a", 'b', "c", "d", "e", "f", "g", "h"]// 设置标签滚动位置let scrollNum = undefined// scrollObj是uni.pageScrollTo方法的参数,本文一共涉及到下面三个选项let scrollObj = {// scrollTop: 0, // 指定滚动到离顶部的距离// duration: 500, // 滚动动画的时长// selector: `.scrollClass > .uv-form-item:nth-child(${scrollNum})` // 指定滚动的元素duration: 500,}// 先判断未填写的必填项中是否有name字段,没有的话接着走if (err[0].field !== 'name') {try { // 使用try catch中断forEach循环list.forEach((e, i) => {console.log('中断forEach');if (e === err[0].field) {scrollNum = i + 1 // 指定标签元素(nth-child是从1开始)throw e // 抛给catch}})} catch (e) {scrollObj.selector = `.scrollClass > .uv-form-item:nth-child(${scrollNum})`if (e === 'name') {// 上图中的form表单是有三个view标签,给第三个form-item标签增加一个scrollClass1类名scrollObj.selector = `.scrollClass1 > .uv-form-item:nth-child(1)`}}console.log('scrollNum', scrollNum);} else {// 有name字段的话,将scrollTop设置为0,及滚动到页面顶部(第一个view标签,见gif动图的第一块区域)scrollObj.scrollTop = 0}uni.pageScrollTo(scrollObj);})}

问题解决无非就是获取必填项未填写的数组(下文称为arr),及validate方法的catch方法中的err,将必填项的字段标识放到一个新数组里面,拿到arr的第一项的field(第一个必填项的字段的标识),循环新数组,如果新数组每一项和arr的第一项的field相等的话,拿到该项索引,索引加1,用于确定滚动到该标签。

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

vs code python开发笔记

目录 安装插件 不全: 2.选择python解释器 安装插件 不全: remote ssh python debuger 左下角,点击左右左右箭头,远程连接到ssh 2.选择python解释器 ctrlshiftP打开VSCode的命令行,输入python: select Interpreter…

【Unity】Excel配置工具

1、功能介绍 通过Excel表配置表数据,一键生成对应Excel配置表的数据结构类、数据容器类、已经二进制数据文件,加载二进制数据文件获取所有表数据 需要使用Excel读取的dll包 2、关键代码 2.1 ExcelTool类 实现一键生成Excel配置表的数据结构类、数据…

细粒度图像分类论文阅读笔记

细粒度图像分类论文阅读笔记 摘要Abstract1. 用于细粒度图像分类的聚合注意力模块1.1 文献摘要1.2 研究背景1.3 本文创新点1.4 计算机视觉中的注意力机制1.5 模型方法1.5.1 聚合注意力模块1.5.2 通道注意力模块通道注意力代码实现 1.5.3 空间注意力模块空间注意力代码实现 1.5.…

Qt实战项目——贪吃蛇

一、项目介绍 本项目是一个使用Qt框架开发的经典贪吃蛇游戏,旨在通过简单易懂的游戏机制和精美的用户界面,为玩家提供娱乐和编程学习的机会。 游戏展示 二、主要功能 2.1 游戏界面 游戏主要是由三个界面构成,分别是游戏大厅、难度选择和游戏…

基于QFD的景区共享代步车创新设计

一、传统景区交通方式的瓶颈 在传统景区中,游客往往面临着步行太累、乘坐观光车又不够自由灵活的困境。同时,随着游客数量的不断增加,景区内的交通压力也在逐渐增大。因此,开发一种既环保又便捷的代步工具,成为了摆在…

【Java Web】会话管理

目录 一、为什么需要会话管理? 二、会话管理机制 三、Cookie概述 四、HttpSession概述 4.1 HttpSession时效性 一、为什么需要会话管理? HTTP协议在设计之初就是无状态的,所谓无状态就是在浏览器和服务器之间的通信过程中,服务器并…

数据分类分级分几步?“6步分解”一目了然!

数据分类分级是企业开展数据安全治理的第一步。通过数据分类分级对数据资产进行盘点,及时掌握内部数据情况,有针对性的对各类型数据采取安全防护措施,为后续企业数据资产管理和数据安全体系建设起到关键作用。 同时,随着《中华人民…

PVE 8.2.2安装OpenWrt 23.05.3

1,下载官方openwrt 23.5.3镜像并解压 2,进入pve上传镜像 复制这段文字之后需要使用 创建虚拟机 删除磁盘 安装完毕后 shell 运行 qm importdisk 100 /var/lib/vz/template/iso/openwrt-23.05.3-x86-64-generic-ext4-combined-efi.img local-lvm 其中100是虚拟…

想学gis开发,java和c++那个比较好?

ava与C的应用场景不同,究竟选择谁,应该由开发者的兴趣方向来决定。 你选择Java,意味着以后的业务方向就是偏后台服务开发,如果你非得说我用java也可以写界面,对不起,别人不会。 刚好我有一些资料&#xf…

光电液位传感器工作时容易受哪些因素影响?

光电式水位传感器的检测液位时是必须要接触液体才能进行检测的。当液体覆盖光电式水位传感器的探头时,传感器内的发光二极管发射出去的光线会折射在液体中,而光敏接收器只能接收到少量光电或者接收不到光线。反之正常接收光线则是无水状态。 光电式水位…

使用前缀积求最后K个数的乘积

前缀积解题基本思路: 1.首先创建整型集合,添加元素1(任何整数乘以1都等于整数本身)。 2.将与新元素的乘积依次添加到整型集合中,再根据相应的索引值进行除法操作,从而获取最后K个数的乘积。 3.&#xff…

腾讯云对象存储cors错误处理

最近将公司的域名进行了修改,同时将腾讯云的对象存储改成了https,为了安全嘛。然后上传软件包的时候发现上传软件就失败了。 在浏览器中打开该 HTML 文件,单击 Test CORS 发送请求后,出现以下错误,错误提示&#xff1…

单点登录系统8大原理机制详解

单点登录系统详解(8大原理机制图解) 单点登录 单点登录(SSO)实现一处登录,全平台畅通。用户只需登录一次,即可无缝访问多个互信的应用系统,高效便捷,省时省心。 举例来说,阿里旗下拥有多款热门…

策略模式(Strategy Pattern)

策略模式 (Strategy Pattern) 定义 它是将定义的算法家族、分别封装起来,让它们之间可以相互替换,从而让算法的变化不会影响到使用算法的用户。 可以避免多重分支的 if-else、switch语句。 属于行为型模式。 适用场景 如果系…

现货黄金如何操作:黄金技术性止损的运用

止损是现货黄金如何操作中不得不提及的方法。在现货黄金投资过程中,风险是存在的,重要的是如何将风险把控好。这里的一个重要概念就是,要对每一笔交易设定好止损,可以讲,这就是现货黄金如何操作的方法中最重要的一种。…

如何降低MCU系统功耗?

大家在做MCU系统开发的时候,是否也碰到过降低MCU系统功耗的需求? MCU系统整板功耗是个综合的数据,包括MCU功耗以及外部器件功耗,在此我们主要介绍如何降低MCU的功耗: 可以在满足应用的前提下,降低MCU的运…

合约期VS优惠期,搞明白他们的区别才能避免很多坑!

在购买流量卡时,相信大家也都发现了,市面上的不少套餐都是有合约期和优惠期的,尤其是联通和移动,那么,什么是合约期?什么又是优惠期呢? ​ 其实,目前很多在网上办理的大流量卡都是有…

网络安全入门必选:十款免费的抓包工具有哪些?

下面给大家推荐几款好用的免费的抓包工具软件,有需要的小伙伴们来了解一下。 1. Wireshark抓包分析工具 4.0.1 Wireshark是一款功能强大的网络协议分析器,可以实时检测和抓取网络通讯数据。它支持多种协议和媒体类型,并具备丰富的显示过滤…

前端写代码真的有必要封装太好么?

前言 封装、代码复用、设计模式…… 这些都是方法,业务才是目的。技术始终是为业务服务的。能够满足业务需求,并且用起来舒服的,都是好方法。 不存在一套适用于所有项目的最佳代码组织方法,你需要结合业务,去不断地…

Web应用安全测试-专项漏洞(一)

Web应用安全测试-专项漏洞(一) 专项漏洞部分注重测试方法论,每个专项仅列举一个例子。实际测试过程中,需视情况而定。 文章目录 Web应用安全测试-专项漏洞(一)Web组件(SSL/WebDAV)漏…