uni-app 图片懒加载

2023-11-23 22:00:40

uni-app 图片懒加载

功能

实现图片懒加载，并且显示数组中，始终只有3张图片，上下滑动增加的同时，删除最开始的那一张。可以指定从总图片的第几张开始加载。

思路

要实现上下滑动时的动画效果，我这里用到是uni-app自带swiper组件。同时为了解决增加或删除数组时，会重新渲染，导致动画效果未完成，所以用的是animationfinish页面加载后触发的事件。

要实现上下滑动时，动画执行完毕之后，要把执行后的那张图片，始终保持在中间位置。此处，就用到了serper组件中的current，当滑倒第3或者第1张时，给current赋值，使显示的图片始终在第二张的位置。同时滑动添加的同时，也要删除掉最开始的那一张

步骤

swiper组件使用

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

初始化显示页面

当总图片数组索引位为0时，则定位到第一张图片。当总图片数组索引位>0时，则定位到第二张图片

let swiperIndex = index ? 1 : 0   //seriperIndex(显示数组索引位)
itemsIndex = index ? index - 1 : 0 // itemsIndex(总图片数组索引位),-1是数组从0开始
let minLength = Math.min(2, this.items.length - index) // 防止总索引位大于总的数组长

移动页面

1.判断上滑还是下滑

通过swiper组件current，可以得到当前页面索引值，减去未滑动前的页面索引值。大于0则是向下滑动，小于0则是向上滑动。

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

2.下滑时

判断当前页面图片是中间的那一张,并且总数组长度大于页面索引值+1时，加载第四张图片。

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

setTimeout是为了保证删除时，数组是已经添加进去了的

this.atPresentNode.swiperIndex = 1 保证滑动后的图片始终在中间位置

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

上滑时

判断滑动之后是否在第一张的位置，并且总索引位大于0

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)

完整代码

  data () {
    return {
      index: 0, //从总数组第几位开始
      items: [], //总数组
      swiperItems: [], //显示数组
      atPresentNode: {
        swiperIndex: 0, // 显示数组索引位
        itemsIndex: 0, // 总数组索引位
      },
    }
  },
  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) // 当从第二张显示时，总数组索引位也加一
    },
    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: '已经没有更多的数据了', icon: 'none' })
        return
      }
      if (currentNum > 0) {
        this.atPresentNode.swiperIndex++   //为了和current同步，所以此处需要++
        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--  //为了和current同步，所以此处需要--
        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)
        }
      }
    }
  }

码农公寓