vant-swipe自适应图片高度+图片预览
vant-swipe自适应图片高度+图片预览
1.vant-swipe自适应图片高度
当轮播图的图片高度不相同时,如果不设置高度,van-swipe-item则会采取最高的图片的高度作为高度,则其他图片高度低于这个高度,则会底部空白,影响美观
解决办法:利用Swipe Props 的 height(滑块高度) 和change 事件 每次切换图片时,重新获取图片高度,赋值给滑块高度
//获取async mounted(){let res= await this.getImgSize(this.imgs[0])this.height=res.height/(res.width/375)},methods:{// 通过图片的url获取图片尺寸getImgSize (url) {return new Promise((resolve, reject) => {let img = new Image()img.src = urlimg.onload = () => {resolve({width: img.width,height: img.height})}})}//swipe的切换监听事件async onChange(index) {let res= await this.getImgSize(this.imgs[index])// 图片固定宽度100vwthis.height=res.height/(res.width/375)},
}
2.图片预览
使用vant的 ImagePreview函数,需要用到swipe的autoplay,当autoplay=0时,停止播放;当图片进入预览时,关闭自动播放,结束预览时,跳到对应的图片(需要暂时关闭轮播动画,不然会一闪而过),开始自动播放
//预览showImage(i){// 预览关闭轮播图滚动this.autoplay=0ImagePreview({images: this.imgs,//开始的图片位置startPosition: i,overlayStyle:{background: '#000'},//关闭预览图时-该图为轮播图起始图onClose:res=> {//轮播图的方法,跳到对应的图片this.$refs.vantSwiper.swipeTo(res.index,{immediate:true //关闭轮播切换效果})this.autoplay=2000},});},
3.全部代码
<template><div class="swiper"><van-swipe class="my-swipe" :autoplay="autoplay" indicator-color="white" :height="height" duration="1000" ref="vantSwiper" @change="onChange"><van-swipe-item v-for="(item,i) in imgs" :key="i" ><img :src="item" alt="" @click="showImage(i)"></van-swipe-item></van-swipe></div>
</template><script>import { ImagePreview } from 'vant';export default {data(){return{imgs:[require('@/assets/swiper/1.jpg'),require('@/assets/swiper/2.jpg'),require('@/assets/swiper/3.jpg'),require('@/assets/swiper/4.jpg'),require('@/assets/swiper/5.jpg')],autoplay:2000,height:null}},async mounted(){let res= await this.getImgSize(this.imgs[0])this.height=res.height/(res.width/375)},methods:{async onChange(index) {let res= await this.getImgSize(this.imgs[index])// 图片固定宽度100vwthis.height=res.height/(res.width/375)},//预览showImage(i){// 预览关闭轮播图滚动this.autoplay=0ImagePreview({images: this.imgs,//开始的图片位置startPosition: i,overlayStyle:{background: '#000'},//关闭预览图时-该图为轮播图起始图onClose:res=> {//轮播图的方法,跳到对应的图片this.$refs.vantSwiper.swipeTo(res.index,{immediate:true //关闭轮播切换效果})this.autoplay=2000},});},// 获取图片尺寸getImgSize (url) {return new Promise((resolve, reject) => {let img = new Image()img.src = urlimg.onload = () => {resolve({width: img.width,height: img.height})}})}}}
</script><style lang="less" scoped>
.van-swipe-item{img{width: 100%;}
}
.my-swipe{position: relative;font-size: 0;
}
.custom-indicator {position: absolute;right: 5px;bottom: 5px;padding: 2px 5px;font-size: 12px;background: rgba(0, 0, 0, 0.1);
}
</style>
vant-swipe自适应图片高度+图片预览相关推荐
- 搞清Image加载事件(onload)、加载状态(complete)后,实现图片的本地预览,并自适应于父元素内(完成)...
onload与complete介绍 complete只是HTMLImageElement对象的一个属性,可以判断图片加载完成,不管图片是不是有缓存:而onload则是这个Image对象的load事件回 ...
- JavaScript 图片上传预览效果
图片上传预览是一种在图片上传之前对图片进行本地预览的技术. 使用户选择图片后能立即查看图片,而不需上传服务器,提高用户体验. 但随着浏览器安全性的提高,要实现图片上传预览也越来越困难. 不过群众的智慧 ...
- 模拟QQ心情图片上传预览
出于安全性能的考虑,目前js端不支持获取本地图片进行预览,正好在做一款类似于QQ心情的发布框,找了不少jquery插件,没几个能满足需求,因此自己使用SWFuplad来实现这个图片上传预览. 先粘上以 ...
- html 手机qq图片预览,模拟QQ心情图片上传预览示例
出于安全性能的考虑,目前js端不支持获取本地图片进行预览,正好在做一款类似于QQ心情的发布框,找了不少jquery插件,没几个能满足需求,因此自己使用SWFuplad来实现这个图片上传预览. 先粘上以 ...
- Angular6自定义指令实现多图片上传预览
在做移动端开发多时候经常会遇到用户图片上传的需求,有单图片上传预览的需求,也有多图片上传预览的需求.自己刚遇到这个需求的时候有踩到各种个样到坑.经过多番尝试,下面将本人成功的一个案例分享出来(公司对外 ...
- php 图片上传预览(转)
网上找的图片上传预览: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:/ ...
- js实现图片上传预览及进度条
js实现图片上传预览及进度条 原文js实现图片上传预览及进度条 最近在做图片上传的时候,由于产品设计的比较fashion,上网找了比较久还没有现成的,因此自己做了一个,实现的功能如下: 1:去除浏览器 ...
- JAVA实现一个图片上传预览功能
这个小项目主要使用java实现了一个简单的图片上传预览功能,废话不多说,先上实现成果 ^ _ ^
- php 点击选择图片上传,php上传多张图片时,选择图片后即可预览的问题
这几天一直在解决一个问题,上传图片时选择成功后就能预览. 需求:在点击上传图标的时候会在前面的input框中显示出文件名,然后点击后面的查看按钮就可以预览选择的这张图片了,要求不能刷新页面 1.一开始 ...
- java 图片上传 预览 demo_图片上传预览
[实例简介] 实现图片上传预览,可以增加新的空数组,并上传和替换.还有删除功能:提交的时候,还可以判断是否有空的img [实例截图] [核心代码] 613ddc50-96b8-4197-ba2e-1e ...
最新文章
- as3中TextFormat类的使用
- 成功解决The NVIDIA driver on your system is too old (found version 9010). Please update your GPU driver
- 如何提高科研论文录用率?
- wxWidgets:在带有 DC 的面板上绘图
- 如何使用R语言在SAP Analytics Cloud里绘制各种统计图表
- 用POP动画引擎实现弹簧动画(POPSpringAnimation)
- 这才是设计 React 的万金油!
- c语言读取txt第二行数值,c语言读取文件的第二行
- thinkphp 接收小程序json数组
- 推荐5款超实用的Chrome广告拦截插件
- php 跨域提交,php实现跨域提交form表单的方法
- 西数云存储 重置 使用手册_如何重置IE浏览器(以IE8 为例),并添加信任网址...
- 【自动驾驶】KITTI Road Detection Benchmark Devkit_road使用
- 非GeoServer卫星影像及电子地图的瓦片方式发布
- 【数学分析】集合 ① ( 集合概念 | 集合表示 | 常用的数集合 | 集合的表示 )
- 发起AI联盟,天猫精灵CES布局智能家居市场
- 安卓listview默认布局总结
- MySQL表空间简介
- 崔毅东 C++程序设计入门(下) 第9单元:白公曾咏牡丹芳,一种鲜妍独“异常” 笔记
- 书之文化:卢中南米字格单字《300句成语》字帖送给你