dvcp_v2_wxcp_app/library/project/fd/AppAnswer/AppAnswer.vue

<template>
  <div class="AppAnswer">
    <div class="tab-wrapper">
      <div class="tab">
        <span :class="[component === 'List' ? 'active' : '']" @click="change('List')">问题</span>
        <span :class="[component === 'Ranking' ? 'active' : '']" @click="change('Ranking')">排行</span>
      </div>
    </div>
    <div class="AppAnswer-body">
      <component :is="component" :ref="component"></component>
    </div>
  </div>
</template>

<script>
  import { mapState } from 'vuex'
  import List from './component/List'
  import Ranking from './component/Ranking'

  export default {
    name: 'AppAnswer',
    appName: '学习问答',
    data() {
      return {
        detail: {},
        list: [],
        wxLogin: 0,
        current: 1,
        total: 0,
        component: 'List'
      }
    },

    components: {
      List,
      Ranking
    },

    computed: {
      ...mapState(['user']),
    },

    onLoad () {
      uni.$on('update', () => {
        this.$refs.List.update()
      })
    },

    methods: {
      getList () {

      },

      handleDetail (id) {
        if (!this.user.token) this.wxLogin++
        else uni.navigateTo({url: './voteDetail?id=' + id})
      },

      change (type) {
        this.component = type
      }
    },

    onReachBottom () {
      this.$refs[this.component].getMore()
    }
  }
</script>

<style lang="scss" scoped>
  .AppAnswer {
    min-height: 100vh;
    background: #F3F5F9;

    .tab-wrapper {
      position: sticky;
      top: 0;
      z-index: 11;
      background: #3975C6;
    }

    .tab {
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: 112px;
      border-radius: 50px 50px 0 0;
      padding: 0 256px;
      background: #F3F5F9;

      span {
        position: relative;
        line-height: 1;
        color: #999999;
        font-size: 40px;

        &.active {
          color: #000000;

          &::after {
            position: absolute;
            bottom: -2px;
            z-index: 0;
            opacity: 0.8;
            left: 50%;
            width: 80px;
            height: 12px;
            background-image: linear-gradient(90deg, #46C0FF 0%, #0C85FF 100%);
            transform: translateX(-50%);
            content: '';
          }
        }
      }
    }
  }
</style>