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

news2024/11/7 13:47:52

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.coloradmin.cn/o/1819565.html

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

相关文章

pointnet

train_classification.py 把第91行修改为自己的路径&#xff0c;就可以运行了 test_cla.py&#xff0c;需要训练完才能运行测试&#xff0c;我没训练完&#xff0c;所以报错显示我没有best.pth文件 网盘里面是我运行的训练和测试的视频&#xff0c;以及源代码&#xff0c;数…

ROS 自动驾驶多点巡航

ROS 自动驾驶多点巡航&#xff1a; 1、首先创建工作空间&#xff1a; 基于我们的artca_ws&#xff1b; 2、创建功能包&#xff1a; 进入src目录&#xff0c;输入命令: catkin_create_pkg point_pkg std_msgs rospy roscpptest_pkg 为功能包名&#xff0c;后面两个是依赖&a…

新等保2.0防护体系方案

等保2.0防护体系 吉祥学安全知识星球&#x1f517;除了包含技术干货&#xff1a;Java代码审计、web安全、应急响应等&#xff0c;还包含了安全中常见的售前护网案例、售前方案、ppt等&#xff0c;同时也有面向学生的网络安全面试、护网面试等。 最近在写一些咨询相关的材料&…

怎么把日常的文件做二维码?适用excel、word、pdf制作二维码的方法

文件转换成二维码是将文件转成一个链接&#xff0c;将链接做成二维码之后&#xff0c;扫码就可以访问该链接中的文件内容&#xff0c;通过这种方式来实现文件的快速分享。将文件生成二维码能够随时修改内容&#xff0c;可以更新替换当前文件&#xff0c;不断的通过一个二维码来…

数据通信与网络

计算机网络的组成 计算机网络是由计算机系统、网络节点和通信链路等组成的系统。 逻辑上分为资源子网和通信子网。 CCP&#xff1a;communication control processor 通信控制处理机&#xff0c;网络节点&#xff0c;交换机、路由器等设备。 逻辑组成&#xff1a; &#xf…

二阶段提交(2pc)协议

二阶段提交&#xff08;2pc&#xff09;协议 1、 简介 二阶段提交算法是一个分布式一致性算法&#xff0c;强一致、中心化的原子提交协议&#xff0c;主要用来解决分布式事务问题。在单体spring应用中我们往往通过一个Transactional注解就可以保证方法的事务性&#xff0c;但…

线性代数|机器学习-P13计算特征值和奇异值

文章目录 1. 特征值1.1 特征值求解思路1.1 相似矩阵构造 1. 特征值 1.1 特征值求解思路 我们想要计算一个矩阵的特征值&#xff0c;一般是用如下公式&#xff1a; ∣ ∣ A − λ I ∣ ∣ 0 → λ 1 , λ 2 , ⋯ , λ n \begin{equation} ||A-\lambda I||0\rightarrow \lamb…

CPN Tools学习——时间和队列【重要】

-Timed Color Sets 时间颜色集 -Token Stamps 令牌时间戳 -Event Clock 全局/事件/模拟时钟 -Time Delays on Transitions过渡的时间延迟 - List Color Set列表颜色集 - Queue排队 1.时间颜色集 在定时CPN模型令牌中有&#xff1a; &#xff08;1&#xff09;象征性的颜…

CTFHUB-SQL注入-Cookie注入

由于本关是cookie注入&#xff0c;就不浪费时间判断注入了&#xff0c;在该页面使用 burp工具 抓包&#xff0c;修改cookie后面&#xff0c;加上SQL语句&#xff0c;关掉burp抓包&#xff0c;就可以在题目页面显示结果了 判断字段数量 发现字段数量是2列 使用id-1 union sele…

智慧工地:构筑未来建筑的智能脉络

在科技日新月异的今天&#xff0c;智慧城市的建设已不再局限于城市生活的方方面面&#xff0c;而是深入到了城市发展的每一个细胞——工地。本文旨在深度剖析智慧工地的核心价值、关键技术及对建筑业转型升级的深远影响。 一、智慧工地&#xff1a;定义与愿景 智慧工地是指运…

