uni-app 实现 tabbar 左右滑动切换加吸顶效果

发布于 1周前 作者 sinazl 来自 Uni-App

uni-app 实现 tabbar 左右滑动切换加吸顶效果

求 tabbar左右滑动切换+吸顶效果 在APP上能够流畅运行的， 尝试用vue页面做过，在真机运行，吸顶效果很不友好。 求用原生做的。

信息类型 信息内容
开发环境 未提及
版本号 未提及
项目创建方式 未提及
Harmonyos Next教程
3 回复

如果你需要吸顶后，可继续左右拖动长列表，那请参考hello uni-app模板里的swiper-list，从HBuilderX2.6.6+起新建项目选择的hello uni-app模板带有该功能，是nvue实现的。


这个只能是一层 我本身页面就可以左右拖动 list只能在最外层 所以行不通

在uni-app中实现带有左右滑动切换功能的tabbar，并附带吸顶效果，可以通过以下步骤实现。我们将使用uni-app提供的tabBar配置和自定义组件来实现吸顶效果。

1. 配置 tabBar

首先，在pages.json中配置tabBar，这里我们假设有三个tab页面：

{
  "pages": [
    {
      "path": "pages/index/index",
      "style": {
        "navigationBarTitleText": "首页"
      }
    },
    {
      "path": "pages/list/list",
      "style": {
        "navigationBarTitleText": "列表"
      }
    },
    {
      "path": "pages/profile/profile",
      "style": {
        "navigationBarTitleText": "我的"
      }
    }
  ],
  "tabBar": {
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "首页"
      },
      {
        "pagePath": "pages/list/list",
        "text": "列表"
      },
      {
        "pagePath": "pages/profile/profile",
        "text": "我的"
      }
    ]
  }
}

2. 自定义吸顶组件

为了实现吸顶效果，可以创建一个自定义组件，比如StickyTabBar.vue，然后在每个tab页面中引入这个组件。

StickyTabBar.vue

<template>
  <view class="sticky-tab-bar" :style="{ top: statusBarHeight + 'px' }">
    <!-- 这里可以放置自定义的tabbar逻辑 -->
    <view v-for="(item, index) in tabList" :key="index" @click="switchTab(index)">
      {{ item.text }}
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      tabList: [
        { text: '首页', pagePath: '/pages/index/index' },
        { text: '列表', pagePath: '/pages/list/list' },
        { text: '我的', pagePath: '/pages/profile/profile' }
      ],
      statusBarHeight: uni.getSystemInfoSync().statusBarHeight
    };
  },
  methods: {
    switchTab(index) {
      uni.switchTab({ url: this.tabList[index].pagePath });
    }
  }
};
</script>

<style>
.sticky-tab-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  justify-content: space-around;
  background-color: #fff;
  border-top: 1px solid #ddd;
}
</style>

3. 在每个tab页面中引入吸顶组件

在每个tab页面（如pages/index/index.vue、pages/list/list.vue、pages/profile/profile.vue）中引入并使用StickyTabBar.vue组件：

<template>
  <view>
    <StickyTabBar />
    <!-- 页面内容 -->
  </view>
</template>

<script>
import StickyTabBar from '@/components/StickyTabBar.vue';

export default {
  components: {
    StickyTabBar
  }
};
</script>

通过上述步骤，你可以实现一个带有左右滑动切换功能的tabbar，并附带吸顶效果。注意，实际项目中可能需要更复杂的逻辑处理，比如动态获取tab列表、处理tab点击事件等，这里提供的只是一个基础实现。

回到顶部