【四】鸡汤来咯开发学习笔记-54

前端 · 2024-08-04

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>

Theme Jasmine by Kent Liao