feat(导航): 添加顶部标签页组件并优化导航栏样式

- 新增Tabs组件实现资讯分类切换功能
- 修改Navbar样式使其固定在顶部并添加背景色
- 替换RankListMini中的token验证方式为uni.getStorageSync
This commit is contained in:
34701892@qq.com 2025-08-13 13:49:54 +08:00
parent 761758accf
commit 126f48d883
4 changed files with 50 additions and 3 deletions

View File

@ -90,7 +90,7 @@ const props = defineProps({
const clickItem = ref({});
function goDetail(item) {
if (Session.get("token")) {
if (uni.getStorageSync("token")) {
clickItem.value = item;
uni.navigateTo({
url: `/pages/detail/indexNewsInfo?id=${item.news_id}`,

View File

@ -30,12 +30,17 @@ onMounted(async () => { });
</script>
<style scoped lang="scss">
.r_all {}
.r_all {
position: sticky;
top: 0rpx;
background-color: white;
z-index: 99999;
}
.top88 {
width: 100vw;
height: 88rpx;
background-color: white;
}
.navnar {

View File

@ -0,0 +1,40 @@
<template>
<view class="tabs">
<u-tabs :list="list1" :activeStyle="{
color: '#303133',
fontWeight: 'bold',
transform: 'scale(1.05)',
fontSize: '24rpx'
}" :inactiveStyle="{
color: '#606266',
transform: 'scale(1)',
fontSize: '24rpx'
}" :itemStyle="{
width: '27.5vw',
height: '70rpx',
}" @click="click"></u-tabs>
</view>
</template>
<script setup>
import { ref, onMounted, onUnmounted, reactive } from "vue";
const emit = defineEmits(["tabChange"]);
//
const list1 = reactive([
{ name: '资讯头条Top20' },
{ name: '热门行业Top10' },
{ name: '风口概念Top10' },
]);
const tabIndex = ref(0);
function tabChange(index) {
tabIndex.value = index;
emit("tabChange", index);
}
onMounted(async () => { });
</script>
<style scoped lang="scss"></style>

View File

@ -2,6 +2,7 @@
<!-- 顶部 banner 区域 -->
<view class="all">
<Navbar title="中证参考" :hasBack="false"></Navbar>
<Tabs @tabChange="tabChange"></Tabs>
<RankListMini v-if="tabIndex == 0" :newsList="newsList"></RankListMini>
<MineMini v-if="tabIndex == 1"></MineMini>
@ -16,6 +17,7 @@ import Navbar from '@/components/mini/Navbar.vue'
import RankListMini from "@/components/RankListMini.vue";
// const Mine = defineAsyncComponent(() => import("@/components/mine.vue"));
import MineMini from "@/components/mineMini.vue";
import Tabs from "@/components/mini/Tabs.vue";
import {