更新记录

1.2（2020-05-05） 下载此版本

• 优化性能

• 适配QS-virtualList

1.1（2020-04-07） 下载此版本

• 重要: 新增orderly参数

1.0（2020-04-07） 下载此版本

build

平台兼容性

注意

• ios未测试， 在下没有ios设备

• 请详细查看orderly详解

• 列表内item的高度不能变化(比如你列表的图片需要固定宽高, 或者他的变化不至于撑高item的高度)

QQ交流群: 750104037 点我加入

快速导航

• 支持度

• 示例项目目录结构

• 使用说明

• 可传入参数

• orderly详解

支持度

• Vue: App、微信小程序、QQ小程序、H5、百度小程序， (字节跳动小程序未测试)

• Nvue: App

示例项目目录结构

|-- QS-LazyLoad
    |-- App.vue
    |-- main.js
    |-- manifest.json
    |-- pages.json
    |-- README.md
    |-- js-sdk
    |   |-- QS-lazyLoad
    |       |-- QS-lazyLoad.js  //核心功能
    |-- pages
    |   |-- index
    |   |   |-- index.vue
    |   |-- nvueDemo
    |   |   |-- nvueDemo.nvue   //nvue示例
    |   |-- vueDemo
    |       |-- vueDemo.vue //vue示例
    |-- static
        |-- logo.png

使用说明

• html

  <template>
  <!-- 假如这是你的列表 -->
  <view style="background-color: #f8f8f8;height: 100vh;width: 100%;">
      <!-- 需要绑定scroll事件，详见js -->
      <scroll-view 
      scroll-y
      class="scrollView"
      @scrolltolower="getList"
      @scroll="scroll">
          <!-- 
          下面的view是v-for的最外层, 
          *vue需要在其上绑定 id, 是自定义前缀 + index的形式，并且吧自定义前缀传入QSLazyLoad中的lazyLoadItemName
          *nvue需要在其上绑定ref, 自定义ref名称, 并且把自定义ref名称传入QSLazyLoad中的lazyLoadItemName
          -->
          <view 
          class="list-item" 
          :id="lazyLoadItemName + index" 
          v-for="(item, index) in list" 
          :key="index">
              <!-- QSLazyLoad计算， 如果该item进入屏幕可见区域，则会在lazyArr相应的index位对象中的show属性为true, 所以要做如下判断 -->
              <image 
              mode="aspectFill" 
              class="scroll-item-image"
              :src="lazyArr[index]&&lazyArr[index].show?(urls[index] || ''):''"></image>
              <view class="scroll-item-text-view">
                  <text class="scroll-item-text">
                      {{lazyArr[index]&&lazyArr[index].show?'显示':'不显示'}}
                  </text>
              </view>
          </view>
      </scroll-view>
  </view>
  </template>

• js

  <script>
  //引入QS-lazyLoad.js
  import QSLazyLoad from '@/.../QS-lazyLoad.js';
  export default {
      //传入mixins数组中, QSLazyLoad是一个function， 会返回一个Object
      mixins: [
          QSLazyLoad({ 
              lazyArrName: '需要与data中自定义的用于实现懒加载的数组属性名相同', //无默认值 , 必填
              lazyLoadItemName: '绑定在视图上的id自定义前缀或ref名称',  //默认值: 'lazyLoadItem' , 必填
              lazyLoadViewName: 'list列表包裹的容器所绑定的id或ref', //目前不建议传
              lazyLoadViewTop: '懒加载的屏幕起始位置', // 默认值: 0
              lazyLoadViewHeight: '懒加载视图的高度',  // 默认值: 手机设备高度
              Iv: '容错, QSLazyLoad在计算懒加载的时候会相应扩大计算范围', //默认值: 3 
              orderly: '有序序列界值'   //默认值: 0, `一般情况下传1` 该参数非常重要，详见[orderly详解](#orderly)
          })
      ],
      data() {
          return {
              lazyArr: [],    //自定义的用于实现懒加载的数组，需要把属性名字传入QSLazyLoad中
  
              urls: [],   //演示用的图片数组
              list: []
          }
      },
      onReady() { //页面加载完毕
          this.getList()  //获取数据
      },
      methods: {
          scroll(e) { //这是绑定在scrollView的scroll事件， 需要把scrollTop值传给mixins中的QSLAZYLOAD_setScrollTop
              //如果不是scrollView组件实现，也可以是页面的onPageScroll
              this.QSLAZYLOAD_setScrollTop(e.detail.scrollTop);
          },
          getList() { //假如这是你的获取list的方法
              const l = this.list.length + 10;
              this.list = Array(l).fill('').map(item=>1);
              //在获取数据后调用mixins中的QSLAZYLOAD_update方法，并传入当前list的长度
              this.QSLAZYLOAD_update(this.list.length);
          }
      }
  }
  </script>

Attributes

{ 
    lazyArrName: '需要与data中自定义的用于实现懒加载的数组属性名相同', //无默认值 , 必填
    lazyLoadItemName: '绑定在视图上的id自定义前缀或ref名称',  //默认值: 'lazyLoadItem' , 必填
    lazyLoadViewName: 'list列表包裹的容器所绑定的id或ref', //目前不建议传
    lazyLoadViewTop: '懒加载的屏幕起始位置', // 默认值: 0
    lazyLoadViewHeight: '懒加载视图的高度',  // 默认值: 手机设备高度
    Iv: '容错, QSLazyLoad在计算懒加载的时候会相应扩大计算范围', //默认值: 3 
    countIv: '扩大计算距离',默认值: 0
    orderly: '有序序列界值'   //默认值: 0, `一般情况下传1` 该参数非常重要，详见[orderly详解](#orderly)
}

props: {
    refreshDistance: {  //适配QS-virtualList 自定义刷新距离
        type: [String, Number],
        default: 0
    },
    throttleTime: { //节流延时
        type: [String, Number],
        default: 100
    },
    minStep: {  //最小步长
        type: [String, Number],
        default: 3
    },
    maxStep: {  //最大步长
        type: [String, Number],
        default: 10
    }
}

orderly详解

• orderly参数是非常重要的一个参数, 当你的列表是有序时(list-item的样式是有规律时), 你应该传入相应规律个数, 比如说我的列表他的每一个item样式都是一样的, 那么我就该传1, 如果我的列表item样式是每两个一样的, 就该传2, 以此类推...

• 那么这样做的目的是什么呢? orderly的默认值是0, 代表是无序的, 那么列表每一次更新(加载数据), QSLazyLoad都会进行一次获取新增的item的布局信息, 这里会有些问题, 如果在获取布局信息的过程中用户移动的scrollview那么最终计算出来的布局信息不一定是准确的, 所以准确性会降低导致图片该展示的时候没有展示, 另一方面 可以优化性能(因为没有必要每次都获取布局信息), 而当orderly大于零时, 他除了第一次满足条件的有效计算外的每次计算都是按规律新增上去的, 所以你应该尽量控制你的orderly参数(其实一般来说列表里的item都是一样的, 所以一般情况下传1就好了)