uni-app实现小程序与H5图片轮播预览及双指缩放、双击放大、单击还原、滑动切换功能

在现今的数字化商业领域，商品详情页的用户体验显得尤为关键。诸如头部轮播图的点击预览、多种手势操作等看似简单的功能，背后实则潜藏着不少开发难题。这就像是一场充满未知风险的探险，激发着我们深入挖掘其中的秘密。

功能要求概述

商品详情页的头部轮播图在功能上要求丰富多样。微信小程序和H5平台都需支持点击轮播图查看大图。在预览页面，用户能够使用双指进行缩放和移动图片，双击图片放大，单点恢复，左右滑动切换图片。这些操作对改善用户查看商品图片的体验至关重要。比如在淘宝的详情页中，用户就能体验到这种便捷的操作。对于家中用户在商品繁多的电商平台上通过手机浏览商品详情页时，这些功能显得特别实用。

开发者面临的一大难题是在短短1.5天内，要在两个不同平台上完成这些功能。这过程如同在极短的时间内搭建一座复杂的桥梁，既是对技术的严峻考验，也是对应变能力的极大挑战。

    
      
        
          
            
          
         
      
    
    
 1" class="product-align-single">
      

        

      
    
  

最初探索

export default {
  name: 'ImgPreview',
  props: {
    // 显示与隐藏
    value: {
      type: Boolean,
      value: false
    },
    imgList: {
      type: Array,
      default() {
        return []
      }
    },
    initIndex: {
      type: Number,
      default: 0
    },
    fullscreen: {
      type: Boolean,
      default: true
    },
    award: {
      type: Boolean,
      default: false
    }
  },
  emits:['close','change-slide'],
  data () {
    return {
      modal: this.value,
      current: this.initIndex,
      arrowIcon: 'https://static1.keepcdn.com/infra-cms/2023/3/7/17/35/553246736447566b58312f38753731477849327742542f44796c385238397273617968664475477a4f6c4d3d/48x48_e33efe885c6a5df9403962315de3681bad220cd2.png',
      scale: 1,
      lastTapTime: 0, // 记录上一次点击时间
      clickTimer: null,
      clickDelay: 300,
      disableTouch: false,
      picList: []
    }
  },
  watch: {
    value: {
      handler(val) {
        this.modal = val
        if (val) {
          this.picList = []
          this.imgList.forEach(item => {
            this.picList.push({
              ...item,
              scale: 1
            })
          })
        }
      },
      immediate:true
    },
  },
  methods: {
    handleOnScale(event, index) {
      const { scale, x, y } = event.detail
      let item = this.picList[index]
      item.scale = scale
      this.$set(this.picList, index, item)
      this.$forceUpdate()
    },
    handleTouchmove(event, index) {
      this.disableTouch = true
      let item = this.picList[index]
      if (item.scale !== 1) {
        this.disableTouch = true
      } else {
        this.disableTouch = false
      }
    },
    handleMovableClick(e, index) {
      console.log(e, ' 0) {
        if (curTime - this.lastTapTime  {
        // 单击
        this.handleMovableOnClick(e, index)
      }, this.clickDelay)
    },
    // 图片单击事件(关闭预览)
    handleMovableOnClick(e, index) {
      this.modal = false
      setTimeout(() => {
        this.$emit('close', false)
      }, 100)
    },
    // 图片双击事件
    handleMovableDbClick(e, index) {
      let item = this.picList[index]
      item.scale = item.scale  {
        if (idx !== index) {
          element.scale = 1
        }
      })
      this.$forceUpdate()
    }
  }
}

起初，uni-app确实提供了图片预览、双击放大等丰富功能，底层性能也很出色。然而，它并不支持关闭预览定位索引和定制预览界面中的其他内容。因此，我们不得不寻找其他解决方案。这情形就好像原本以为找到了一把万能钥匙，最终却发现它只能打开部分锁。

.img-preview {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9999;
  opacity: 0;
}
.img-preview-bg {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 1);
  z-index: 1;
}
.movable-area {
  height: 100%;
  width: 100%;
  overflow: hidden;
}
.movable-view {
  height: 100%;
  width: 100%;
}
.img-preview-bg {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 1);
  z-index: 1;
}
.preivew-swiper{
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  box-sizing: border-box;
  // padding-top: calc((100vh - 100vw) * 0.356);
  position: relative;
  z-index: 2;
}
.preivew-swiper-fullscreen {
  padding-top: calc((100vh - 100vw) * 0.5);
}
.swiper-container {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  z-index: 2;
}
.swiper-wrapper,
.swiper-slide {
  width: 100% !important;
  height: 100%;
  display: flex;
  align-items: center;
}
.swiper-slide-single {
  height: 133.34vw;
}
.preview-img {
  width: 100%;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  max-height: 100%;
  max-width: 100%;
}

尝试手写原始内容，尽管在H5平台上勉强可用，但运行时却时常卡顿。而在小程序里，情况更是糟糕至极。开发过程宛如在黑暗中摸索，尽管投入了大量的精力，却未能获得预期的效果，这让人感到非常沮丧。

新的尝试

后来，我考虑使用uni-app的area和view组件来开发可拖动的区域以满足需求。我发现这些组件在H5端的源码中是如何实现的，于是决定根据源码来开发。在开发过程中，我需要设置view组件的属性并触发相应的事件。然而，在开发过程中遇到了一个问题：当图片放大后，移动或滑动时会出现问题。这就像是在前进的道路上突然遇到了一块巨大的石头，阻碍了前进的道路。

事件阻止难题

为了应对这个问题，我们考虑了阻断冒泡的做法。我们尝试了事件修饰符，但发现它无法根据条件进行修改，这条路走不通。接着，通过查找资料，我们发现了一个touch属性，当在view中且scale不等于1的情况下，将touch设置为true可以阻止滑动，这在H5平台上看起来是可行的。然而，在小程序中进行测试时，我们发现这个属性只在初始化时有效，无法进行动态调整。这让人感觉刚刚燃起的希望之火又被无情地浇灭了。

网上方案尝试

我找到了大约21年左右流行的一种解决策略，结果尝试后发现并不适用。比如，有人建议使用伪类来覆盖，虽然在其他情况下挺管用，但在这里因为需要拖动视图，所以这个方法行不通。这感觉就像在海里找针，以为找到了，结果却只是徒增失望。

最后的协商

小程序里切换功能还没到位，界面有点卡，动画效果也不顺畅，没有反弹感。跟产品方商量后，我们决定试试AB测试。开发过程挺坎坷的。那么，各位开发者，你们在开发过程中，有没有遇到过类似的需求变动和难题？欢迎点赞、分享，并在评论区交流心得。