uniapp做Pc端一个页面，滚动到一定高度tab栏切换

可以使用uniapp提供的scroll-view组件来实现滚动效果，然后通过监听scroll-view的滚动事件，当滚动到一定高度时，触发tab栏的切换。具体实现可以参考uniapp官方文档或者相关教程。

相关问题

用原生uniapp 写一个tab栏切换数据

好的，以下是一个使用原生 uniapp 写的选项卡切换数据的示例代码：

<template>
  <view>
    <view class="tab-bar">
      <view class="tab-item" :class="{active: currentTab === 0}" @click="handleTabClick(0)">选项卡1</view>
      <view class="tab-item" :class="{active: currentTab === 1}" @click="handleTabClick(1)">选项卡2</view>
      <view class="tab-item" :class="{active: currentTab === 2}" @click="handleTabClick(2)">选项卡3</view>
    </view>
    <view v-show="currentTab === 0">选项卡1的内容</view>
    <view v-show="currentTab === 1">选项卡2的内容</view>
    <view v-show="currentTab === 2">选项卡3的内容</view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      currentTab: 0
    };
  },
  methods: {
    handleTabClick(index) {
      this.currentTab = index;
    }
  }
};
</script>

<style>
.tab-bar {
  display: flex;
  justify-content: space-between;
  background-color: #f5f5f5;
}

.tab-item {
  flex: 1;
  text-align: center;
  padding: 10px;
  font-size: 16px;
  color: #666;
}

.tab-item.active {
  color: #f00;
}
</style>

在上面的代码中，我们使用了 `view` 组件和 CSS 来实现了选项卡切换的效果。通过 `v-show` 指令来控制选项卡内容的显示，`currentTab` 变量表示当前选中的选项卡的索引，初始值为 0。在选项卡上绑定 `@click` 事件，通过调用 `handleTabClick` 方法来处理选项卡切换逻辑。在 `handleTabClick` 方法中，将当前选中的选项卡的索引设置为 `currentTab` 变量的值，从而控制对应选项卡内容的显示。同时，我们也使用了 CSS 样式来设置选项卡的样式，包括背景色、文字颜色等。

uniapp滚动页面切换tab标签

可以使用uni-swiper组件实现滚动页面切换tab标签，具体代码如下：

<template>
<view>
<uni-swiper :current="current" @change="handleChange">
<uni-swiper-item v-for="(item, index) in tabs" :key="index">
<view>
<text>{{ item }}</text>
</view>
</uni-swiper-item>
</uni-swiper>
</view>
</template>

<script>
export default {
data() {
return {
current: 0,
tabs: ['标签1', '标签2', '标签3']
}
},
methods: {
handleChange(e) {
this.current = e.detail.current
}
}
}
</script>