Uni app image lazy loading

function

Lazy loading of pictures is realized, and there are always only 3 pictures in the display array. While sliding up and down to increase, the first one is deleted. You can specify which page of the total picture to load from.

thinking

To achieve the animation effect when sliding up and down, I use the swiper component of uni app. At the same time, in order to solve the problem that when adding or deleting an array, it will be re rendered, resulting in the incomplete animation effect, so the event triggered after the animation finish page is loaded is used.

To slide up and down, after the animation is executed, always keep the executed picture in the middle. Here, the current in the serper component is used. When sliding the third or first sheet, assign a value to current to make the displayed picture always in the position of the second sheet. At the same time, delete the first one while sliding to add

step

swiper component usage

<swiper vertical="true"
            :current="atPresentNode.swiperIndex"
            @animationfinish="slideSwiper">
      <swiper-item v-for="item,index in swiperItems"
                   :key="index">
        <view>{{item}}</view>
      </swiper-item>
  </swiper>

Initialize display page

When the index bit of the total picture array is 0, it is positioned to the first picture. When the index bit of the total picture array is > 0, it will be located to the second picture

let swiperIndex = index ? 1 : 0   //Seriperindex (display array index bits)
itemsIndex = index ? index - 1 : 0 // Itemsindex (total picture array index bit), - 1 is the array, starting from 0
let minLength = Math.min(2, this.items.length - index) // Prevent the total index bits from being greater than the total number

Move page

1. Judge whether to slide up or down

Through the swiper component current, you can get the current page index value, minus the page index value before sliding. Greater than 0 means sliding downward, and less than 0 means sliding upward.

let currentNum = event.target.current - this.atPresentNode.swiperIndex

2. When sliding

When the current page image is the middle one and the total array length is greater than the page index value + 1, load the fourth image.

this.atPresentNode.swiperIndex >= 2 && this.items.length > this.atPresentNode.itemsIndex + 1

setTimeout is to ensure that the array has been added when deleting

this.atPresentNode.swiperIndex = 1 to ensure that the picture after sliding is always in the middle position

this.swiperItems.push(this.items[this.atPresentNode.itemsIndex + 1])
setTimeout(() => {
 this.atPresentNode.swiperIndex = 1
 this.swiperItems.shift()
}, 0)

When sliding up

Judge whether it is at the position of the first sheet after sliding, and the total index bit is greater than 0

this.atPresentNode.swiperIndex <= 0 && this.atPresentNode.itemsIndex > 0

**The reason for deleting before adding here is that when adding the header first, the position of the display picture relative to the array will be changed, and the position of the display picture will be delayed one bit downward. Therefore, in order to avoid this situation, delete it first and then add it to the header**

 this.swiperItems.pop()          
 setTimeout(() => {
    this.atPresentNode.swiperIndex = 1
    this.swiperItems.unshift(this.items[this.atPresentNode.itemsIndex - 1])   
}, 0)

Complete code

  data () {
    return {
      index: 0, //Starting from the number of bits in the total array
      items: [], //Total array
      swiperItems: [], //Display array
      atPresentNode: {
        swiperIndex: 0, // Display array index bits
        itemsIndex: 0, // Total group index bits
      },
    }
  },
  created () {
    this.initSwiperItems(this.index)
  },
  methods: {
    initSwiperItems (index) {
      this.swiperItems = []
      if (this.items.length <= 0) { return }
      let swiperIndex = index ? 1 : 0
      index = +index ? +index - 1 : 0
      this.atPresentNode = {
        swiperIndex,
        itemsIndex: index,
      }
      let minLength = Math.min(2, this.items.length - index)
      for (let i = 0; i <= minLength; i++) {
        this.items[index + i] && this.swiperItems.push(this.items[index + i])
      }
      this.atPresentNode.swiperIndex == 1 && (this.atPresentNode.itemsIndex = this.atPresentNode.itemsIndex + 1) // When displayed from the second sheet, the total group index bit is also increased by one
    },
    slideSwiper (event) {
      let currentNum = event.target.current - this.atPresentNode.swiperIndex
      if ((this.items.length <= this.atPresentNode.itemsIndex + 1 || this.atPresentNode.itemsIndex == 0) && currentNum == 0) {
        uni.showToast({ title: 'There is no more data', icon: 'none' })
        return
      }
      if (currentNum > 0) {
        this.atPresentNode.swiperIndex++   //In order to synchronize with current, you need to++
        this.atPresentNode.itemsIndex++
        if (this.atPresentNode.swiperIndex >= 2 && this.items.length > this.atPresentNode.itemsIndex + 1) {
          this.swiperItems.push(this.items[this.atPresentNode.itemsIndex + 1])
          setTimeout(() => {
            this.atPresentNode.swiperIndex = 1
            this.swiperItems.shift()
          }, 0)
        }
      }
      if (currentNum < 0) {
        this.atPresentNode.swiperIndex--  //In order to synchronize with current, you need to--
        this.atPresentNode.itemsIndex--
        if (this.atPresentNode.swiperIndex <= 0 && this.atPresentNode.itemsIndex > 0) {
          this.swiperItems.pop()
          setTimeout(() => {
            this.atPresentNode.swiperIndex = 1
            this.swiperItems.unshift(this.items[this.atPresentNode.itemsIndex - 1])
          }, 0)
        }
      }
    }
  }