node 社区 Home

<template>
  <div class="home">
    <img v-show="showIcon" @click="goTop" class="back" src="../assets/back.png" alt="">
    <my-header></my-header>
    <div class="content" @scroll="scroll">
      <tab @cut="tabCut"></tab>
      <my-list :childList="showList"></my-list>
    </div>
  </div>
</template>

<script>
import MyHeader from "../components/myHeader.vue";
import Tab from "../components/tab.vue";
// @ is an alias to /src
import { reactive, toRefs } from "vue";
import api from "../api/index";
import MyList from "../components/myList.vue";
import { useStore } from 'vuex';
export default {
  name: "Home",
  components: {
    MyHeader,
    Tab,
    MyList,
  },
  setup(props) {
    const { state } = useStore();
    const data = reactive({
      allList: [], // 存放所有的数据
      showList: [], // 展示的数据
      showIcon: false
    });
    api.get("/topics").then((res) => {
      data.allList = res.data;
      data.showList = res.data;
      if (state.checkTxt){
        data.showList = data.allList.filter(item => item.tab.includes(state.checkTxt))
      }
    });

    const tabCut = (val) => { // tab 切花的函数
       data.showList = data.allList.filter(item => item.tab.includes(val))
    }
    let dom = null;
    let top = 0;
    const scroll = (e) => {
      dom = e.target;
      top = dom.scrollTop;
      if (dom.scrollTop>400){
        data.showIcon = true
      } else {
        data.showIcon = false
      }
    }
    
    const goTop = () => { // 回到顶部的函数
      let time = setInterval(() => {
        if (top>0){
          top = top - 10;
          dom.scrollTop = top;
        } else {
          clearInterval(time)
        }
      }, 1);
    }
    return {
      ...toRefs(data),
      scroll,
      tabCut,
      goTop
    };
  },
};
</script>