~$开头的临时文件是什么?可以删除吗?

&#xff08;2023.12.4&#xff09; 在进行Word文档编辑的时候&#xff0c;都会产生一个以~$开头的临时文件&#xff0c;它会自动备份文档编辑内容&#xff0c;若是正常关闭程序&#xff0c;这个文档就会自动消失&#xff1b;而在非正常情况下关闭word文档&#xff0c;如断电&…

智能座舱软件性能与可靠性的评估和改进

随着智能汽车的不断发展&#xff0c;智能座舱在性能与可靠性上暴露出体验不佳、投诉渐多的问题&#xff0c;本文从工程化的角度简述了如何构建智能座舱软件的评估框架&#xff0c;以及如何持续改进其性能和可靠性。 1. 智能座舱软件性能和可靠性表现不佳 据毕马威发布的《2023…

线程池前置知识

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

认识线性调频信号(LFM)和脉冲压缩

目录 1. 线性调频&#xff08;LFM&#xff09;信号&#xff1a;2.Matlab仿真3.脉冲压缩 微信公众号获取更多FPGA相关源码&#xff1a; 1. 线性调频&#xff08;LFM&#xff09;信号&#xff1a; 在时域中&#xff0c;一个理想的线性调频信号或脉冲持续时间为T秒&#xff0c;…

CNAS认证是什么?怎么做?

在全球化日益深入的今天&#xff0c;产品质量和安全已经成为企业生存和发展的重要基石。而在这个过程中&#xff0c;CNAS认证作为一种权威性的认可机制&#xff0c;发挥着不可替代的作用。那么&#xff0c;CNAS认证究竟是什么&#xff1f;我们又该如何进行这一认证过程呢&#…

派能协议,逆变器测试问题记录

问题一&#xff1a;逆变器无法进行逆变 通过抓取逆变器与bms的通讯报文&#xff0c;如下&#xff1a; 根据派能协议&#xff0c;报文标黄的对应充放电状态&#xff0c;30 30对应的数据为0 0&#xff0c;说明充放电状态全部置0&#xff0c;导致逆变器无法逆变。 问题二&#xf…

安装好IDEA后,就能够直接开始跑代码了吗?

我实习的第一天&#xff0c;睿哥叫我安装了IDEA&#xff0c;然后我就照做了。 之后&#xff0c;我把gitlab的代码拉下来后&#xff0c;发现好像没有编译运行的按钮&#xff0c;所以我就跑去问睿哥。睿哥当时看了看后&#xff0c;发现原来我没有安装JDK&#xff0c;他就叫我安装…

下载elasticsearch-7.10.2教程

1、ES官网下载地址 Elasticsearch&#xff1a;官方分布式搜索和分析引擎 | Elastic 2、点击下载Elasticsearch 3、点击 View past releases&#xff0c;查看过去的版本 4、选择版本 Elasticsearch 7.10.2&#xff0c;点击 Download&#xff0c;进入下载详情 5、点击 LINUX X8…

LeetCode435无重叠区间

题目描述 给定一个区间的集合 intervals &#xff0c;其中 intervals[i] [starti, endi] 。返回 需要移除区间的最小数量&#xff0c;使剩余区间互不重叠 。 解析 由于要删除尽可能少的区间 &#xff0c;因此区间跨度大的一定是要先删除的&#xff0c;这样就有两种贪心思想了…

【ARM Cache 及 MMU 系列文章 6.2 -- ARMv8/v9 如何读取 Cache 内部数据并对其进行解析?】

请阅读【ARM Cache 及 MMU/MPU 系列文章专栏导读】 及【嵌入式开发学习必备专栏】 文章目录 Direct access to internal memoryL1 cache encodingsL1 Cache Data 寄存器Cache 数据读取代码实现测试结果Direct access to internal memory 在ARMv8架构中,缓存(Cache)是用来加…