proginn-frontend/pages/user/index_article_list.vue

<template>
  <div style="width:100%;background:gray">
    <router-view />

    <van-tabbar route>
      <van-tabbar-item replace to="/user/index/article" icon="home-o">
        标签
      </van-tabbar-item>
      <van-tabbar-item replace to="/user/index/video" icon="search">
        标签
      </van-tabbar-item>
    </van-tabbar>
<!--    <van-tabbar route v-model="active">
      <van-tabbar-item badge="3" to="/home">
        <span>自定义</span>
        <template #icon="props">
          <img :src="props.active ? icon.article.active : icon.article.inactive" />
        </template>
      </van-tabbar-item>
      <van-tabbar-item icon="search">标签</van-tabbar-item>
      <van-tabbar-item icon="setting-o">标签</van-tabbar-item>
    </van-tabbar> -->
<!--    <van-tabbar route  v-model="active">
      <van-tabbar-item replace  icon="home-o">
        <span>文章</span>
        <template #icon="props">
          {{props}}
          <img :src="props.active ? icon.article.active : icon.article.inactive" />
        </template>
      </van-tabbar-item>
      <van-tabbar-item replace  icon="search">
          <span>视频</span>
          <template #icon="props">
            <img :src="props.active ? icon.video.active : icon.video.inactive" />
          </template>
       </van-tabbar-item>
      <van-tabbar-item icon="setting-o">
          <span>我的</span>
          <template #icon="props">
              <img :src="props.active ? icon.my.active : icon.my.inactive" />
          </template>
      </van-tabbar-item>
    </van-tabbar> -->
    </div>
</template>
<script>
  import { Tabbar, TabbarItem } from 'vant'
  let container;

  export default {
    layout: "opacity_header",
    async asyncData() {
      return {
        title: `选择新建类型-程序员客栈`,

        // active: 0,
        //       icon: {
        //         active: 'https://img.yzcdn.cn/vant/user-active.png',
        //         inactive: 'https://img.yzcdn.cn/vant/user-inactive.png',
        //       },
      };
    },
    data() {
      return {
        active:1,
        ad:{},
        icon:{
          'article' : {
            active:require("../../assets/quan/icon/book_s.png"),
            inactive:require("../../assets/quan/icon/book.png")
          },
          'video':{
            active:require('../../assets/quan/icon/video_s.png'),
            inactive:require('../../assets/quan/icon/video.png')
          },
          'my':{
            active:require('../../assets/quan/icon/my_s.png'),
            inactive:require('../../assets/quan/icon/my.png')
          }
        }
      }
    },
    mounted() {
      container = this.$refs.container;
    },
    created(){
      this.getList()
    },
    methods: {
      async getList() {
        let res = await this.$axios.$get(
          '/api/jishuquan/get_ads', {}, {
            neverLogout: true
          }
        );
        if (res) {

        }
      },
      async getList() {
        console.log(999)
        if (this.isLoading) {
          return 0
        }
        this.isLoading = true;
        let res = await this.$axios.$post(
          '/api/jishuquan/getUncollectedTopics', {
            collecte_id:5,
            page: this.currentPage,
            size: 10
          }, {
            neverLogout: true
          }
        );
        this.isLoading = false;
        if (res) {
          if (!list.length) {
            this.noMore = true;
            return;
          } else {
            let list2 = this.list
            this.list = list2.concat(list)
          }
        }
      },
    },
  };
</script>
<style>
  body {
    background-color: white;
  }
</style>
<style lang='less' scoped>
/*  .flex {
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
  }

  .item {
    text-align: center;
    font-size: 0.3rem;
    font-family: PingFangSC-Semibold, PingFang SC;
    font-weight: 600;
    color: rgba(34, 34, 34, 1);
    line-height: 0.35rem;
  }

  .box {
    height: 5.5rem;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
  } */

/*  img {
    width: 1.88rem;
    height: 1.88rem;
  } */
</style>