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

思路:运用uniapp原生提供方法uni.createSelectorQuery()获取滚动对应节点的信息,即节点距离页面顶部的距离,再通过uniapp原生监听页面滚动事件onPageScroll,获取页面内容滚动的高度,二者相加即定位到对应节点的滚动距离。

1.template结构

    <view class="content-tabs-box">
      <view class="content-tabs" :class="{'is-fixed': isTabFixed}">
        <view
          v-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) return
      if(this.curClassName == className) return
      this.curTab = tab
      const 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.mfbz.cn/a/715043.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

java设计模式和面向对象编程思想

Java设计模式和面向对象编程思想是软件开发中的核心概念&#xff0c;对于构建可维护、可扩展的软件系统至关重要。下面是对这两个主题的知识点总结&#xff1a; 面向对象编程&#xff08;OOP&#xff09;思想 封装&#xff1a;将数据&#xff08;属性&#xff09;和操作这些数据…

如何选择合适的大模型框架:LangChain、LlamaIndex、Haystack 还是 Hugging Face

节前&#xff0c;我们星球组织了一场算法岗技术&面试讨论会&#xff0c;邀请了一些互联网大厂朋友、参加社招和校招面试的同学。 针对算法岗技术趋势、大模型落地项目经验分享、新手如何入门算法岗、该如何准备、面试常考点分享等热门话题进行了深入的讨论。 合集&#x…

详解 Spring Security:全面保护 Java 应用程序的安全框架

详解 Spring Security&#xff1a;全面保护 Java 应用程序的安全框架 Spring Security 是一个功能强大且高度可定制的框架&#xff0c;用于保护基于 Java 的应用程序。它为身份验证、授权、防止跨站点请求伪造 (CSRF) 等安全需求提供了解决方案。下面将更详细地介绍 Spring Se…

ComfyUI

文章目录 一、关于 ComfyUI特点快捷键QA你为什么做这个&#xff1f;这是给谁的&#xff1f; 二、安装1、Windows直接链接下载如何在另一个UI和ComfyUI之间共享模型&#xff1f; 2、Jupyter Notebook3、手动安装&#xff08;Windows、Linux&#xff09;AMD GPU&#xff08;仅Lin…

2024年黑龙江省特岗招聘公告出了!!!

