• $router: jump

• $route: receives data

• Functions need to be called, or else they lose their function. Some functions are triggered by a click, some functions need to be created, and some functions need to be created in a different function

Implementation steps of project components:

1. Set the route (or connection interface) (The route must be consistent with the background and cannot be written randomly).

• The route is set in index.js on the router
• The interface is set in index.js in the API

2. Write the corresponding function and the data to be used (you can print it first and see if you get it)

3. Import the required Vant components

4. Render the content onto the page

Lazy loading of images

1. Obtain the data and store it in variables cates and IMGS

2. Render on the page (traverse)

3. Introduce lazy loading of Vant components

4. On the image, change the SRC attribute to V-lazy

Routing hop

1. Write @click=’getPhotoInfo(img.id)’ on the page that you want to click to jump to, and write the function (print first to see if you get the ID)

 getPhotoInfo(id) {
      // console.log(id)
      this.$router.push('/home/phontoinfo/' + id)
    }
Copy the code

2. Under the Home/photos folder, create the PhotoInfo folder and create the index.vue file

• PhotoInfo/index.vue

<template>
  <div>photoinfo</div>
</template>
<script>
export default {
  data: () = >({})}</script>
<style lang="less" scoped>
</style>
Copy the code

3. Configure routes

• Photolist.vue (click on the image to jump to photoInfo)

<img
            v-for="img in imgs"
            :key="img.id"
            v-lazy="img.img_url"
            alt=""
            @click="goDetail('/home/photoinfo',img.id)"
          />



goDetail(id) {
      // console.log(id)
      this.$router.push('/home/photoinfo/' + id)
    }
Copy the code

• router/index.js

import Photoinfo from '.. /views/Home/photos/PhotoInfo'

{
    path: '/home/photoinfo/:id'.component: Photoinfo
  }
Copy the code

Because the goDetail () function is used multiple times (news: newslist jumps to newsinfo, photolist jumps to photoinfo……) So you can put the goDetail () function in the global (main.js)

1. Create the mixins folder, which contains the index.js file

2./mixins/index.js

import Vue from 'vue'
Vue.mixin({
  methods: {
    goDetail(url, id) {
      this.$router.push(url + '/' + id)
    }
  }
})

Copy the code

3. Introduce mixins in main.js

import './mixins'
Copy the code

4. Set click events on the photolist.vue image

<img
            v-for="img in imgs"
            :key="img.id"
            v-lazy="img.img_url"
            alt=""
            @click="goDetail('/home/photoinfo',img.id)"
          />
Copy the code

Preview picture

• Vue-preview Images preview third-party components

Github.com/LS1231/vue-… npmjs.com/package/vue-preview

1. Find the Image preview component in Vant

import { ImagePreview } from 'vant'
Copy the code

2. Click the image to preview (set the click event)

<img
          v-for="(item, index) in thumImages"
          :key="item.id"
          :src="item.src"
          alt=""
          @click="showThum(index)"
        />
Copy the code

3. Process the data into a new array

// Display the preview effect
    showThum(startPosition) {
      const images = []
      // Process the data into a new array
      this.thumImages.forEach(item= > {
        if (item.src) images.push(item.src)
      })
      ImagePreview({
        images,
        // Display a certain image by default
        startPosition
      })
    }
Copy the code

Page Hopping (Routing)

1. Create a folder goodsinfo/index.vue

2. Configure routes

import Goodsinfo from '.. /views/Home/goods/Goodsinfo'



{
    path: '/home/goodsinfo/:id'.component: Goodsinfo,
    props: true
  }
Copy the code

3. Set up click events and functions in goodslist/index.vue

<div
      class="goods-list-item"
      v-for="good in goods"
      :key="good.id"
      @click="goGoodsInfo(good.id)"
    >
Copy the code

goGoodsInfo(id) {
      this.$router.push('/home/goodsinfo/' + id)// The address must be the same as that configured in the route
    }
Copy the code

To load more

1. Write a button in the goods-list div and set the click event

<van-button type="warning" block @click="getMore">{{
      moreText
    }}</van-button>
Copy the code

2. Implement the function

getMore() {
      this.getGoods()
    }
Copy the code

• But this will keep loading, increasing the load on the server, so need to optimize (throttling)
  • 1. Define a bool

  data: () = > ({
  pageNo: 0.pageSize: 3.goods: [].isHasMore: false// For throttling
  })
  Copy the code

  • 2. Throttling within the data fetching function

  async getGoods() {
    ++this.pageNo
    const res = await this.$http.getGoods({ pageNo: this.pageNo, pageSize: this.pageSize })
    this.goods = this.goods.concat(res.data.message)
    / / throttling
    this.isHasMore = this.pageNo * this.pageSize > res.data.count
  }
  Copy the code

  • 3. Process the content displayed on the button, but not finished loading, “load more”, when finished loading, “emptied”

  computed: {
  moreText() {
    return this.isHasMore ? 'Hollowed out' : 'Load more'}}Copy the code

