An analysis of.

  • According to data
  • Implement the article list pull – up loading
  • Pull down refresh function
  • Use filters to process dates and times

The vant components involved are as follows:

  • Van-list components: pull-up loading
  • Van-pull-refresh component: pull-down refresh
  • van-cell
  • van-grid
  • van-image

It is separately extracted into a component (articlelist.vue) for processing. The directory structure is as follows:

|-views
|--home/articleList.vue
|--home/home.vue
Copy the code

Create components and import them for use

Create an articleList component and import it into home.vue

1. The basic structure of articleList. Vue

Create the file home/ articlelist.vue

<template>
  <div class="scroll-wrapper">Article list component {{math.random ()}}<p v-for="i in 50" :key="i">{{i}}</p>
  </div>
</template>

<script>
export default {
  name: 'ArticleList'
}
</script>

<style scoped lang='less'></style>
Copy the code

2. Use it in home.vue

In the SRC/views/home/home. Vue

2.1 Importing Components

import ArticleList from ‘./articleList’

2.2 Registering Components

components: {
    ArticleList
}
Copy the code

2.3 Using Components

<template>
  <div class="index">
    <! -- Channel list https://vant-contrib.gitee.io/vant/#/zh-CN/tab#biao-qian-lan-gun-dong -->
    <van-tabs>
      <van-tab
        v-for="channel in channels"
        :title="channel.name"
        :key="channel.id">
<! Channels correspond to the list of articles. Each channel needs to have an article list component. Article - List is written in v-for, so each loop generates an article list component. Van-tab has a lazy loading effect: the article list component will not be created until the current TAB is activated -->
+       <article-list></article-list>

      </van-tab>
    </van-tabs>

    <! -- Article list -->
  </div>
</template>
Copy the code

  • Under each channel, there will be an articleList component. If there are 10 channels, 10 aritcleList components are created.

  • Van-tabs have an effect similar to lazy loading

3. Channel information Transmission (Parent to child)

Pass the current channel information from the home.vue component to articlelist.vue to retrieve the specific articleList content based on the channel information in articlelist.vue

There are two steps in passing from father to son:

  1. Custom attributes are passed in with child component values in the parent component;

  2. Define props in the child component to receive;

1. Pass a property named channel from the parent component to the child component

<template>
  <div class="index">
    <! -- Channel list https://vant-contrib.gitee.io/vant/#/zh-CN/tab#biao-qian-lan-gun-dong -->
    <van-tabs>
      <van-tab
        v-for="channel in channels"
        :title="channel.name"
        :key="channel.id">
<! Channels correspond to the list of articles. Each channel needs to have an article list component. Article - List is written in v-for, so each loop generates an article list component. Van-tab has a lazy loading effect: the article list component will not be created until the current TAB is activated -->

        <! Pass the current channel information to the child component -->
+       <article-list :channel="channel"></article-list>
      </van-tab>
    </van-tabs>

    <! -- Article list -->
  </div>
</template>
Copy the code

2. Accept prop in child component articleList

Define the props

props: [‘channel’]

The use of props

<div class="scroll-wrapper"> {{channel}} channel's article information list component <p v-for="i in 50" :key="i">{{i}}</p>
</div>
Copy the code

Implement list function

In articlelist. vue, we need to do two interactions:

  1. Pull up to load more. Swipe your finger up to load more content and place it at the bottom, similar to the paging effect on a PC
  2. The refresh drop-down loads the latest content. Pull it down with your hands to get the latest content and place it on your head

Use the van-list component to implement the list functionality

<div class="scroll-wrapper"> {{channel}} the article information list component of the channel/** Van-list can be loaded with more effects: 2) When displaying data, if the current data is less than one screen, it will automatically trigger the load event and execute the corresponding callback onLoad to load data in onLoad. Use Ajax to fetch new data - append data to list (list will get more and more) - Manually set loading to false - Determine whether all data has been loaded and set finished to True if so If finished is not true, onLoad **/ will be called
    <van-list
      v-model="loading"
      :finished="finished"
      finished-text="There is no more."
      @load="onLoad"
    >
      <van-cell v-for="item in list" :key="item" :title="item" />
    </van-list>
  </div>
<script>
 data () {
    return {
      list: []./ / data items
      loading: false.// Are you loading...
      finished: false // Whether all data has been loaded}},methods: {
    onLoad () {
      // Update data asynchronously
      // setTimeout is for example only. In real scenarios, it is usually an Ajax request
      setTimeout(() = > {
        for (let i = 0; i < 10; i++) {
          this.list.push(this.list.length + 1)}// The loading state is complete
        this.loading = false

        // All data is loaded
        if (this.list.length >= 40) {
          this.finished = true}},1000)}}</script>
Copy the code