2024年黑龙江省农村义务教育阶段学校特设岗位教师招聘822人公告 (1、网上报名 时间&#xff1a;6月17日9&#xff1a;00—6月22日17&#xff1a;00。 网址&#xff1a; https&#xff1a;//sfyz.hljea.org.cn&#xff1a;7006/tgjs 2、网上资格审查 资格审查时间&#xff1a;6月…

时间卷积网络与膨胀卷积:深入理解其原理与应用

TCN, Temporal Convolutional Networks 时间卷积网络与膨胀卷积&#xff1a;深入理解其原理与应用一、时间卷积网络&#xff08;TCN&#xff09;简介二、膨胀卷积的核心概念1. **膨胀卷积&#xff08;Dilated Convolution&#xff09;**2. **Kernel&#xff08;卷积核&#xff…

js 前端 Function.prototype.call.call(0[‘toString‘], *, 16)

这个函数将 数组转任意进制 Function.prototype.call.call(0[toString], *, 16)

计算机组成原理之定点运算器的组成

文章目录 定点运算器的组成逻辑运算ALU两级先行进位的ALU 总线单总线结构双总线结构三总线结构 定点运算器的组成 逻辑运算 总的来说&#xff0c;逻辑非运算就是按位取反&#xff1b;逻辑加运算就是按位取或运算&#xff1b;逻辑乘运算就是按位取和运算&#xff1b;逻辑异运算…

2-6 基于matlab2018B的语音信号降噪和盲源分离GUI界面

基于matlab2018B的语音信号降噪和盲源分离GUI界面&#xff0c;包括维纳滤波&#xff0c;小波降噪、高通、低通、带通滤波&#xff0c;及提出的滤波方法。每个功能均展示降噪前后声音效果并外放出来。程序已调通&#xff0c;可直接运行。 2-6 语音信号降噪 盲源分离 GUI界面 - 小…

UML相关2

内容 说明 用例编号 UC-1 用例名称 客户注册 用例说明 客户参与者通过注册获得进入彬使用系统的权限 参与者 客户 前置条件 无 后置条件 系统正确接收用户信息并保存到数据库 基本路径 发布注册申请系统显示注册页面客户填写相应信息并提交注册成功后可以进行其…

贷款投资决策和常用财务函数

前段时间上了一门excel操作的课&#xff0c;本文结合其中介绍财务函数以及投资决策分析相关的部分&#xff0c;对贷款中的现金流计算进行深入的分析。 以等额本息产品为例进行实操计算&#xff0c;假设某产品本金12000元&#xff0c;期限12&#xff0c;IRR利率24%。每期还款113…

生信分析进阶5 - 全外显子组变异检测和ANNOVAR注释Snakemake分析流程

基于yaml或ini配置文件&#xff0c;配置文件包含例如样本名称、参考基因组版本、exon capture bed文件路径、参考基因组路径和ANNOVAR注释文件等信息。 基于该流程可以实现全外显测序的fastq文件输入到得到最终变异VCF文件。 1. Snakemake分析流程基础软件安装 # conda安装 …

面试题 17.17. 多次搜索

链接&#xff1a;. - 力扣&#xff08;LeetCode&#xff09; 题解&#xff1a; class Solution { private:struct Trie {Trie() {end false;index -1;next.resize(26);}bool end;int index;std::vector<std::unique_ptr<Trie>> next;};void insert_trie(int in…

C++编程:vector容器的简单模拟实现

前言&#xff1a; 在C标准库&#xff08;STL&#xff09;中&#xff0c;vector容器是最常见使用的动态数组。它结合了链表与数组的优点&#xff0c;提供了灵活的大小调整与高效的随机访问。本文将简单的对vector容器进行介绍并且对vector容器简单的模拟实现。 一、vector的文…

web前端:作业三

1.回到顶部案例(固定定位) <!DOCTYPE html> <html><head><meta charset"utf-8"><title></title><style>#container{height: 5000px;border: 1px solid blue;}#back-button{width: 100px;height: 100px;border: 1px solid…

Redis分布式锁的实现、优化与Redlock算法探讨

Redis分布式锁最简单的实现 要实现分布式锁,首先需要Redis具备“互斥”能力,这可以通过SETNX命令实现。SETNX表示SET if Not Exists,即如果key不存在,才会设置它的值,否则什么也不做。利用这一点,不同客户端就能实现互斥,从而实现一个分布式锁。 举例: 客户端1申请加…

比亚迪智驾技术震撼登场!L3级自动驾驶领跑全国,无图导航、夜间挑战轻松应对!

作为新能源汽车领域的翘楚&#xff0c;比亚迪在电池技术与智能驾驶方面都有着卓越的表现。近日&#xff0c;比亚迪凭借其领先的智驾技术&#xff0c;成功入选全国首批L3级自动驾驶上路及行驶试点名单&#xff0c;这无疑将推动智驾技术的普及速度。 你知道吗&#xff1f;比亚迪智…

Elasticsearch 认证模拟题 - 22

一、题目 索引 task 索引中文档的 fielda 字段内容包括了 hello & world&#xff0c;索引后&#xff0c;要求使用 match_phrase query 查询 hello & world 或者 hello and world 都能匹配该文档 1.1 考点 分词器 1.2 答案 # 创建符合条件的 task 索引&#xff0c;…

SM2加密算法的公私钥和密文格式以及不同编程语言之间无法互相解密问题分析

1 文章介绍 本文章主要介绍了SM2加密算法的公钥、私钥和密文格式,以及对于不同编程语言之间无法互相解密问题进行了分析和处理。2 SM2加密算法格式 SM2在线加解密测试2.1 公钥格式 SM2公钥是SM2曲线上的一个点,由横、纵坐标两个分量来表示,简记为Q,每个分量长度为256位,即…

Apipost模拟HTTP客户端

模拟HTTP客户端的软件有很多&#xff0c;其中比较著名的就有API-FOX、POSTMAN。 相信很多小伙伴都使用POSTMAN。这篇博客主要介绍Apipost的原因是&#xff0c;Apipost无需下载&#xff0c;具有网页版。 APIFOX的站内下载&#xff1a; Api-Fox&#xff0c;类似于PostMan的软件…