Uniapp实现页面滚动Tab吸顶,点击tab内容滚动到对应tab内容位置

1.template结构

    <view class="content-tabs-box"><view class="content-tabs" :class="{'is-fixed': isTabFixed}"><viewv-for="(item, index) in detailTabs" :key="index" class="tab" :class="{'active': curTab === index}" @click="scrollTo(index, item.className)">{{item.name}}</view></view></view><!-- 正文详情 --><view class="library-detail-content"><view v-if="libraryDetail.videoUrl" class="content-msg"><video :src="libraryDetail.videoUrl" autoplay style="width: 100%;" /></view><view v-else class="content-msg" v-html="libraryDetail.content"></view></view><!-- 相关附件 --><view v-if="attachment.length > 0" class="library-detail-attachment"><view class="attachment-box"><view class="title">相关附件</view></view><view class="attachment-list-box"><view v-for="(item, index) in attachment" :key="index" class="attchment-list"><view class="list-name">{{ item.name }}</view><view class="download-btn" @click="download(item.url)"><image src="@/static/images/allPolicy/download-btn.png" style="width: 35rpx;height: 36rpx;margin-right: 10rpx;" mode="scaleToFill" /><view>下载</view></view></view></view></view><!-- 图文解读 --><view v-if="relatedPosts.length > 0" class="library-detail-relatedPosts"><view class="attachment-box"><view class="title">图文解读</view></view><view class="attachment-list-box"><view v-for="(item, index) in relatedPosts" :key="index" @click="toWebView(item.url, item.title)" class="attchment-list"><view><span style="margin-right: 20rpx;">{{ postType(item.related_classify) }}</span> {{ item.title }}</view></view></view></view> 

