VUE类似微信朋友圈查看图片组件

1.效果展示

瞎封装组件系列：

VUE类似淘宝选择商品多规格组件

VUE简单提示框

VUE树形图(递归实现)

VUE多店铺购物车

2.使用方法

<template><div class="ui-pane"><ui-header headertit="tips"></ui-header><div class="ui-content"><arealine linetit="图片弹出列表"></arealine>//v-for生成图片缩略图<div class="img_box"><div v-for="(item,index) in imglist" @click="imgClick(index)"><img :src="item" /></div></div>//组件<imglist v-if="imglistmodalisshow" :index="crtIndex" :imglist="imglist" @closeMolde="closeMolde"></imglist></div></div>
</template><script>import imglist from '../../../../components/ghViewImgList/viewimglist.vue'export default {data() {return {imglist: ['http://p1.music.126.net/gWTBbLJfla0LT74mwDildA==/109951165477221000.jpg?imageView&quality=89','http://p1.music.126.net/EZCbqP87wGuZ5XcECFRqxg==/109951165477895371.jpg?imageView&quality=89','http://p1.music.126.net/H6sKYEA8-xhhBb8yRkcioA==/109951165477267723.jpg?imageView&quality=89','https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1789379040,3595596079&fm=26&gp=0.jpg'],//图片路径数组imglistmodalisshow:false,//弹出显示crtIndex:0//点击图片下标}},components:{imglist},methods:{imgClick(index){this.imglistmodalisshow = true;this.crtIndex = index;},closeMolde(){this.imglistmodalisshow = false;}}}
</script><style scoped="scoped">.img_box{display: flex;flex-wrap: wrap;margin: .3rem .25rem;}.img_box>div{width: 3rem;height: 3rem;padding: 2px;overflow: hidden;}.img_box>div img{display: block;height: 100%;}
</style>

3.代码实现

<template><div class="ui-shade imglistshade" @click.self="close"><swiper :options="swiperOption"><swiper-slide v-for="item in imglist" :key="item.id"><img :src="item" /></swiper-slide><div class="swiper-pagination" slot="pagination"></div></swiper></div>
</template><script>export default {data() {return {swiperOption: {pagination: '.swiper-pagination',speed: 500},}},props:{imglist:{type:Array,required:true},index:{type:Number,default:3}},created() {this.swiperOption.initialSlide = this.index;},methods: {close(){this.$emit("closeMolde",false)}}}
</script><style>.imglistshade img{width: 100%;display: block;}.ui-shade{background: rgba(0,0,0,.9);}.imglistshade .swiper-pagination-bullet-active{background: #fff !important;}.imglistshade .swiper-pagination.swiper-pagination-bullets{position: fixed;bottom: .5rem;}.imglistshade .swiper-pagination-bullet{width: 4px;height: 4px;}.imglistshade .swiper-slide{display: flex;align-items: center;}.imglistshade .swiper-container{display: flex;align-items: center;}.imglistshade .swiper-container{overflow: visible;width: 100%;height: 2rem;}</style>

VUE类似微信朋友圈查看图片组件相关推荐

安卓实现微信朋友圈查看图片功能
没有效果图的示例简直就是扯淡本文主要讲查看大图的功能,九宫格图片的话可以看这一篇文章
android仿空间照片查看器,PhotoViewer 一个简单仿微信朋友圈的图片查看器
该图片查看器是模仿微信朋友圈查看图片编写 allprojects { repositories { ... maven { url 'https://jitpack.io' } } } lastRel ...
一个仿微信朋友圈的图片查看框架 - PhotoViewer
PhotoViewer 该图片查看器是模仿微信朋友圈查看图片编写 allprojects {repositories {...maven { url 'https://jitpack.io' }}}复 ...
Android简易图片管理器,一个简单仿微信朋友圈的图片查看器 PhotoViewer
PhotoViewer 该图片查看器是模仿微信朋友圈查看图片编写 allprojects { repositories { ... maven { url 'https://jitpack.io' } ...
一个仿微信朋友圈的图片查看器，使用超级简单！
PhotoViewer 项目地址:wanglu1209/PhotoViewer 简介:一个仿微信朋友圈的图片查看器,使用超级简单! 更多:作者提 Bug 标签: 该图片查看器是模 ...
Android 实现仿微信朋友圈九宫格图片+NineGridView+ImageWatcher(图片查看:1.预览，2.拖动，3.放大，4.左右滑动，5.长按保存到手机)的功能
一.测试实现: 二.添加依赖包: implementation 'androidx.appcompat:appcompat:1.1.0'implementation 'androidx.recycl ...
用MySQL实现类似微信朋友圈的屏蔽功能
设计一个类似微信朋友圈的屏蔽功能的数据库需要考虑以下几个方面: 1. 用户信息表首先需要设计一个用户信息表,用于存储每个用户的基本信息,例如用户ID.用户名.头像等. 2. 好友关系表接下来需要设 ...
Android 仿微信朋友圈添加图片
github地址(欢迎下载Demo) https://github.com/zhouxu88/WXCircleAddPic 老习惯,先上图,着急用的朋友,直接带走Demo,先拿来用吧,毕竟老板催的紧, ...
mfc让图片与按钮一起_微信朋友圈发图片还能添加语音，简单两步就能搞定！今天学到了...
大家好,我是分享科技小达人~ 今天跟大家探讨的问题是:[微信朋友圈发图片添加语音的方法]. 日常生活中,我们都喜欢发朋友圈,今天就来教你如何在微信朋友圈,发送带语音的图片,方法非常简单,一起来学习一下 ...

VUE类似微信朋友圈查看图片组件

1.效果展示

2.使用方法

3.代码实现

VUE类似微信朋友圈查看图片组件相关推荐

最新文章

热门文章