feat(导航): 添加顶部标签页组件并优化导航栏样式
- 新增Tabs组件实现资讯分类切换功能 - 修改Navbar样式使其固定在顶部并添加背景色 - 替换RankListMini中的token验证方式为uni.getStorageSync
This commit is contained in:
parent
761758accf
commit
126f48d883
|
|
@ -90,7 +90,7 @@ const props = defineProps({
|
||||||
|
|
||||||
const clickItem = ref({});
|
const clickItem = ref({});
|
||||||
function goDetail(item) {
|
function goDetail(item) {
|
||||||
if (Session.get("token")) {
|
if (uni.getStorageSync("token")) {
|
||||||
clickItem.value = item;
|
clickItem.value = item;
|
||||||
uni.navigateTo({
|
uni.navigateTo({
|
||||||
url: `/pages/detail/indexNewsInfo?id=${item.news_id}`,
|
url: `/pages/detail/indexNewsInfo?id=${item.news_id}`,
|
||||||
|
|
|
||||||
|
|
@ -30,12 +30,17 @@ onMounted(async () => { });
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped lang="scss">
|
<style scoped lang="scss">
|
||||||
.r_all {}
|
.r_all {
|
||||||
|
position: sticky;
|
||||||
|
top: 0rpx;
|
||||||
|
background-color: white;
|
||||||
|
z-index: 99999;
|
||||||
|
}
|
||||||
|
|
||||||
.top88 {
|
.top88 {
|
||||||
width: 100vw;
|
width: 100vw;
|
||||||
height: 88rpx;
|
height: 88rpx;
|
||||||
|
background-color: white;
|
||||||
}
|
}
|
||||||
|
|
||||||
.navnar {
|
.navnar {
|
||||||
|
|
|
||||||
|
|
@ -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>
|
||||||
|
|
@ -2,6 +2,7 @@
|
||||||
<!-- 顶部 banner 区域 -->
|
<!-- 顶部 banner 区域 -->
|
||||||
<view class="all">
|
<view class="all">
|
||||||
<Navbar title="中证参考" :hasBack="false"></Navbar>
|
<Navbar title="中证参考" :hasBack="false"></Navbar>
|
||||||
|
<Tabs @tabChange="tabChange"></Tabs>
|
||||||
|
|
||||||
<RankListMini v-if="tabIndex == 0" :newsList="newsList"></RankListMini>
|
<RankListMini v-if="tabIndex == 0" :newsList="newsList"></RankListMini>
|
||||||
<MineMini v-if="tabIndex == 1"></MineMini>
|
<MineMini v-if="tabIndex == 1"></MineMini>
|
||||||
|
|
@ -16,6 +17,7 @@ import Navbar from '@/components/mini/Navbar.vue'
|
||||||
import RankListMini from "@/components/RankListMini.vue";
|
import RankListMini from "@/components/RankListMini.vue";
|
||||||
// const Mine = defineAsyncComponent(() => import("@/components/mine.vue"));
|
// const Mine = defineAsyncComponent(() => import("@/components/mine.vue"));
|
||||||
import MineMini from "@/components/mineMini.vue";
|
import MineMini from "@/components/mineMini.vue";
|
||||||
|
import Tabs from "@/components/mini/Tabs.vue";
|
||||||
|
|
||||||
|
|
||||||
import {
|
import {
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue