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

1.新建page_self/reviewed/list.vue页面，做审核鸡汤页面，然后再page。json中创建此分包路径

2.给self的审核鸡汤选项做一个跳转和判断只有管理员才显示

<navigator url="/pages_self/reviewed/list" class="item" v-if="isAdminRole()">

3.官方（插件市场）下载z-tabs插件，用于轮播

4.页面代码

<template>
    <view class="reviewed">
        <z-paging-swiper>
            <template #top>   //z-paging-swiper的置顶标志方法
                <z-tabs ref="tabs" :list="tabList">
                </z-tabs>
            </template>
            <swiper @transition="swiperTransition">   //滑动事件方法

                <swiper-item v-for="item in statList">
                    {{item}}
                </swiper-item>
            </swiper>
        
        </z-paging-swiper>
    </view>
</template>

<script setup>
 import { statList } from '../../utils/common';
 import { computed, ref } from 'vue';
 const tabs =ref(null);
 const tabList =computed(()=>statList.map(item=>({...item,name:item.text})))
//因为z-tabs组件需要name值，所以用计算属性，在引入的statlist中map遍历取出里面的item然后在里面展开，用name获取item里面的text然后传给tablist
const swiperTransition=(e)=>{
    tabs.value.setDx(e.detail.dx)      /获取滑动的位置，获取位置穿个tab然后达到跟随的效果
}
</script>

<style lang="scss" scoped>

</style>