先來看效果：

?上圖有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.currentIndexgetPets()
}

上面的代碼中先將獲取的舊數據清空，拿到當前選項卡的索引，最后調getPets()方法獲取當前選項卡的數據。

當用戶下拉刷新時，也需要將當前選項卡置為默認選項卡，重新調接口獲取新的數據：

//下拉刷新，先清空以前的數據，再重新請求接口拿到新數據去填充
onPullDownRefresh(()=>{pets.value=[]//下拉刷新時將選項卡置為0current.value = 0getPets()
})

最終效果展示：