一、效果：

如下圖所示，進入該頁面后，默認選中第一個分類，以及第一個分類下的列表數據。

二、代碼實現：

關鍵代碼：

進入頁面時，默認調用分類的接口，在分類接口里做判斷：

if (that.TabIndex == 0) { //默認選中第一個分類下的數據that.cate_id = that.cateList[0].idthat.getListFun(that.cate_id)
}

完整代碼：

<template><view class="">//1分類展示<scroll-view :scroll-x="true" class="scrollview-box"><block v-for="(item,index) in cateList" :key="item"><view :class="TabIndex==index?'item active':'item'" @click="tabclick(index,item)">{{item.name}}</view></block></scroll-view>//2列表展示<view class="invenlist" v-if="storeList.length>0"><view class="invenitem" v-for="(item,index) in storeList" :key="index"><view>{{item.name}}</view></view></view></view>
</template><script>export default {data() {return {//分類cateList: [],cate_id:'',TabIndex: 0,//默認第一個分類//列表數據storeList: [],}},onShow() {//進入頁面，默認調用分類接口this.getCateFun() },methods: {//1.分類接口			getCateFun() {var that = thisthis.$api.appPlateForm('POST', this.$url.products_cate_list, '', function(res) {that.cateList = res.data  //獲取分類數據if (that.TabIndex == 0) { //默認選中第一個分類下的數據that.cate_id = that.cateList[0].idthat.getListFun(that.cate_id)}})},//2.列表接口	getListFun(id) {var that = thisvar data = {cate_id:id}this.$api.appPlateForm('POST', this.$url.products_store_list, data, function(res) {that.storeList = res.data   //獲取列表數據})},// tab切換tabclick(index,item) {var that = thisthat.TabIndex = index;that.cate_id = item.idvar data = {cate_id:that.cate_id}//獲取到id，調用列表接口this.$api.appPlateForm('POST', this.$url.products_store_list, data, function(res) {that.storeList = res.data   //獲取列表數據})},}}
</script><style scoped lang="less">.scrollview-box {white-space: nowrap;/* 滾動必須加的屬性 */width: 100%;padding:0 20rpx;box-sizing: border-box;.item {width: 180rpx;height:50rpx;margin-right: 20rpx;display: inline-flex;/* item的外層定義成行內元素才可進行滾動 inline-block / inline-flex 均可 */flex-direction: column;align-items: center;font-size: 28rpx;color: #666666;position: relative;}view::after{display: block;clear: both;content: '';position: absolute;bottom: 0;left: 0;right: 0;margin: auto;height: 4rpx;width: 145rpx;background-color:  #21CD81;display: none;}.active {font-weight: bold !important;color: #21CD81 !important;}.active::after{display: block;}}
</style>