动态预加载 swiper-item 中的图片(延迟加载)
发布于 3 年前 作者 juanzeng 1365 次浏览 来自 分享

在使用 swiper 时,有些场景需要一次载入的图片太多,消耗资源的同时也会影响用户体验。

自己的解决方法是这样的:

  1. 创建图片【地址数组】
  2. 根据需要展示图片的总数创建一个空的数组,即用来页面绑定的【页面数组】
  3. 初始化【页面数组】,为第 1、2 项赋值
  4. 当向右滑动时,接着为【页面数组】的第 3 项赋值
  5. 直到全部展示完毕

如果用户提前离开,就能避免未展示项图片的加载。

代码如下:

<view class="s-page">
    <swiper class="s-swiper"
            snap-to-edge="false"
            indicator-dots="true"
            bindchange="swiperChange">
        <block wx:for="{{pageList}}"
               wx:key="*this">
            <swiper-item class="s-swiper_item">
                <view>{{item}}</view>
            </swiper-item>
        </block>
    </swiper>
</view>
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);
    }
})

如果不显示“面板指示点”,那么【页面数组】直接创建一个空数组即可。

自己的笨办法,如果有更好的方法,请不吝赐教!

1 回复

不错,简单明了

回到顶部