内存不足原由

小顺序对用户内存运用举行了限定，假如一个页面的图片过量，会致使内存不足的内部毛病

解决办法

对图片举行懒加载，不影响体验的前提下，只衬着当屏的图片，屏外图片，显现缺省图

实践剖析

1. 图片最多的状况就是列表（头图或图片列表），为了机能，平常会转动加载，而在小顺序中，须要借助scroll-view/swiper组件，为了不影响用户体验，就不能让之前以衬着的列表元素落空占位

2. 要推断元素是不是在当屏，就要晓得一些高度信息（屏幕高，转动高度，元素高度），然则元素高度在小顺序中不能动态猎取，所以就须要列表时定高的

代码

wxml文件

    <!--
        showIndex为当屏中首列表元素的索引值
        scrollLoad转动加载
        scrollHide图片当屏衬着
    -->
    
    <scroll-view wx:if="{{isNet}}" scroll-y="true"
        bindscrolltolower="scrollLoad" bindscroll="scrollHide">
    
        <view wx:if="{{total}}">
            <block wx:for="{{imgDatas}}">
                <view>
                    <image wx:if="{{showIndex + 24 > index && showIndex - 6 < index}}" src="{{item.pic.url}}" mode="aspectFill"></image>
                </view>
            </block>
        </view>
    
    </scroll-view>

盘算showIndex的要领，可作为公用要领

    /**
     * offetHeight  转动盘算部份到顶部间隔
     * scrollTop   转动高度
     * height      每一个模块的高度
     * colunm      列数
    **/
    
    function countIndex (offetHight, scrollTop, height, colunm) {
        // 单例猎取屏幕宽度比
        if (!countIndex.pix) {
            try {
              let res = wx.getSystemInfoSync()
              countIndex.pix = res.windowWidth / 375
            } catch (e) {
              countIndex.pix = 1
            }
        }
        let scroll = scrollTop - offetHight * countIndex.pix
        let hei = height * countIndex.pix
        return scroll > 0 ? Math.floor(scroll / hei) * colunm : 0
    }

js文件

    let wxTools = require('../../untils/wxTools.js')
    
    Page({
        data: {
            scrollData: {
                offetHeight: 15, // px
                height: 80, // px
                colunm: 3
            },
            showIndex: 0
        },
        scrollHide (e) {
            let data = [
                this.data.scrollData.offetHeight,
                e.detail.scrollTop,
                this.data.scrollData.height,
                this.data.scrollData.colunm
            ]
            
            let index = wxTools.countIndex(...data)
    
            this.setData({
                showIndex: index
            })
        }
    })

具体要衬着若干的元素，本身来定，这里没有放到countIndex中到场盘算，比方wxml中的{{showIndex + 24 > index && showIndex – 6 < index}}，会衬着30个元素的图片