uniapp swiper实现图片预览预览一张图片加载前后两张实现性能优化

背景：

使用uniapp框架在做h5项目时，领导要求预览图片时不能一次性加载完所有的图片，需要看一张加载一张，这样用户不费流量，优化h5的性能。
首先uniapp官网实现图片预览使用的是uni.preview api，但是这样传的urls数组，在点击图片进行预览时一次性加载了所有的图片。
所以要实现图片预览，点击一张加载这张图片需要自已写预览组件。
这里用到的是swiper组件来进行预览功能。

1、新建公共组件 previewImage.vue

<template><view class="previewImg" v-if="show" @touchmove.stop.prevent :class="{'pc-full':!$util.isMobile(),'full':$util.isMobile()}"><view class="mask" @click="close" :class="{'pc-full':!$util.isMobile(),'full':$util.isMobile()}"><swiper class="mask-swiper" :current="index" @change="swiperChange" :disable-touch="false" :class="{'pc-full':!$util.isMobile(),'full':$util.isMobile()}"><swiper-item v-for="(img, i) in pageList" :key="i"><image class="mask-swiper-img" :src="img" mode="aspectFit" :class="{'pc-full':!$util.isMobile(),'full':$util.isMobile()}"/></swiper-item></swiper></view><view class="page" v-if="imgs.length > 0">{{ index + 1 }} / {{ imgs.length }}</view><view class="close-btn" @click.stop="close()"><icon type="clear" size="30" /></view></view>
</template>