2.定义变量

  data() {return {curTab: 0,isTabFixed: false,tabTop: 0,  // tab距离顶部的距离curClassName: '',pageScrollTop: 0}},computed() {detailTabs() {let tabs = [{name: '正文详情',className: '.library-detail-content'}]if(this.attachment && this.attachment.length > 0) {tabs.splice(1, 0, {name: '相关附件',className: '.library-detail-attachment'})}if(this.relatedPosts && this.relatedPosts.length > 0) {tabs.splice(2, 0, {name: '图文解读',className: '.library-detail-relatedPosts'})}return tabs},}

3.方法定义

// 点击tab滚动事件scrollTo(tab, className) {if(!className) returnif(this.curClassName == className) returnthis.curTab = tabconst query = uni.createSelectorQuery().in(this);query.select(className).boundingClientRect(data => {uni.pageScrollTo({scrollTop: className == '.library-detail-content' ? 0 : (data?.top + ((this.pageScrollTop || 0))),duration: 300})}).exec();this.curClassName = className},// uni页面滚动监听事件onPageScroll(e) {// 获取tabs的距离顶部的距离this.tabTop = uni.createSelectorQuery().select('.content-tabs').boundingClientRect(data => {this.tabTop = data.top;this.isTabFixed = (e.scrollTop > this.tabTop)this.pageScrollTop = e.scrollTop}).exec();},

4.实现效果

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

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

相关文章

【git使用四】git分支理解与操作(详解)

目录 &#xff08;1&#xff09;理解git分支 主分支&#xff08;主线&#xff09; 功能分支 主线和分支关系 将分支合并到主分支 快速合并 非快速合并 git代码管理流程 &#xff08;2&#xff09;理解git提交对象 提交对象与commitID Git如何保存数据 示例讲解 &a…

lnmp的介绍与源码部署以及 |什么是正向、反向、透明代理 | 常见的集群有哪些

lnmp 文章目录 lnmp1.LNMP是什么2. lnmp简介3.系统特点4.优点5.lnmp部署5.1 nginx安装5.2 mysql安装5.3 php安装5.4配置nginx服务处理php 6.扩展知识点1.什么是集群2.常见的集群有哪些集群的分类1、高可用集群2、负载均衡集群3、分布式计算集群4、高性能集群(High Performance …

TCP标志

SYN (Synchronize) 和 ACK (Acknowledgement) 是TCP协议中的两种重要标志&#xff08;flags&#xff09;&#xff0c;用于建立和维护连接。它们通常在TCP三次握手过程中使用。 1、SYN标志&#xff1a; 当客户端想要建立于服务器的TCP连接时&#xff0c;它会发送一个带有SYN白…

嵌入式常用调试方法

目录 调试工具 日志打印 1. Debug日志打印 2. RTT日志打印 3. 串口日志打印 总结 嵌入式系统的调试是一个复杂且关键的过程&#xff0c;涉及多种工具和技术的综合应用。以下是对嵌入式常见调试工具、日志打印方式的全面报告&#xff0c;包括Debug、RTT&#xff08;Real-T…

重生奇迹mu魔法师介绍

魔法师擅长&#xff1a;远距作战、攻击&辅助魔法使用 转职&#xff1a;魔导师&#xff08;2转&#xff09;&#xff0c;神导师&#xff08;3转&#xff09; 魔法师可以通过多样的魔法&#xff0c;展现华丽的效果和强大的实力。成长初期因为体力少&#xff0c;经常受到死亡…

Linux Shell命令vim使用

一、引例 以判断引出&#xff08;学过C其他语言容易接受&#xff09;。 简单命令说明&#xff1a; -e 测试文件是否存在 -f 测试文件是否为普通文件 -d 测试文件是否为目录 -r 测试当前用户对某文件是否具有“可读”权限 -w 测试当前用户对某文件是否具有“可写”权限…

线程池前置知识

并发和并行 并发是指在单核CPU上&#xff0c;多个线程占用不同的CPU时间片。线程在物理上还是串行执行的&#xff0c;但是由于每个线程占用的CPU时间片非常短&#xff08;比如10ms&#xff09;&#xff0c;看起来就像是多个线程都在共同执行一样&#xff0c;这样的场景称作并发…

Python私教张大鹏 Vue3整合AntDesignVue之Cascader 级联选择

何时使用 需要从一组相关联的数据集合进行选择&#xff0c;例如省市区&#xff0c;公司层级&#xff0c;事物分类等。 从一个较大的数据集合中进行选择时&#xff0c;用多级分类进行分隔&#xff0c;方便选择。 比起 Select 组件&#xff0c;可以在同一个浮层中完成选择&#…

聊聊C/S模式架构的优缺点

C/S模式架构&#xff0c;即客户端-服务器&#xff08;Client/Server&#xff09;架构&#xff0c;是一种常见的软件系统架构&#xff0c;以下是C/S模式架构的优缺点分析。 C/S架构优点部分&#xff1a; 性能高效&#xff1a;由于客户端直接与服务器进行数据交换&#xff0c;没…

关于创建Cloudeflare的r2桶以及如何使用rclone连接

一、名词解释 r2桶是cloudflare给用户的免费10G储存空间&#xff0c;可与自定义域创建链接的储存storge。 rclone是开源工具&#xff0c;用于在本地通过软件链接云储存storege&#xff0c;让用户可以修改、同步、删除云储存中的内容。 rcloneBrowser是rclone的GUI版本&#x…

足底筋膜炎怎样才能彻底治愈

这里写自定义目录标题 欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题&#xff0c;有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants 创建一个自定义列表如何创建一个…

4.MongoDB sharding Cluster 分片集群

MongoDB分片集群的介绍&#xff1a; 是MongoDB提供的一种可水平扩展的数据存储解决方案。 当单个MongoDB服务器无法满足数据存储需求或吞吐量要求时&#xff0c;可以使用分片集群来分散数据量和查询负载。分片集群的结构组成&#xff1a; 1.分片&#xff08;shards&#xff09;…

windows中安装libreOffice最新版本24.2.4

windows中安装libreOffice最新版本24.2.4 一. 介绍二. 安装过程2.1 下载 LibreOffice2.2 安装过程2.3 页面展示 三. 参考文档 前言 这是我在这个网站整理的笔记,有错误的地方请指出&#xff0c;关注我&#xff0c;接下来还会持续更新。 作者&#xff1a;神的孩子都在歌唱 一. 介…

易基因:【表观遗传学基础】如何研究DNA甲基化

大家好&#xff0c;这里是专注表观组学十余年&#xff0c;领跑多组学科研服务的易基因。 表观遗传学近几年取得的一系列研究进展&#xff0c;确实吸引着越来越多的关注&#xff01;为了帮大伙儿梳理一下表观遗传学的基本概念和研究方法&#xff0c;小编打算开一个系列专题&…

VBA实现关闭Excel自动计算,关闭屏幕刷新

Excel代码提速神器 涉及到提取表格大量数据操作&#xff0c;复制粘贴多个单元格时&#xff0c;尽量避免一个个单元格提取&#xff0c;或者一行行一列列提取数值&#xff0c;设计大量IO流操作非常浪费时间。尽量找出数据之间的规律&#xff0c;批量选中复制粘贴&#xff0c;找到…

第五十一天 | 1143.最长公共子序列

题目&#xff1a;1143.最长公共子序列718.最长重复子数组的区别是&#xff0c;子序列不要求连续&#xff0c;子数组要求连续。这一差异体现在dp数组含义和递推公式中&#xff0c;本题是子序列&#xff0c;那就要考虑上nums1[i - 1] ! nums2[j - 1]的情况。 本道题与 1.dp数组…

2024年你需要了解的仅有的10种防检测浏览器

在不断发展的互联网隐私和安全领域&#xff0c;要保持领先地位就必须使用最先进的工具和方法&#xff0c;包括VPN、密码管理器、防病毒软件、防火墙、广告拦截器等。在这些安全措施中&#xff0c;反侦测浏览器占有独特的地位&#xff0c;因为它们通过掩盖用户的数字足迹来增强网…

inBuilder 低代码平台新特性推荐 - 第二十一期

今天给大家带来的是inBuilder低代码平台新特性推荐第二十一期——inBuilder单点登录链接生成器 一、场景介绍 在系统间的集成对接过程中&#xff0c;普遍存在通过单点登录链接进入系统的场景。比如通过单点登录链接进入流程工作台&#xff0c;进入用户管理等功能。inBuilder单…

单点登录分析介绍

文章目录 1、单点登录解决方案1.1、后端保存登录状态1.2、token模式 2、user服务-登录接口2.1、UserController2.2、UserInfoServiceImpl2.3、载荷2.4、响应2.5、Redis Desktop Manager 1、单点登录解决方案 多个系统只有一个登录服务 1.1、后端保存登录状态 1.2、token模式 …

pdf书签怎么做?这三款软件轻松驾驭文档!

在数字化时代&#xff0c;PDF文件已成为我们工作、学习中的重要组成部分。然而&#xff0c;面对海量的PDF内容&#xff0c;如何快速定位关键信息&#xff0c;提高阅读效率呢&#xff1f;答案就是——制作PDF书签。今天&#xff0c;我将为大家介绍三款实用的软件&#xff0c;助你…