uniapp设置滚动条滚动到指定位置

news2024/12/22 18:17:21

场景:左侧菜单栏,每次切换时,需要右侧商品展示区保持滚动条及页面在最顶部

 

1.利用scroll-view 中scroll-top属性实现

1.1设置scrollToTop属性为0

data() {
	return {
		// 保证每次切换,滚动条位置都在最顶部
		scrollToTop: 0,
	};
}

1.2 菜单栏切换时clickFirstCategory切换scrollToTop的值

scrollToTop在0,1之间切换,通过1px的差别使页面可以正常渲染

<!-- 左侧菜单栏 -->
			<scroll-view class="category-first" :enable-flex="true" scroll-y :show-scrollbar="false"
				:scroll-with-animation="true">
				<view @click="clickFirstCategory(index)" :class="['first-item',isActive===index?'active':'']"
					v-for="(category,index) in categoryList" :key="category.cat_id">
					{{category.cat_name}}
				</view>
			</scroll-view>
clickFirstCategory(index) {	
	// 每次点击都保证scroll滚动条在最顶部
	this.scrollToTop = this.scrollToTop ? 0 : 1
},
<!-- 右侧商品列表 -->
<scroll-view class="category-content" :enable-flex="true" scroll-y :show-scrollbar="false"
	:scroll-top="scrollToTop" :scroll-with-animation="true">
...
</scroll-view>

2.使用uni.pageScrollTo()方法

<template>
	<view style="height: 2000px;" class="cart-box">
		顶部
	</view>
	<button @click="backToTop">backToTop</button>
</template>

<script>
	export default {
		data() {
			return {
			};
		},
		methods: {
			backToTop(){
				uni.pageScrollTo({
					selector: ".cart-box",
					scrollTop: 0
				})
			}
		},
	}
</script>

3.uni.pageScrollTo()和scroll-view组件使用区别

1)使用 uni.pageScrollTo 方法,属于页面级别滚动。

如果传入 scrollTop 不起效,应该是布局的问题, 它是页面级的滚动:所有的 滚动单元 必须是在根元素下,由 滚动单元 直接撑起来的高度,就可以滚动到指定位置。
2)使用 scroll-view 标签的属性:scroll-top(距离值 num) 或 scroll-into-view(子元素的id,不能以数字开头 string); 属于区域级别滚动。
两种方式的前提是:提供具体的高度值

参考:uniapp 将元素滚动到指定位置的两种方法总结_uniapp滚动到指定元素的位置_铁锤妹妹@的博客-CSDN博客

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

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

相关文章

实验篇(7.2) 13. 站对站安全隧道 - 仅一方发起连接(FortiGate-IPsec) ❀ 远程访问

【简介】上一篇实验发现&#xff0c;两端都是可以远程的公网IP的话&#xff0c;两端防火墙都可以发出连接请求&#xff0c;并且都能够连通。这样的好处是安全隧道不用随时在线&#xff0c;只在有需求时才由发起方进行连接。但是现实中很多情况下只有一端公网IP可以远程&#xf…

C++语言与C的不同之处

头文件 C语言的引用头文件的方式是include名字.h的方式进行引用&#xff0c;而C去掉了.h&#xff0c;但是又是完全兼容C语言的。在库前面添加一个c来表明这个库是来自于C语言的。 //C语言的方法&#xff1a;带.h的方式进行include #include<stdio.h> #include<math.…

Python实现PSO粒子群优化支持向量机分类模型(svc算法)项目实战

说明&#xff1a;这是一个机器学习实战项目&#xff08;附带数据代码文档视频讲解&#xff09;&#xff0c;如需数据代码文档视频讲解可以直接到文章最后获取。 1.项目背景 PSO是粒子群优化算法&#xff08;Particle Swarm Optimization&#xff09;的英文缩写&#xff0c;是一…

DevChat 上线 VSCode 插件!国内开源的 AI 编程,做不被 AI 取代的新程序员!

打不过就加入。与其担心被 AI 取代&#xff0c;不如现在就学习驾驭它。 &#xff08;要用 AI 来辅助写代码&#xff0c;国际主流的几个大语言模型的表现都不尽如人意&#xff0c;谁用谁知道……除了 Claude 我们还在测试中。于是&#xff0c;我们基于大语言模型&#xff0c;做…

数据指北 AI

大家好&#xff0c;我是脚丫先生 (o^^o) &#x1f604; &#x1f600; 与GPT-AI聊天是一件很有趣的事情&#xff01; 最近一直没更新&#xff0c;在忙于研究搭建GPT~~~搭建了一个可以二开的数据指北AI。 目前模型是用的GPT3&#xff0c;有点不精准。 鲁迅和周树人的关系都搞…

阿里云数据库PolarDB MySQL版倚天ARM架构详解

阿里云云原生数据库PolarDB MySQL版推出倚天ARM架构&#xff0c;倚天ARM架构规格相比X86架构规格最高降价45%&#xff0c;PolarDB针对自研倚天芯片&#xff0c;从芯片到数据库内核全链路优化&#xff0c;助力企业降本增效。基于阿里云自研的倚天服务器&#xff0c;同时在数据库…

html2canvas给指定区域添加满屏水印

