先来看效果：
上图有3个选项卡（PS:uniapp官方称之为分段器，我还是习惯叫选项卡），需要实现点击不同的选项卡时下方切换显示对应的数据。
下面介绍下实现的过程。
1.在uniapp官方文档下载并安装该扩展组件：uni-app官网，下载和安装方法请参照上一篇笔记；
2.在项目中引入该组件，复制文档中这段代码到项目容器中：
代码：
<view class="menu">
<uni-segmented-control :current="current" :values="values" @clickItem="onClickItem" styleType="button" activeColor="#2B9939"></uni-segmented-control>
</view>需要改动的地方主要有3处：
(1)current，当前选中选项卡的索引;
(2)values :values="values"，需要在JS中定义 values值，用于选项卡显示的文字内容，最好声明为数组形式，方便调用；
(3)@clickItem：点击事件，当用户点击不同的选项卡时加载对应的数据。
先来看前2项：
const current = ref(0)
const classfy = [{key:"all",value:"全部"},{key:"cat",value:"猫猫"},{key:"dog",value:"狗狗"}]
const values = computed(()=>classfy.map(item=>item.value))上面的代码实现：
(1)默认选中的选项卡为第1项；
(2)声明一个key-value的数组，其中value为选项卡显示的文字，使用computed计算属性将数组中的value提取出来。
再看点击事件：
function onClickItem(e){
pets.value = []
current.value = e.currentIndex
getPets()
}上面的代码中先将获取的旧数据清空，拿到当前选项卡的索引，最后调getPets()方法获取当前选项卡的数据。
当用户下拉刷新时，也需要将当前选项卡置为默认选项卡，重新调接口获取新的数据：
//下拉刷新，先清空以前的数据，再重新请求接口拿到新数据去填充
onPullDownRefresh(()=>{
pets.value=[]
//下拉刷新时将选项卡置为0
current.value = 0
getPets()
})最终效果展示：
