前因

在开发微信公众号时，产品经理要求实现图片可以点击放大，并且点击下一张的效果。因为是第一次做公众号的项目，也是第一次在移动端要做图片预览的效果，所以在网上查了相关资料。

实现路程

首先，在以往的项目中，我只用过swipper插件，swipper只能实现图片的轮播，以及图片的排版，并没有预览功能。于是在网上搜索到了解决方法—vue-image-swipe

vue-image-swipe

基于photoswipe实现的vue图片预览组件

安装

1 第一步

npm install vue-image-swipe -D

2 第二步

vue 入口文件引入

 import Vue from 'vue'import VueImageSwipe from 'vue-image-swipe'import 'vue-image-swipe/dist/vue-image-swipe.css'Vue.use(VueImageSwipe)

项目中使用

 <li :key="index"@click="preview(index)"v-for="(l, index) in images"><img :src="l" alt=""></li>

 preview(index) {this.$imagePreview({images: this.images,index: index,})}

methods

只有一个方法this.$imagePreview，并绑定到vue的this上使用

 this.$imagePreview(options = {})

options里有三个参数

参数	默认值	说明
images	[]	图片的url数组
index	0	预览图片的索引值
defaultOpt	{}	配置项

defaultOpt 的配置项请参考photoswipe配置项，注意：不能保证所有配置项都是可用的

列举一些常用的配置

defaultOpt: {fullscreenEl: true,shareEl: false,arrowEl: true,preloaderEl: true,loop: false,bgOpacity: 0.85,showHideOpacity: true,errorMsg: '<div class="pswp__error-msg">图片加载失败</div>',
}

效果

实现图片点击放大预览效果相关推荐

vue图片点击放大预览
1.安装依赖 npm install v-viewer --save 2.全局引入 import Vue from 'vue'; import Viewer from 'v-viewer' impor ...
v-viewer 插件图片点击放大预览的几种使用方法
官网git地址:https://github.com/mirari/v-viewer 最终效果如下:(ps:按钮样式都是可以根据自己需求调整的) 第一种使用方法:支持UMD用法(建议把v-viewer ...
element表格图片放大_图片在表格中,鼠标经过图片上方，图片有放大预览效果（vue+element ）...
element的鼠标移到图片时,放大预览效果.实现思路:element的 el-table + el-popover export default { data () { return { tabDa ...
微信小程序图片放大预览效果的实现，轮播图点击放大预览
近期很多刚学习小程序的同学,想做哪种图片点击放大,然后可以左右滑动预览的效果.我也特意去研究下,发现直接用微信程序自己的api就可以很方便的实现.今天就来教大家如何实现小程序图片点击放大的效果. 老规 ...
Axure RP9——【图片放大预览效果】
图片放大预览效果目录 I.实现效果 II.实现步骤 I.实现效果一般适用于做电商平台图片的放大预览,以此更方便我们看清内容细节. 鼠标停留在商品大图时,会出现一个预览区域,并且右侧会出现预览区域的 ...
微信小程序：previewImage实现图片放大预览效果
提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档文章目录前言前言记录一下做项目的过程中遇到的图片放大预览效果的实现实现的是点击图片可以放大预览,这个效果在京东淘宝都可以看到 ...
html js 图片放大效果,JavaScript实现图片放大预览效果
代码实现: Document .preview-img { position: relative; height: 398px; } .mask { display: none; position: ...
php+jquery实现图片上传预览_和拖动位置值,PHP教程：thinkphp jquery实现图片上传和预览效果...
<PHP教程:thinkphp jquery实现图片上传和预览效果>要点: 本文介绍了PHP教程:thinkphp jquery实现图片上传和预览效果,希望对您有用.如果有疑问,可以联系我 ...
微信小程序删除服务器图片,微信小程序实现图片上传放大预览删除代码
本文实例为大家分享了微信小程序图片上传放大预览的具体代码,供大家参考,具体内容如下 image.js代码: = 9) { this.setData({ lenMore: 1 }); setTimeou ...

实现图片点击放大预览效果

前因

实现路程

vue-image-swipe

安装

项目中使用

methods

效果

实现图片点击放大预览效果相关推荐

最新文章

热门文章