cankao-h5/src/pages/minihome/index.vue

<template>
  <!-- 顶部 banner 区域 -->
  <view class="all">
    <!-- <Navbar title="中证参考" :hasBack="false"></Navbar> -->
    <image class="top_bk" src="https://cankao.obs.cn-east-3.myhuaweicloud.com/mini/newmini/top_bg.png"></image>

    <view :style="{
      height: getNavHeight() + 'px',
      backgroundColor: isScroll ? '#fff' : 'transparent',
      position: 'sticky', top: 0,
      zIndex: '999999',
    }" v-if="tabIndex == 0"></view>
    <view :style="{
      height: getNavHeight() + 'px',
      backgroundColor: '#fff',
      position: 'sticky', top: 0,
      zIndex: '999999',

    }" v-else></view>

    <view class="content">

      <view :style="{
        position: 'sticky', top: getNavHeight() + 'px',
        backgroundColor: isScroll ? '#fff' : 'transparent',
        zIndex: '9999'
      }" v-if="tabIndex == 0">
        <view class="r_sreach">
          <image class="logo_text" src="https://cankao.obs.cn-east-3.myhuaweicloud.com/mini/newmini/logo_text_icon.png">
          </image>

          <view class="sreach">
            <view class="sreach_icon">
              <image src="https://cankao.obs.cn-east-3.myhuaweicloud.com/mini/newmini/icon_search_line.png"></image>
            </view>
            <view class="sreach_text">
              <text>搜索资讯</text>
            </view>
          </view>
        </view>

        <view style="padding: 0 24rpx;margin-top: 30rpx;">
          <u-swiper :list="list1" @change="change" @click="click"></u-swiper>
        </view>

        <view style="padding-top: 30rpx;background-color: white;padding-bottom: 30rpx;">
          <Tabs></Tabs>
        </view>
      </view>

      <view style="margin-top: 30rpx;" v-if="tabIndex == 0">
        <RankListMini :newsList="newsList"></RankListMini>
      </view>
      <MineMini v-if="tabIndex == 1" @logout="tabIndex = 0"></MineMini>
    </view>

    <Tabbar @tabChange="tabChange"></Tabbar>
  </view>
</template>

<script setup>
import { ref, onMounted, defineAsyncComponent, reactive } from "vue";
import Tabbar from "@/components/mini/Tabbar.vue";
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 {
  getTopNews,
} from "@/api/newsInfo";
import { onPageNotFound, onPageScroll, onShow } from "@dcloudio/uni-app";
import { getNavHeight } from "@/utils/util"

const list1 = reactive([
  'https://cankao.obs.cn-east-3.myhuaweicloud.com/mini/newmini/banner1.png',
  'https://cankao.obs.cn-east-3.myhuaweicloud.com/mini/newmini/banner1.png',
  'https://cankao.obs.cn-east-3.myhuaweicloud.com/mini/newmini/banner1.png',
]);

const newsList = ref([]);
// 概念标签贴标
async function getNewsList() {
  newsList.value = await getTopNews({});
  uni.stopPullDownRefresh()
}

const tabIndex = ref(0);
function tabChange(index) {

  tabIndex.value = index;
  uni.setStorageSync('homeTabIndex', index)

  switch (index) {
    case 0:
      getNewsList()
      break;
    case 1:

      break;

  }
}

const isScroll = ref(false)
onPageScroll((val) => {
  if (val.scrollTop > 150) {
    isScroll.value = true
  } else {
    isScroll.value = false
  }

})

onShow(() => {
  if (uni.getStorageSync('homeTabIndex') == 1) {
    tabChange(1)
  } else {
    tabChange(0)
  }
})

onMounted(async () => {
  getNewsList()
});
</script>

<style scoped lang="scss">
.top_bk {
  width: 100%;
  height: 300rpx;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1;
}

.content {
  position: relative;
  z-index: 99999;
  padding-bottom: 300rpx;

  .r_sreach {
    display: flex;
    align-items: center;
    padding: 0 30rpx;
  }

  .logo_text {
    width: 88rpx;
    height: 45rpx;
  }

  .sreach {
    display: flex;
    align-items: center;
    padding: 0rpx 30rpx;
    background-color: #fff;
    border-radius: 100rpx;
    width: 47vw;
    height: 68rpx;
    margin-left: 20rpx;
  }

  .sreach_icon {
    margin-right: 10rpx;
    display: flex;
    align-items: center;

    image {
      width: 35rpx;
      height: 35rpx;
      margin-top: 5rpx;
    }
  }

  .sreach_text {
    font-family: PingFangSC, PingFang SC;
    font-weight: 400;
    font-size: 24rpx;
    color: #999999;
    line-height: 33rpx;
    text-align: left;
    font-style: normal;
  }
}
</style>