dvcp_v2_wechat_app/src/project/fengdu/AppCircle/Topic.vue

<template>
  <div class="Topic">
    <div
      class="Topic-item"
      v-for="(item, index) in list"
      :key="index"
      hover-class="text-hover"
      @click="$linkTo('./TopicDetail?themeId=' + item.id + '&name=' + item.title)">
      <h2>#{{item.title}}</h2>
      <span>去看看</span>
    </div>
    <AiLogin ref="login"/>
  </div>
</template>
<script>

  export default {
    name: 'Topic',
    appName: '更多话题',

    data () {
      return {
        current: 1,
        pages: 2,
        list: []
      }
    },
    onLoad() {
      this.getList()
    },

    methods: {
      getList() {
        if (this.current > this.pages) return
        this.$instance.post(`/app/appneighborhoodassistancetheme/list?current=${this.current}&size=20`).then(res => {
          if (res.code === 0 && res.data) {
            const list = this.current > 1 ? [...this.list, ...res.data.records] : res.data.records
            this.pages = Math.ceil(res.data.total / 10)
            this.list = list
          }
        })
      },
      toTopicDetail(id) {
        uni.navigateTo({url: `./TopicDetail?id=${id}`})
      }
    },
    onReachBottom() {
      this.current ++
      this.getList()
    }
  }
</script>

<style scoped lang="scss">
  .Topic {
    min-height: 100vh;
    background: #fff;
    padding-bottom: 40px;
    border-top: 24px solid #f4f6fa;
    box-sizing: border-box;

    div {
      box-sizing: border-box;
    }

    .Topic-item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 20px 32px;

      h2 {
        font-size: 30px;
        color: #333333;
      }

      span {
        width: 126px;
        height: 52px;
        line-height: 52px;
        text-align: center;
        border-radius: 26px;
        border: 2px solid #2d7dffff;
        font-size: 24px;
        color: #2D7DFF;
      }
    }
  }
</style>