1.让z-tabs里面的高亮文字也能跟着小蓝标走 // current 当前选中的index
<z-tabs :current="current" ref="tabs" :list="tabList">js
const swiperAnimationfinish =(e)=>{
current.value=e.detail.current;
tabs.value.unlockDx(); //在swiper的@animationfinish中通知z-tabs结束多setDx的锁定，若在父组件中调用了setDx，则必须调用unlockDx
}
2.实现点击z-tabs里面的内容来显示下面的内容，swiper里面也有current属性，给z-tabs装上change事件，然后当它改变时，获取新的curennt传给swiper
页面
<template #top>
<z-tabs :current="current" ref="tabs" :list="tabList" @change="tabsChange">
</z-tabs>
</template>
<swiper :current="current" @transition="swiperTransition" @animationfinish="swiperAnimationfinish" >
js
const tabsChange=(e)=>{
current.value=e
}
3.创建鸡汤列表组件，方便调用，soup-list
<template>
<view class="content">
<z-paging ref="paging" v-model="dataList" @query="queryList">
<view class="list">
<view class="item" v-for="item in dataList" :key="item._id">
<soup-item :item="item"></soup-item>
</view>
</view>
</z-paging>
</view>
</template>
<script setup>
import { ref } from 'vue';
import { statList } from '../../utils/common';
const dataList =ref([]);
const paging =ref(null)
const db =uniCloud.database();
const props =defineProps({ //接收页面的传值
//每一个的索引
tabIndex:{
type:Number,
default: function(){
return 0;
}
},
//当前swiper切换到第几个index
currentIndex:{
type:Number,
default:function(){
return 0
}
}
})
function queryList(pageNo,pageSize){ //z-paging自带的获取的第几页几个的方法
getSoupList(pageNo,pageSize)
}
async function getSoupList(pageNo,pageSize){
let skip =(pageNo -1)*pageSize
let{result:{data,errCode}}=await db.collection("soup-chicken").where({status:statList[props.tabIndex].value}).orderBy("publish_date",'desc').get();
if(errCode!=0) return;
paging.value.complete(data);
}
</script>
<style lang="scss" scoped>
.content{
height: 100%;
.list{
padding: 30rpx 30rpx 0;
}
}
</style>在list中给这个组件传值
<swiper-item v-for="(item,index) in statList"> //index属于数字，每一个item的标号
<soup-list :tabIndex="index" :currentIndex="current"></soup-list>
</swiper-item>
