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 …

嵌入式常用调试方法

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

重生奇迹mu魔法师介绍

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

线程池前置知识

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

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

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

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

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

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数组…

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;助你…

LangChain 与 Elastic 合作为 RAG 添加向量数据库和语义重排序

作者&#xff1a;来自 Elastic Max Jakob 在过去的一年中&#xff0c;我们看到了生成式人工智能领域的许多进展。许多新服务和库应运而生。LangChain 已成为使用大型语言模型 (LLM) 构建应用程序的最受欢迎的库&#xff0c;例如检索增强生成 (RAG) 系统。该库使原型设计和试验不…

大数据学习——安装hive

一. 安装准备 1. 打开虚拟机&#xff0c;启动配置了NameNode节点的虚拟机&#xff08;一般和mysql在同一台虚拟机&#xff09;并连接shell 二. 安装 1. 上传hive安装包 hive安装包 提取码&#xff1a;6666 切换到/opt/install_packages目录下 可以将之前解压的rpm文件删除…

C语言调用so/dll动态库

文章目录 windows系统linux系统windows 与 linux下 C 调用动态库的差异 C语言调用动态链接库 windows系统 windows系统下&#xff0c;C语言调用win下的动态库dll&#xff0c;使用头文件<windows.h>。 准备基础C代码 lauf.c #include <stdio.h>// 定义函数&#x…

算法课程笔记——线段树维护矩阵

算法课程笔记——线段树维护矩阵 2

【stm32】基于I2C协议的OLED显示(利用U82G库)

【stm32】基于I2C协议的OLED显示&#xff08;利用U82G库&#xff09; 一、实验目的二、探究任务三、原理探究3.1 I2C接口3.1.1 概述3.1.2 主要特点3.1.3 功能描述3.1.4 从模式3.1.5 主模式3.1.6 时序协议 3.2 OLED屏3.2.1 工作原理3.2.2 汉字点阵显示原理3.2.3 汉字点阵取模 四…

【后端开发】服务开发场景之高性能(CDN与负载均衡,数据库优化,消息队列)

【后端开发】服务开发场景之高性能&#xff08;CDN与负载均衡&#xff0c;数据库优化&#xff0c;消息队列&#xff09; 文章目录 1、内容分发网络&#xff08;CDN &#xff09; & 负载均衡算法CDN是什么&#xff1f;&#xff08;静态资源加速&#xff09;CDN的应用场景&am…