微信小程序延迟加载-动态预加载swiper-item中的图片

在使用 swiper 在一些场景中，需要一次加载太多的图片，这既消耗了资源，也影响了用户体验。

您自己的解决方案是：

1. 创建图片[地址数组]]
2. 根据要显示的图片总数创建一个空数组，即用于页面装订的[页数组]
3. 初始化[页面数组]，这是第一个 1、2 项赋值
4. 向右滑动时，后跟第一个页面数组。 3 项赋值
5. 直到所有显示完成

如果用户提前离开，则可以避免加载未显示的项目图片。

代码如下：

    
        
            
                {{item}}
            
        
    


Page({

    /**
     * 页面的初始数据
     */
    data: {
        imageUrlList: [url 1, url 2, url 3, url 4, url 5, url 6, url 7],
        pageList: [],
        currentPageIndex: 0
    },

    /**
     * 生命周期函数--监听页面加载
     */
    onLoad: function (options) {
        // 根据图片总数，创建需要渲染的空数组。
        let pageList = new Array(this.data.imageUrlList.length).fill();
        // 初始化呈现数组并加载第一个1张，并预装了下一个。
        pageList[this.data.currentPageIndex] = this.data.imageUrlList[this.data.currentPageIndex];
        pageList[this.data.currentPageIndex + 1] = this.data.imageUrlList[this.data.currentPageIndex + 1];
        // 渲染页面
        this.setData({
            pageList: pageList
        })
        console.log(this.data.pageList);
    },

    swiperChange: function (e) {
        let
            oldPageIndex = this.data.currentPageIndex, // 先前显示的页面索引
            newPageIndex = e.detail.current; // 滑动后新显示的页面索引。

        // 确定是否由用户触摸引起
        if (e.detail.source == touch) {
            console.log(newPageIndex);
            // 确定滑动方向
            if (oldPageIndex < newPageIndex) {
                console.log(向右滑动);
                // 判断是否到达最后一个，地址信息是否为空。
                if (newPageIndex < this.data.imageUrlList.length - 1 && !this.data.pageList[newPageIndex + 1]) {
                    this.data.pageList[newPageIndex + 1] = this.data.imageUrlList[newPageIndex + 1]
                    console.log(预加载成功);
                }
                // 渲染页面
                this.setData({
                    currentPageIndex: newPageIndex,
                    pageList: this.data.pageList
                })
            } else if (oldPageIndex > newPageIndex) {
                console.log(向左滑动);
                this.data.currentPageIndex = newPageIndex;
            }
        }
        console.log(this.data.pageList);
    }
})

如果没有显示面板指示点，则[页面数组]可以直接创建一个空数组。

我愚蠢的方式，如果有更好的方法，请不要犹豫评论！