微信预览图片

xxp54321

已于 2023-07-28 14:20:01 修改

阅读量127

点赞数 1

文章标签：微信前端 reactjs javascript

于 2023-07-28 11:43:33 首次发布

本文链接：https://blog.csdn.net/xxp54321/article/details/131976737

版权

文章讨论了在微信环境中预览图片时遇到的一次性加载所有图片地址带来的后台压力，以及wx.previewImageAPI的局限性。作者采用了Swiper和Movable-view组件来实现滑动加载更多图片的功能，但在实现过程中遇到了图片滑动与外层Swiper翻页交互冲突的问题。通过添加ScrollView和调整catchMove属性，作者部分解决了这个问题，但仍存在右滑翻页的问题。

摘要由CSDN通过智能技术生成

需求：微信预览图片要能滑动加载更多，不然一次性请求全部的图片地址，后台压力挺大。
微信预览图片一般用微信提供的 wx.previewImage 实现，但是这个api相当于是新开个页面单独给你进行加载，一些交互也没法做，像要的需求就无法实现，后来还是使用 swiper 和 movable-view 实现的简陋版预览图片，简单的层级如下（我是用的Taro）：

<Swiper vertical={false} >
  {imgList.map(item => {
    return <SwiperItem key={item}>
      <MovableArea>
        <MovableView
          direction='all'
          scale
        >
          <Image src={item} showMenuByLongpress />
        </MovableView>
      </MovableArea>
    </SwiperItem>
  })}
</Swiper>

大体实现了 wx.previewImage ，不过放大图片之后，左滑右滑图片会带动外层的Swiper进行翻页，由于我是Taro3，滚动冒泡只能通过catchMove阻止，但是我在Swiper和MovableArea中间包一层View，动态改catchMove，会导致页面闪动，图片位置移动。后来我在Swiper和MovableArea中间加了一层ScrollView，发现效果好一些了，右滑还是有问题，但是左滑没有滚动穿透了，也就只能先这么着了。