feat: previewImage support zoom (#8274) #12220
Conversation
|
欢迎提交 PR~ Taro 非常感谢您对开源事业做出的贡献！🌷🌷🌷 一般 PR 会在一到两周内进行 review，成功合入后会随下一个版本进行发布。 Review 需要耗费大量时间，所以请遵循以下规范，协助我们提高 review 效率🙏🙏🙏
为了更好地进行沟通，请加入 Taro 开发者微信群： |
1 similar comment
|
欢迎提交 PR~ Taro 非常感谢您对开源事业做出的贡献！🌷🌷🌷 一般 PR 会在一到两周内进行 review，成功合入后会随下一个版本进行发布。 Review 需要耗费大量时间，所以请遵循以下规范，协助我们提高 review 效率🙏🙏🙏
为了更好地进行沟通，请加入 Taro 开发者微信群： |
| @@ -19,6 +19,7 @@ export const previewImage: typeof Taro.previewImage = async (options) => { | |||
| image.style.maxWidth = '100%' | |||
| image.src = url | |||
| const div = document.createElement('div') | |||
| div.classList.add('swiper-zoom-container') | |||
There was a problem hiding this comment.
这个功能在两个包分别完成，有些割裂也不利于维护，或许这一部分应该考虑合并到 swiper 组件内部，如果不便合并可以让 swiper 组件暴露出 swiperjs 相关配置。
There was a problem hiding this comment.
该特性是全屏状态下展示的，full=true 时设置 zoom: true 也是个可行的方案，不过可以的话还是不要将特性分包实现
There was a problem hiding this comment.
swiper组件开启缩放有两个必要条件，一个是创建实例时的zoom参数，另一个是缩放的图片需要包裹在swiper-zoom-container 样式类中（类名可在zoom参数中更改），https://swiperjs.com/swiper-api#zoom ，这部分如果放在taro-swiper-item-core中实现，不知道是否可行，看起来逻辑改动应该会比较多，zoom参数也不能直接暴漏，需要父子组件交互
| @@ -52,6 +53,8 @@ export const previewImage: typeof Taro.previewImage = async (options) => { | |||
| const swiper = document.createElement('taro-swiper-core') | |||
| // @ts-ignore | |||
| swiper.full = true | |||
| // @ts-ignore | |||
| swiper.zoom = true | |||
There was a problem hiding this comment.
新增的参数可以考虑在组件类型中标注，标注后这里应该不需要 @ts-ignore
const swiper: HTMLElement & Omit<SwiperProps, 'style' | 'children'> = document.createElement('taro-swiper-core')There was a problem hiding this comment.
zoom参数在微信小程序的swiper组件中并不存在，是否有必要加入到类型定义中，这里只是想在使用previewImage时开启zoom
There was a problem hiding this comment.
新增一个特殊参数就行，可以是 zoom，也可以是 customSwiperOption 用来传入额外的配置（包括 full、zoom 等等）
zoom参数在微信小程序的swiper组件中并不存在
现在的配置中已经存在一些平台专属配置，加一个也并不影响，另外这样也可以给到开发者更多定制的空间 🤔
baosiqing
force-pushed
the
feat/h5/preview-image
branch
from
ca5946e to
cfc836c
Compare
这个 PR 做了什么? (简要描述所做更改)
为h5中的previewImage api提供缩放支持
这个 PR 是什么类型? (至少选择一个)
这个 PR 涉及以下平台: