jy-docs/jydocs-mobile/src/views/user/Library.vue

<template>
  <div class="user-library">
    <van-tabs
      :title-active-color="tabConf.titleActiveColor"
      :title-inactive-color="tabConf.titleInactiveColor"
      :line-width="tabConf.lineWidth"
      :color="tabConf.color"
      v-model="tabActive"
    >
      <van-tab title="我的文库" name="0">
        <van-list
          v-model="myLibListState.loading"
          :finished="myLibListState.finished"
          finished-text="没有更多了"
          @load="onLoad('0')"
        >
          00000
        </van-list>
      </van-tab>

      <van-tab title="文库收藏" name="1">
        <van-list
          v-model="myCollectionListState.loading"
          :finished="myCollectionListState.finished"
          finished-text="没有更多了"
          @load="onLoad('1')"
        >
          1111
        </van-list>
      </van-tab>
    </van-tabs>
  </div>
</template>
<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'
import { Tabs, Tab, List } from 'vant'
import { mapActions, mapState } from 'vuex'

@Component({
  name: 'user-library',
  components: {
    [Tabs.name]: Tabs,
    [Tab.name]: Tab,
    [List.name]: List
  },
  computed: {
    ...mapState('main', {
      userLibInfo: (state: any) => state.userLib
    })
  },
  methods: {
    ...mapActions({
      getList: 'main/getMyLibList'
    })
  }
})

export default class UserLibrary extends Vue {
  getList: any

  tabActive = '0'

  tabConf = {
    titleActiveColor: '#2ABED1',
    titleInactiveColor: '#5F5E64',
    lineWidth: '24',
    color: '#2ABED1'
  }

  myLibListState = {
    loading: false,
    finished: false,
    pageNum: 1,
    pageSize: 10,
    offset: 80,
    scrollTop: 0,
    list: []
  }

  myCollectionListState = {
    loading: false,
    finished: false,
    pageNum: 1,
    pageSize: 10,
    offset: 80,
    scrollTop: 0,
    list: []
  }

  created () {
    this.tabActive = this.$route.query.tab as string
    this.getList({})
  }

  onLoad (tab: string) {
    console.log(tab)
  }
}
</script>

<style lang="scss" scoped>
.user-library {
  ::v-deep {
    .van-tabs__wrap {
      height: 48px;
    }
    .van-tabs__line {
      bottom: 18px;
    }
    .van-tabs {
      width: 100%;
    }
    .van-tab {
      font-size: 16px;
      line-height: 20px;
    }
  }
}
</style>