小程序swiper图片“懒加载”

最近在做一个点读的小程序，其中有个点读功能，加载书本图片，点击图片指定区域播放音频，左右滑动翻页，翻页就用到了小程序的swiper组件了，因为一本书的图片比较多，大概80页左右

1. 一开始是遍历出所有图片，但是第一次因为要加载的图片太多了，渲染有点慢，感觉整个小程序卡住了

2. 换个方法，swiper只显示5个swiper-item，根据翻页方向来动态调整swiper-item的内容和swiper的current，太久了，忘记是怎么不行了

3. 继续看文档，看到image有个lazy-load属性，说是懒加载的，我居然信了，结果还是一进小程序，就一直发网络请求加载图片，这个lazy-load属性只对scroll-view有效

4. 最后没办法了，还是渲染全部swiper-item，监听swiper的change事件，所有图片默认url为空，记住当前的index，动态赋值图片的 url，预加载前后两张的图片，其它图片看以前是否加载过，加载过的赋值url，没加载过的为空，貌似是解决图片加载问题

下面是用的wepy写的部分小程序代码

<swiper :current="current" @change="changePage"  >
    <swiper-item  v-for="item in swiperImages" :key="item" :item-id="item.Id">
      <view class="swiper-item">
        <img v-if="item.Cover" :src="item.Cover" @tap="clickBook" />
      </view>
    </swiper-item>
</swiper>

wepy.page({
  data: {
    current: 0
    images: [],
  },
computed: {
    swiperImages() {
      let copyImage = JSON.parse(JSON.stringify(this.images));
      if (copyImage.length === 0) {
        return [];
      }
      let start = this.current - 1,
        end = this.current + 1;
      return copyImage.map((v, index) => {
        if ( index < start || index > end) {
          v.Cover = '';
        }
        return v;
      });
    }
},
methods:{
    changePage(e) {
      let itemId = parseInt(e.$wx.detail.currentItemId);
      let currentPage = null;
      this.images.forEach(v => {
        if (v.Id === itemId) {
          currentPage = v;
        }
      });
      if (currentPage) {
        this.loadData(currentPage);
        this.current = currentPage
      }
    }
}
})

全文完