uni-app【微信小程序】顶部tab栏与页面内容联动

小天吖

已于 2024-03-15 16:16:02 修改

阅读量1.6k

点赞数 11

分类专栏：小程序文章标签： uni-app 微信小程序 vue typescript

于 2024-03-15 16:11:03 首次发布

本文链接：https://blog.youkuaiyun.com/qq_43015778/article/details/136742242

版权

本文详细描述了一个使用Vue开发的项目，其中涉及顶部Tab栏的横向滚动和底部内容区域的上下滚动同步。开发者分享了代码片段，展示了如何通过计算滚动位置来保证不同长度分类名称的兼容性，并提到了注意事项，如处理margin影响的滚动计算。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

功能需求

1、需要每次点击tab的位置滚动到第一个，同时下面页面也需要滚动

2、下面内容左右滚动时，顶部tab也需要发生改变

具体效果展示

一、实现的原理

分为2部分顶部tab标签和底部swiper

顶部tab标签需要横向滚动 scroll-view

二、直接上代码，我写注释了

<template>
  <view class="container">
    <!-- 顶部模板滚动 -->
    <scroll-view class="cates" scroll-x="true" scroll-with-animation :scroll-left="scrollViewScrollLeft">
      <view v-for="(cate, index) in cates" :key="index" class="cate-item" :class="{ 'cate-item-active': currentId ==&