Load using the List component

1. Find the List component in Vant and import it into ant

import { Button, NavBar, Tabbar, TabbarItem, Swipe, SwipeItem, Toast, Grid, GridItem, Card, Panel, Field, Icon, Rate, Tabs, Tab, Lazyload, List } from 'vant'
Vue.use(List)
Copy the code

2. Use this component on the Goodslist page

<template>
  <div>/ / van - list component<van-list
      class="goods-list"
      v-model="loading"
      :finished="finished"
      finished-text="There is no more."
      @load="onLoad"
      offset="0"
    >
      <div
        class="goods-list-item"
        v-for="good in goods"
        :key="good.id"
        @click="goGoodsInfo(good.id)"
      >
        <div class="img-box">
          <img v-lazy="good.img_url" alt="" />
        </div>
        <h2 class="title">{{ good.title }}</h2>
        <div class="info">
          <div class="price">
            <span class="new">￥{{good.sell_price}}</span>
            <span class="old">￥{{good.market_price}}</span>
          </div>
          <div class="sell">
            <span>In the hot</span>
            <span>The remaining {{good.stock_quantity}} pieces</span>
          </div>
        </div>
      </div>
      <! -- <van-button type="warning" block @click="getMore">{{ moreText }}</van-button> -->
    </van-list>
  </div>
</template>
Copy the code

3. Basic usage of components

• Basic usage

The List component controls the loading state using the loading and FINISHED variables. When the component is rolled to the bottom, the load event is triggered and the loading is set to true. In this case, you can initiate asynchronous operations and update data. After data is updated, set loading to False. If all data is loaded, set finished to True.

<script>
export default {
  data: () = > ({
    pageNo: 0.pageSize: 3.goods: [].// isHasMore: false
    loading: false.finished: false.total: 0
  }),
  methods: {
    async onLoad() {
      // Update data asynchronously
      // setTimeout is for example only. In real scenarios, it is usually an Ajax request
      setTimeout(async() = > {await this.getGoods()
        // Load status result
        this.loading = false
        console.log(this.total)
        // All data is loaded
        if (this.goods.length >= this.total) {
          this.finished = true}},500)},async getGoods() {
      ++this.pageNo
      const res = await this.$http.getGoods({ pageNo: this.pageNo, pageSize: this.pageSize })
      this.goods = this.goods.concat(res.data.message)
      // this.isHasMore = this.pageNo * this.pageSize > res.data.count
      this.total = res.data.count
    },
    // Load more
    // getMore() {
    // this.getGoods()
    // },
    // Jump to the product details page
    goGoodsInfo(id) {
      this.$router.push('/home/goodsinfo/' + id)
    }
  },
  created() {
    // this.getGoods()
  }
  // computed: {
  // moreText() {
  // return this.isHasMore ? 'Hollowed out' : 'Load more'
  / /}
  // }
}
</script>
Copy the code

Home Home and Goodsinfo common multicast component

1. Create the file Swipe. Vue in the Components folder

<template>
  <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
    <van-swipe-item v-for="item in lunbolist" :key="item.id">
      <img :src="item.src || item.img" alt="" />
    </van-swipe-item>
  </van-swipe>
</template>
<script>
export default {
  props: ['lunbolist']// Accept parameters from another page
}
</script>
<style lang="less" scoped>
.goods-info {
  width: 96%;
  margin: 0 auto;
  border: 1px solid #ccc;
  .my-swipe {
    padding: 10px;
    text-align: center;
    img {
      width: 50%;
      height: 100%; }}}</style>

Copy the code

2. The Home/index. Vue or goodsinfo/index. Vue

1. Introduce Swipe. Vue component

import Swipe from '.. /.. /.. /.. /components/Swipe.vue'
Copy the code

2. Register components

 components: {
    Swipe
  }
Copy the code

3. Apply colours to a drawing

<template>
  <div class="goods-info">
    <! -- <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white"> <van-swipe-item v-for="item in lunbolist" :key="item.id"> <img :src="item.src" alt="" /> </van-swipe-item> </van-swipe> -->
    <Swipe class="my-panel" :lunbolist="lunbolist"></Swipe>
  </div>
</template>
Copy the code