效果图如下&#xff1a; 直接贴上代码 下载插件&#xff1a; npm i html2canvas <template><div ref"imageDom"><el-button click"downloadPicture">下载</el-button><div><el-tableclass"tableX":height&q…

JUC并发编程:Condition的简单理解与使用

目录 1&#xff1a;概述 2&#xff1a;举例 3&#xff1a;condition 的一些方法 1&#xff1a;概述 Condition本质上是一个接口&#xff0c;Condition因素与Object监视器方法&#xff08; wait &#xff0c; notify和notifyAll &#xff09;成不同的对象&#xff0c;以得到具…

医院信息化PACS系统源码(影像阅片、报告模板、三维重建)

随着互联网强势走进医院行业&#xff0c;医院信息化建设已成为推动医院机构正常运转和进行现代化管理的基本要素。影像检查作为医院机构在疾病诊断中的高频诊疗项目&#xff0c;业务量自然不容小觑&#xff0c;为减轻医生工作压力&#xff0c;PACS系统成为机构“必选项”。 一、…

sheetJS实现把excel导入数据库

1、问题描述 最近在做报表导入数据库的需求&#xff0c;报表文件为excel里面有多个sheet。 2、解决方法 使用FileReader异步读取上传的文件。使用sheet.js进行excel表格内容的解析。使用bootstrap.js的tab组件对上传的表格进行一个页面预览的展示。 3、参考代码 ImportReportF…

Linux 文件实时备份 rsync+lsyncd

一、原理和说明 lsyncd官网 &#xff08;一&#xff09;软件说明 目的是每次只把新修改的同步&#xff0c;而不是全量备份。 Rsync&#xff08;同步&#xff09;&#xff1a;将一个服务器的一个文件夹的内容提交到另外一个服务器的文件夹 lsyncd&#xff08;差异检测并调用r…

Java阶段四Day06

Java阶段四Day06 文章目录 Java阶段四Day06关于配置响应内容中不包含Null的属性关于配置跨域关于如何不用添加RequestBody也可以接收请求 关于配置响应内容中不包含Null的属性 响应内容中的null可以使用以下三种方式中的一种即可解决&#xff0c;且范围越小&#xff0c;越优先 …

新人如何在实际工作做性能测试?怎么合理选择并发数?

目录&#xff1a;导读 前言一、Python编程入门到精通二、接口自动化项目实战三、Web自动化项目实战四、App自动化项目实战五、一线大厂简历六、测试开发DevOps体系七、常用自动化测试工具八、JMeter性能测试九、总结&#xff08;尾部小惊喜&#xff09; 前言 从小入手&#xf…

C++ 11(3) | 新的类功能、可变参数模板、lambda表达式

前文中我们讲述了C11中新增的右值引用&#xff0c;在本文中我们将继续讲解C11中的新的类功能、可变参数模板、lambda表达式。 新的类功能 默认成员函数 之前我们学习过在C中有六个默认成员函数构造函数、析构函数、拷贝构造函数、拷贝赋值重载、取地址重载、const 取地址重载…

【59天|503.下一个更大元素II ● 42. 接雨水】

503.下一个更大元素II class Solution { public:vector<int> nextGreaterElements(vector<int>& nums) {stack<int> st;int n nums.size();vector<int> res (n, -1);for(int i0; i<2*n;i){while(!st.empty()&&nums[i%n]>nums[st.t…

第13章_事务基础知识

第13章_事务基础知识 1.数据库事务概述 事务是数据库区别于文件系统的重要特性之一&#xff0c;当我们有了事务就会让数据库始终保持一致性&#xff0c;同时我们还能通过事务的机制恢复到某个时间点&#xff0c;这样可以保证已提交到数据库的修改不会因为系统崩溃而丢失。 1…

Moonbeam路由流动性

Moonbeam路由流动性&#xff08;Moonbeam Routed Liquidity, MRL&#xff09;使加密资产流动性能够从其他生态系统&#xff08;如以太坊、Solana、Polygon或Avalanche&#xff09;进入波卡生态系统。借助MRL&#xff0c;用户可以通过简洁的用户体验向/从波卡转移他们的流动性。…

横竖屏切换导致页面频繁重启?详细解读screenLayout

目录 前言configChangesscreenLayout平板问题总结 前言 前几天多名用户反馈同一个问题&#xff0c;在小新平板上无法上网课&#xff0c;点击上课按钮后就退回到首页了。了解了一下发现小新平板现在销量特别好&#xff0c;于是赶紧申请了一台测试机打算看看到底是什么问题。 最…

牛客网语法篇刷题(C语言) — 分支控制

作者主页&#xff1a;paper jie的博客_CSDN博客-C语言,算法详解领域博主 本文作者&#xff1a;大家好&#xff0c;我是paper jie&#xff0c;感谢你阅读本文&#xff0c;欢迎一建三连哦。 本文录入于《C语言-语法篇》专栏&#xff0c;本专栏是针对于大学生&#xff0c;编程小白…

附录6-todolist案例

效果是这样的 可以添加新任务&#xff0c;改变任务状态&#xff0c;与筛选任务列表 使用vant创建的项目 使用到了bootstrap&#xff0c;首先 npm install bootstrap进行安装&#xff0c;安装后导入css与js 上中下是三个组件&#xff0c;依次是 todo_input&#xff0c;todo_li…