vue 图片列表插件

支持图片列表的滚动加载

仿微信的图片大图预览功能

安装

npm install save vue-photos-scroll

使用

1. 首先引入插件

import {photosScroll, swipe} from 'vue-photos-scroll'

1. components 中注入

...

components: {
  photosScroll,
  swipe
}

...

1. 滚动加载

<photos-scroll v-if="reload" :loadFun="loadFun" :loadParams="scrollLoadParams" pagerKey="page">
  <template slot-scope="{item, items, index}" slot="content">
    <img :src="item.url">
  </template>
</photos-scroll>

props 说明

reload 是否重新载入

loadFun 加载的方法，返回当前页面的数据数组

loadParams 请求加载服务的参数

pargeKey 分页字段

1. 大图预览

<swipe ref="swipe" imgKey="url" originImgKey="originUrl"></swipe>

图片上增加点击时间

<photos-scroll v-if="reload" :loadFun="loadFun" :loadParams="scrollLoadParams" pagerKey="page">
  <template slot-scope="{item, items, index}" slot="content">
    <img :src="item.url" @click="openPhotoSwipe(items, index)">
  </template>
</photos-scroll>

...

openPhotoSwipe (items, index) {
  this.$refs.swipe.openPhotoSwipe(items, index)
}

...

props 说明

imgKey 图片字段

originUrl 原图字段

参数说明

items 传入的循环对象

index 下标