Article list data display: pull-down loading more, pull-up refreshing, rolling loading, request failure friendly prompt (simulating the effect of random failure)

Be careful ： Because scrolling loads , So do it push go in , And merge the arrays this.list.push(...results)

Request interfaces are gathered here ：juejin.cn/post/699917…

Request method and data processing

  methods: {
    async onLoad() {
      //  Update data asynchronously 
      // 1. Request for data    And pull up to load more 
      try {
        const { data } = await getArticleList({
          channel_id: this.channel.id,
          timestamp: this.timestamp || Date.now(), //  Page number of the requested article data 
          with_top: 1 //  Whether to include topping  , Enter the page 
        })

        //  Simulate requesting wrong data 
        // if (Math.random() > 0.5) {
        //   JSON.parse('DSFASFASDF')
        // }

        console.log(data);
        // 2.  Add data to  list  Array ,
        const { results } = data.data
        this.list.push(...results) //  Because scrolling loads , So do it push go in , And merge the arrays 
        // 3.  Set the end state of this load 
        this.loading = false
        // 4. Judge whether the data loading is over 
        if (results.length) {
          //  Update the time to get the next page of data 
          this.timestamp = data.data.pre_timestamp
        } else {
          this.finished = true
        }
      } catch (error) {
        console.log(' request was aborted ', error);
        this.loading = false //  close  loading  effect 
        this.error = true //  Turn on the error 
      }
    },

    //  Drop down refresh event 
    async onRefresh() {
      try {
        // 1.  Request for data 
        const { data } = await getArticleList({
          channel_id: this.channel.id,
          timestamp: Date.now(),
          with_top: 1
        })
        //  Simulate requesting wrong data 
        // if (Math.random() > 0.5) {
        //   JSON.parse('DSFASFASDF')
        // }
        // 2.  Append data to the top 
        const { results } = data.data
        this.list.unshift(...results)
        // 3.  Turn off the pull-down refresh  loading  state 
        this.refreshing = false
        // 4.  Prompt the number of successful refresh 
        this.refreshSuccessText = ` Refresh successful , Updated ${results.length} Data `
      } catch (error) {
        //  Refresh failed 
        this.refreshing = false //  Close the load page 
        this.refreshSuccessText = " Refresh failed "
        console.log(error);
      }
    }
  }
}
 Copy code 

Complete code ：article-list.vue

 <template>
  <div class="article-list">
    <van-pull-refresh v-model="refreshing" @refresh="onRefresh" :success-text="refreshSuccessText" :success-duration="1500">
      <van-list v-model="loading" :error.sync="error" error-text=" request was aborted , Click reload " :finished="finished" finished-text=" There is no more " @load="onLoad">
        <article-item v-for="(article,index) in list" :key="index" :article="article" ></article-item>
      </van-list>
    </van-pull-refresh>
  </div>
</template>

<script>
import { getArticleList } from '@/api/article'
import ArticleItem from '@/components/article-item'
// import request from 'request'
export default {
  components: { ArticleItem },
  // props Receive parent component   The parameters passed in 
  props: {
    channel: { type: Object, required: true }
  },
  name: 'articleList',
  data() {
    return {
      list: [], //  An array that stores list data 
      loading: false, //  Control loading  loading  state 
      finished: false, //  Request the status of the end of data loading 
      timestamp: null, //  Request to get the timestamp of the next page of data 
      error: false, //  Status of failed data request 
      refreshing: false, //  Drop down refresh status 
      refreshSuccessText: " Refresh successful "//  Pull down refresh failed 
      //  Article list request parameters   If you write it here   Updates will not be implemented  , Don't write here 
    }
  },
  created() {
  },
  methods: {
    async onLoad() {
      //  Update data asynchronously 
      // 1. Request for data 
      try {
        const { data } = await getArticleList({
          channel_id: this.channel.id,
          timestamp: this.timestamp || Date.now(), //  Page number of the requested article data 
          with_top: 1 //  Whether to include topping  , Enter the page 
        })

        //  Simulate requesting wrong data 
        // if (Math.random() > 0.5) {
        //   JSON.parse('DSFASFASDF')
        // }

        console.log(data);
        // 2.  Add data to  list  Array ,
        const { results } = data.data
        this.list.push(...results) //  Because scrolling loads , So do it push go in , And merge the arrays 
        // 3.  Set the end state of this load 
        this.loading = false
        // 4. Judge whether the data loading is over 
        if (results.length) {
          //  Update the time to get the next page of data 
          this.timestamp = data.data.pre_timestamp
        } else {
          this.finished = true
        }
      } catch (error) {
        console.log(' request was aborted ', error);
        this.loading = false //  close  loading  effect 
        this.error = true //  Turn on the error 
      }
    },

    //  Drop down refresh event 
    async onRefresh() {
      try {
        // 1.  Request for data 
        const { data } = await getArticleList({
          channel_id: this.channel.id,
          timestamp: Date.now(),
          with_top: 1
        })
        //  Simulate requesting wrong data 
        // if (Math.random() > 0.5) {
        //   JSON.parse('DSFASFASDF')
        // }
        // 2.  Append data to the top 
        const { results } = data.data
        this.list.unshift(...results)
        // 3.  Turn off the pull-down refresh  loading  state 
        this.refreshing = false
        // 4.  Prompt the number of successful refresh 
        this.refreshSuccessText = ` Refresh successful , Updated ${results.length} Data `
      } catch (error) {
        //  Refresh failed 
        this.refreshing = false //  Close the load page 
        this.refreshSuccessText = " Refresh failed "
        console.log(error);
      }
    }
  }
}
</script>

<style lang="less" scoped>
.article-list {
  //  Set and remember the scroll position of the list   Where each article list scrolls   They don't influence each other 
  height: 79vh;
  overflow: auto;
}
</style>
 Copy code