当前位置：首页 > uni-app

uniapp分段器跳转

2026-02-06 10:47:10uni-app

uniapp分段器跳转实现方法

在uniapp中实现分段器（通常指分段选择器或选项卡切换）的跳转功能，可以通过以下方式完成：

使用uni-segmented-control组件

uniapp提供了原生组件uni-segmented-control，可用于创建分段器并实现跳转功能：

<template>
  <view>
    <uni-segmented-control 
      :current="current" 
      :values="items" 
      @clickItem="onClickItem" 
      styleType="text"
    ></uni-segmented-control>
    <view v-if="current === 0">内容1</view>
    <view v-if="current === 1">内容2</view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      items: ['选项1', '选项2'],
      current: 0
    }
  },
  methods: {
    onClickItem(e) {
      this.current = e.currentIndex
    }
  }
}
</script>

自定义分段器实现

如果需要更灵活的样式控制，可以自定义分段器：

<template>
  <view class="segmented-control">
    <view 
      v-for="(item, index) in tabs" 
      :key="index" 
      :class="['tab', activeIndex === index ? 'active' : '']"
      @click="switchTab(index)"
    >
      {{item}}
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      tabs: ['首页', '分类', '我的'],
      activeIndex: 0
    }
  },
  methods: {
    switchTab(index) {
      this.activeIndex = index
      // 这里可以添加页面跳转逻辑
      if(index === 1) {
        uni.navigateTo({
          url: '/pages/category/index'
        })
      }
    }
  }
}
</script>

<style>
.segmented-control {
  display: flex;
  justify-content: space-around;
}
.tab {
  padding: 10px 20px;
}
.active {
  color: #007AFF;
  border-bottom: 2px solid #007AFF;
}
</style>

结合页面路由跳转

分段器可以结合uniapp的路由跳转实现页面切换：

methods: {
  onClickItem(e) {
    const pages = ['/pages/home/index', '/pages/list/index', '/pages/user/index']
    uni.switchTab({
      url: pages[e.currentIndex]
    })
  }
}

注意事项

使用uni-segmented-control组件需要先引入，在pages.json中配置：

{
  "easycom": {
    "autoscan": true,
    "custom": {
      "uni-segmented-control": "@dcloudio/uni-ui/lib/uni-segmented-control/uni-segmented-control"
    }
  }
}

跳转方式根据实际需求选择：
- uni.navigateTo 保留当前页面，跳转到应用内某个页面
- uni.redirectTo 关闭当前页面，跳转到应用内某个页面
- uni.switchTab 跳转到tabBar页面
动态修改分段器选中状态时，确保数据响应式更新。
样式自定义时注意不同平台的兼容性，可使用条件编译处理平台差异。

uniapp分段器跳转