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>