vue-photos-scroll
照片滚动加载
仿微信的大图预览
安装
npm install save vue-photos-scroll
使用
- 首先引入插件
import {photosScroll, swipe} from 'vue-photos-scroll'
- components 中注入
...
components: {
photosScroll,
swipe
}
...
- 滚动加载
<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 分页字段
- 大图预览
<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>
···javascript
...
openPhotoSwipe (items, index) {
this.$refs.swipe.openPhotoSwipe(items, index)
}
...
···
props 说明
imgKey 图片字段
originUrl 原图字段
参数说明
items 传入的循环对象
index 下标