使用vant-ui组件库里的list组件

    1. <template>
    2.   <div class="home">
    3.     <van-list class="list" :immediate-check="isChecked" v-model="loading" 
    4. :finished="finished" finished-text="没有更多了" @load="onLoad">   //自带加载属性
    5.       <div class="container" v-for="item of movie" :key="item.id">  //循环的数据
    6.         <router-link :to="'/detail/'+item.id">
    7.           <img class="movie-pic" :src="item.images.small" />
    8.           <p class="movie-title">{{item.title | format}}</p>
    9.         </router-link>
    10.       </div>
    11.     </van-list>
    12.   </div>
    13. </template>
    15. <script>
    16. export default {
    17.   name: "home",
    18.   data() {
    19.     return {
    20.       movie: [],
    21.       id: "",
    22.       loading: false,
    23.       finished: false,
    24.       start:0,
    25.       isChecked:false
    26.     };
    27.   },
    28.   mounted() {      
    29.     this.axios.get("/v2/movie/top250").then(res => {
    30.       this.movie = res.data.subjects;
    31.       this.id = res.data.subjects.id;
    32.     });
    33.   },
    34.   methods: {
    35.     onLoad() {
    36.       // 异步更新数据
    37.       setTimeout(() => {
    38.         this.start +=20; // 一次更新多少条
    39.         this.axios.get(`/v2/movie/top250?start=${this.start}`).then(res => {
    40.       this.id = res.data.subjects.id; 
    41.       this.movie = [...this.movie,...res.data.subjects];  //请求的新数据拼接旧数据
    42.       this.loading = false;
    43.     });
    44.         if (this.movie.length >240) {  //当数组长度大于240时  ，就不再发送http请求
    45.           this.finished = true;
    46.         }
    47.       }, 500);
    48.     },
    49.   }
    50. };
    51. </script>
    52. <style scoped>
    53. .container {
    54.   width: 100px;
    55.   height: 160px;
    56.   margin-top: 20px;
    57.   text-align: center;
    58.   border: 1px solid gainsboro;
    59.   box-shadow: 2px 4px 10px 2px rgb(129, 128, 128);
    60. }
    61. .movie-pic {
    62.   width: 100px;
    63.   height: 130px;
    64. }
    65. .movie-title {
    66.   font-size: 15px;
    67. }
    68. .list{
    69.   display: flex;
    70.   justify-content: space-evenly;
    71.   flex-wrap: wrap;
    72. }
    73. </style>