hb/mini/pages/member/free.vue

<template>
  <view class="free-container dir-left-wrap">
    <episode
      v-for="(episode,index) in episodes"
      :key="index"
      :episode="episode"
      :custom-style="{
        marginRight: ((index+1) % 3 !== 0 ? '20rpx' :''),
      }"
    />
  </view>
</template>

<script>
import Episode from '../../components/Episode/index'
export default {
  name: 'Free',
  components: { Episode },
  data() {
    return {
      limit: 30,
      page: 1,
      isMore: true,
      episodes: []
    }
  },
  computed: {},
  methods: {
    getFree() {
      this.loading = true
      this.$api.episode.vipFree({ limit: this.limit, page: this.page }).then(res => {
        this.loading = false
        if (res.data.length) {
          this.episodes = this.episodes.concat(res.data)
        } else {
          this.isMore = false
        }
      })
    }
  },
  onLoad() {
    this.getFree()
  },
  onReachBottom(e) {
    if (!this.isMore) return
    this.page += 1
    this.getFree()
  }
}
</script>

<style lang="scss" scoped>
  .free-container {
    padding: 20rpx;
  }
</style>