<script>
export default {name: 'previewImage',props: {// 图片数组，由父组件传值imgs: {type: Array,default: () => {return [];}},},data() {return {show: false, // 展示预览组件index: 0,pageList: [],};},methods: {swiperChange(e) {letoldPageIndex = this.index, // 之前展示的页面索引newPageIndex = e.detail.current; // 滑动后新展示的页面索引// 判断是否由用户触摸引起的if (e.detail.source == 'touch') {// 判断滑动方向if (oldPageIndex < newPageIndex) {// 向左滑// 判断是否到最后一张，并且地址信息是否为空if (newPageIndex < this.imgs.length - 1 && !this.pageList[newPageIndex + 1]) {this.pageList[newPageIndex + 1] = this.imgs[newPageIndex + 1];}this.index = newPageIndex;} else if (oldPageIndex > newPageIndex) {// 向右滑// 判断是否到第一张if (newPageIndex < this.imgs.length - 1 && !this.pageList[newPageIndex - 1]) {this.pageList[newPageIndex - 1] = this.imgs[newPageIndex - 1];}this.index = newPageIndex;}}},open(e) {const _this = this;_this.index = e;_this.show = true;// 根据图片总数，创建需要渲染的空数组let pageList = new Array(_this.imgs.length).fill('');// 初始化渲染数组，载入当前图片，并且预载入下一张图片// 如果当前不是在第一张，预载入当前图片+下一张图片+上一张图片// 如果当前是第一张，预载入下一张图片// 如果当前是最后一张，预载入上一张图片pageList[_this.index] = _this.imgs[_this.index];if(_this.index === 0 && _this.imgs.length > _this.index + 1){pageList[_this.index + 1] = _this.imgs[_this.index + 1];}else if(_this.index !== 0 && _this.index + 1 > 0 && _this.index + 1 < _this.imgs.length){pageList[_this.index + 1] = _this.imgs[_this.index + 1];pageList[_this.index - 1] = _this.imgs[_this.index - 1];}else if(_this.imgs.length = _this.index + 1){pageList[_this.index - 1] = _this.imgs[_this.index - 1];}// 渲染页面_this.pageList = pageList;},//关闭预览close() {this.show = false;this.index = 0;}}
};
</script>

2、调用预览组件

新建父组件index.vue

<view class="img-item" v-for="(img, imgIndex) in files" :key="imgIndex" @click.stop="previewImage(imgIndex)"><img :src="img.imgurl" />
</view>
<preview-image ref="previewImage" :imgs="imgs"></preview-image>

import previewImage from '@/components/previewImage.vue';
export default {components: {previewImage},data() {return {files:[], // 循坏渲染到页面的图片imgs:[], // 进行预览的图片数组字符串}},methods:{// 预览事件，点击当前图片，将图片索引传给事件previewImage(index){_this.$nextTick(function(){// 执行预览子组件的open事件_this.$refs.previewImage.open(index);});}   }
}

uniapp swiper实现图片预览预览一张图片加载前后两张实现性能优化相关推荐

vue 图片拖动加载类似于地图_前端性能优化之图片懒加载（附vue自定义指令）...
作者:lzg9527 链接:https://juejin.cn/post/6903774214780616718 在类电商类项目,往往存在大量的图片,如 banner 广告图,菜单导航图,美团等商家列 ...
java怎么预加载字典值,有选择地显示预加载内容提高网站的性能
有选择地显示预加载内容提高网站的性能 1/5/2008人气:2761 Html页面内的每个元素都可以通过javascript来访问.DHTML的样式属性包含有可视性属性,后者能够让你控制是否在页面上显 ...
VC++图片框控件静态和动态加载位图
win10,vc6:新建一个对话框工程:右击资源文件夹,插入...: 类型,Bitmap:引入:选择一个bmp图片: 插入后如下:自动给了一个id: 图片框属性:类型,下拉选中位图: 图像属性,选中 ...
用手机UC浏览器页面打开vue项目，图片，css，js都没加载
用手机UC浏览器页面打开vue项目,图片,css,js都没加载用HBuilder X创建了一个普通的vue项目,在电脑上使用浏览器看没有什么问题,然后提交到了公司的服务器上,发现用手机,除了火狐,谷 ...
下载并预览pdf，提示未能加载PDF文档 - vue
后端传一个字符串,前端创建了new Blob,Chrome提示无法加载PDF文档? 后面尝试使用a标签下载,提示无法打开: 控制台窗口blob和url,有显示数据,但是但不开,是什么原因呢??? 网上 ...
帆软问题记录：数据可预览，但是数据集正在加载
一.问题描述数据集数据预览没问题,但是数据集字段无法显示,一直都是正在加载- 二.解决办法把关联方式改成left join,inner join的方式可解决问题
小程序本地图片偶尔加载不出来_小程序优化的20中策略
体验评分是一项给小程序的体验好坏打分的功能,它会在小程序运行过程中实时检查,分析出一些可能导致体验不好的地方,并且定位出哪里有问题,以及给出一些优化建议. 使用流程: 1.打开开发者工具,在详情里切换 ...
微信小程序：uni-app 小程序打包超过2M限制的方法—分包加载
摘自微信小程序官方文档:https://developers.weixin.qq.com/miniprogram/dev/framework/subpackages.html 起初小程序上线时,微信限 ...
qt快速加载图片_Qt实用技巧：使用Qt加载超大图片的耗时测试
需求某机器人项目中,需要加载构建的地图,此处仅测试直接加载图片的时间. 相关博客测试代码 QString path; path = "./map/1.png"; QFileIn ...

uniapp swiper实现图片预览预览一张图片加载前后两张实现性能优化

背景：

1、新建公共组件 previewImage.vue

2、调用预览组件

uniapp swiper实现图片预览预览一张图片加载前后两张实现性能优化相关推荐

最新文章

热门文章

uniapp swiper实现图片预览 预览一张图片加载前后两张 实现性能优化

背景：

1、新建公共组件 previewImage.vue

2、调用预览组件

uniapp swiper实现图片预览 预览一张图片加载前后两张 实现性能优化相关推荐

最新文章

热门文章

uniapp swiper实现图片预览预览一张图片加载前后两张实现性能优化

uniapp swiper实现图片预览预览一张图片加载前后两张实现性能优化相关推荐