vant icon indicating copy to clipboard operation
vant copied to clipboard

[Feature Request] ImagePreview可以在在图片放大的情况下也能切换图片吗

Open zhuyuesen opened this issue 6 years ago • 9 comments

这个功能解决了什么问题

图片预览

描述您想要的解决方案

  1. 想要预览时默认放大图片
  2. 在图片放大的情况下也能切换图片

建议的API是什么样的

参考微信朋友圈的图片预览

zhuyuesen avatar Sep 18 '19 07:09 zhuyuesen

现在的api不就是这样吗?接受一个数组

eliot-ye avatar Sep 19 '19 08:09 eliot-ye

后续会考虑优化手势,跟微信一致

chenjiahan avatar Sep 25 '19 05:09 chenjiahan

pc端,图片预览不能滑动切换(又键长按才能滑动)

cwandev avatar Dec 26 '19 05:12 cwandev

我们就遇到一个需求,一种内嵌在APP里面的网页,可以分享到第三方社交平台,如果这时候接收人使用pc登录的社交平台,如qq或者微信,那么打开链接就会是在浏览器打开;事实证明,这种情况的占比还比较多,我们的方案是做一种pc端的版心设置,也能像在移动端使用;但是在pc端,vant的组件里,就发现imagePreview不好用,建议优化下

cwandev avatar Dec 26 '19 05:12 cwandev

@git-wangchao 桌面端使用:https://youzan.github.io/vant/#/zh-CN/quickstart#zai-zhuo-mian-duan-shi-yong

chenjiahan avatar Dec 26 '19 08:12 chenjiahan

@git-wangchao 桌面端使用:https://youzan.github.io/vant/#/zh-CN/quickstart#zai-zhuo-mian-duan-shi-yong

谢谢您的回复,

我们用了这个方案,引入了@vant/touch-emulator,但是在PC端,使用ImagePreview,鼠标不能滑动切换图片。(鼠标右键长按是可以,但左边的长按不行)。看了官方demo的pc预览,没有这个问题

接着,我看了官方的demo,其中有一句css语句不起眼的在下面,一看是基于webkit内核做的兼容处理,果然放置到自己的代码下,问题解决了;如果当时试了其它内核,问题解决的速会更快,

.van-image-preview { img { -webkit-user-drag: none; } }

cwandev avatar Jan 12 '20 05:01 cwandev

嗯,这个 CSS 是为了禁用桌面端浏览器的图片拖拽效果,后续会直接加到组件的样式里

chenjiahan avatar Jan 12 '20 08:01 chenjiahan

借这 issue 咨询下,目前 imagePreview 针对很长的图片,比如手机滚动截图的 case ,处理不是很好,一边需要 1:1 展示,用户和浏览网页一样滚动看,但目前会按照屏幕缩小

lndj avatar Mar 09 '20 01:03 lndj

借这 issue 咨询下,目前 imagePreview 针对很长的图片,比如手机滚动截图的 case ,处理不是很好,一边需要 1:1 展示,用户和浏览网页一样滚动看,但目前会按照屏幕缩小

同样需要此功能

DickyNet avatar Mar 03 '21 02:03 DickyNet