uni-app图片列表预览大图

首先确定预览是新写一个页面还是搞一个弹窗，随你，我是新开一个页面的，然后在点击图片准备预览的时候，需要的参数有：
1，当前点击图片的下标，
2，当前点击图片的列表数组
点击的时候将这些参数存起来：

父组件：
// 点击预览

previewImg(item, index) {uni.setStorageSync("currentImgIndex",index)    // 当前下标uni.setStorageSync('imgPreviewPicList', item)  // 当前数组uni.navigateTo({url: '../imgPreview/imgPreview'             // 要跳转的预览页})
},

预览页：
imgPreview.vue：这个代码也很简单，一看即懂，就是用个swiper组件

<template><view class="previewImg"><view class="mask"><swiper @change="changeSwiper" class="my_swiper" :current="current" :circular="circular" :indicator-dots="indicatorDots" :autoplay="autoplay" :duration="duration"><swiper-item v-for="(x, y) in picList" :key="y"><view class="bg_img" :style="{ backgroundImage: 'url('+x+')'}"></view></swiper-item></swiper></view><view class="page" v-if="picList.length>0">{{ current + 1 }} / {{ picList.length }}</view></view>
</template><script>
export default { data() {return {picList: [],indicatorDots: false,autoplay: false,duration: 500,circular: true,current: 0,isShowSwiper: false};},onLoad() {this.picListInit();}, methods: {clickPic(index) {this.current = index;this.isShowSwiper = true;},async picListInit() {this.current = uni.getStorageSync("currentImgIndex");this.picList = uni.getStorageSync("imgPreviewPicList");},changeSwiper(e) {this.current = e.target.current;}}
};
</script><style lang="scss" scoped>
.page {position: fixed;z-index: 6;color: #fff;bottom: 20rpx;text-align: center;width: 100%;
}
.mask {position: fixed;top: 0;left: 0;width: 100%;height: 100%;display: flex;justify-content: center;align-items: center;background-color: #000;z-index: 5;> .my_swiper {width: 100%;height: 60vh;.bg_img {background-size: 100% auto;background-repeat: no-repeat;background-position:center;width: 100%;height: 100%;}}
}.pic_list {display: flex;flex-flow: row wrap;> view {flex: 0 0 33.3vw;height: 33.3vw;padding: 1vw;> image {width: 100%;height: 100%;}}
}
</style>

实际效果如下图所示：

uni-app图片列表预览大图相关推荐

android从九宫格全屏预览,仿微信朋友圈展示图片的九宫格图片展示控件，支持点击图片全屏预览大图...
AssNineGridView 仿微信朋友圈展示图片的九宫格图片展示控件,支持点击图片全屏预览大图(可自定义). 写在前面这是一个九宫格控件,本来是很久之前就写好了,现在才开源出来,也是看了很多优秀 ...
用uni.previewImage({}) 来直接做图片的预览和识别二维码
需求: 客户要求用户不用截图保存,通过直接用手机识别二维码关注,所以,这就需要我们进行图片的预览即可以解决. <image src="https://lr-huayoushi.oss- ...
android仿微信图片选择预览裁剪,仿微信图片选择
Android图片选择器,仿微信的图片选择器的样式和效果. 支持图片单选.多选.裁剪形状自定义.裁剪比例设置.解耦图片加载框架. 项目地址:https://github.com/1izheng/Ima ...
elementui展示多张图片_elementUI 上传多张图片并预览大图左右切换
前段时间项目需求中涉及到上传多张图片当条信息查看时可预览大图功能,项目框架vue.js+elementUI,抽时间在此做个整理记录,如有更好的方法欢迎大家互相交流页面列表更多操作-修改-先选择图 ...
微信小程序图片放大预览效果的实现
效果预览效果图有点快,但是可以大致看出来效果了.我再给大家描述下吧一个页面有3张图片,点击其中任意一张都可以放大预览.然后在预览的时候,左右滑动,还可以看另外两张图片. 话不多说,直接上代码 1, ...
微信小程序：常用功能6——点击图片，实现图片的预览功能wx.previewImage(Object object, boolean showmenu)
向用户展示图片时,为了展现布局的美观性,往往不同尺寸的图片要放在相同大小的容器中. 但是图片想让用户看清.或者保存时,我们就要进行图片的预览,像用户展示原图. 图片预览接口:wx.previewIma ...
Axure RP9——【图片放大预览效果】
图片放大预览效果目录 I.实现效果 II.实现步骤 I.实现效果一般适用于做电商平台图片的放大预览,以此更方便我们看清内容细节. 鼠标停留在商品大图时,会出现一个预览区域,并且右侧会出现预览区域的 ...
Chrome 扩展程序——Imagus：图片放大预览工具
主要介绍 Imagus 的功能及应用,Imagus 是一款简单实用的图片放大预览工具. 主要功能 Imagus 的功能非常单一,就是在浏览网页时,当鼠标悬停到一张图片后,会自动放大图片,进行预览,这在 ...
微信小程序图片放大预览效果的实现，轮播图点击放大预览
近期很多刚学习小程序的同学,想做哪种图片点击放大,然后可以左右滑动预览的效果.我也特意去研究下,发现直接用微信程序自己的api就可以很方便的实现.今天就来教大家如何实现小程序图片点击放大的效果. 老规 ...

uni-app图片列表预览大图

uni-app图片列表预览大图相关推荐

最新文章

热门文章