在uni-app中自定义和使用分段器需注意样式调整、数据联动和自定义封装。①样式调整：官方组件样式固定，可通过/deep/或:deep()穿透修改颜色、圆角、字体等；如改选中项背景色为#007aff并设置字体大小14px及高度60rpx；不同平台需测试确保一致性。②数据联动：绑定currentindex并监听change事件切换内容，结合v-if展示不同数据，异步加载时建议加loading状态。③自定义分段器：可用flex布局手动封装按钮组，完全控制外观与交互，支持图标+文字、滑动排列等复杂场景，但需自行处理点击逻辑与状态同步。掌握机制与调试技巧即可灵活应用。
在uni-app里用分段器（segmented-control），很多时候不只是要它能切换，还得让它看起来顺眼、和页面风格一致，同时还要能跟数据联动。这事其实不难，但有几个细节需要注意。
样式调整：别让默认样式拖后腿
uni-app自带的
<uni-segmented-control></uni-segmented-control>
组件样式比较固定，颜色、圆角、字体大小这些可能都不太符合你的设计稿要求。这时候就得自己改样式。
首先，你要知道这个组件其实是封装好的，你想改它的内部元素，必须通过
/deep/
或者
:deep()
来穿透样式（如果你用的是H5或者微信小程序之类支持CSS深度选择的平台）。
举个例子，你想改选中项的背景色和字体颜色：
:deep(.uni-segmented-control__item.uni-segmented-control__current) {
background-color: #007AFF;
color: white;
}
另外，如果你想统一所有状态下的字体大小、高度、边框等，也可以从
.uni-segmented-control__item
入手。比如设置高度为60px，字体14px：
:deep(.uni-segmented-control__item) {
height: 60rpx;
font-size: 14px;
}
不同平台对样式的处理方式略有差异，尤其是App端和小程序之间。建议你在多个平台上测试一下，确保样式表现一致。
数据联动：切换的时候更新内容
分段器的核心作用是控制内容展示，所以它必须和数据联动。一般做法是绑定一个索引值，根据索引去筛选数据或请求接口。
比如你有三个分类：推荐、热门、最新，对应的数据列表也不同。你可以这样写：
<uni-segmented-control :current="currentIndex" :list="['推荐', '热门', '最新']"></uni-segmented-control><view v-if="currentIndex === 0">推荐内容</view><view v-if="currentIndex === 1">热门内容</view><view v-if="currentIndex === 2">最新内容</view>
JS部分：
data() {
return {
currentIndex: 0
}
},
methods: {
onChange(index) {
this.currentIndex = index;
// 这里可以加请求数据的方法
this.fetchData();
},
fetchData() {
// 根据当前index请求不同数据
}
}
这种结构清晰又实用，适合大多数场景。注意，如果数据是异步加载的，最好加上loading状态，避免用户看到空白。
自定义分段器：灵活但需要多写点代码
有时候官方组件不够用，比如你需要图标+文字、横向排列超出滑动、或者更复杂的交互，这时候就可以考虑自己封装一个。
你可以用
flex布局
做一个按钮组，然后手动管理当前选中的索引。样式完全可控，逻辑也不复杂。
比如HTML结构：
<view class="custom-segment"><text v-for="(item, index) in list" :key="index" :class="{ active: index === currentIndex }" index>{{ item }}</text></view>
样式部分就自由发挥了，比如设置active状态的背景、字体颜色等。
这种方式的好处是：
- 完全自定义外观
- 支持图标、文字混合
- 可以做更多动画效果
坏处就是得自己处理一些边界情况，比如点击范围、初始状态同步等。
基本上就这些。uni-app的分段器调整起来不算难，关键是理解它的工作机制和样式规则。样式问题多看看浏览器调试工具，数据联动理清逻辑关系就行。
