Use uniapp to implement image zooming and zooming functions

Use uniapp to realize the image zoom-in and zoom-out function

In mobile application development, image display and operation is a common requirement. This article will introduce how to use uniapp to realize the image zoom function.

uniapp is a cross-platform application framework based on Vue.js, which can generate both Android and iOS applications through a set of codes. In uniapp, we can use the uni-image component to display and operate images.

First, create a page in the project to display pictures. In this page, we can use the uni-image component to load and display images. The uni-image component supports specifying the path of the image, and can set the width and height of the image. For example, we can add the following code to the page:

<template>
  <view>
    <uni-image src="/static/image.jpg" width="300px" height="400px" mode="aspectFit"></uni-image>
  </view>
</template>

<script>
export default {
  data() {
    return {}
  },
}
</script>

<style scoped>
.view {
  display: flex;
  justify-content: center;
}
</style>

In the above code, we use the uni-image component to load an image named image.jpg, and set the width to 300px and the height to is 400px. By setting the mode to aspectFit, you can maintain the aspect ratio of the image and display the image within the specified width and height.

Next, we need to implement the zoom in and zoom out function of the image. In uniapp, we can use gesture events to zoom in and out of images.

In the page, we can use the <view> tag to wrap the uni-image component and set a fixed Width Height. Then, we can add @touchstart, @touchmove and @touchend event listeners to the <view> tag to implement gestures operate.

<template>
  <view>
    <view class="container" @touchstart="touchStart" @touchmove="touchMove" @touchend="touchEnd">
      <uni-image ref="imageRef" src="/static/image.jpg" width="300px" height="400px" mode="aspectFit"></uni-image>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      startX: 0,
      startY: 0,
      scale: 1,
    }
  },
  methods: {
    touchStart(event) {
      this.startX = event.touches[0].clientX
      this.startY = event.touches[0].clientY
    },
    touchMove(event) {
      let moveX = event.touches[0].clientX - this.startX
      let moveY = event.touches[0].clientY - this.startY
      this.scale += moveY / 100
      this.startX = event.touches[0].clientX
      this.startY = event.touches[0].clientY
      this.$refs.imageRef.setScale(this.scale, this.scale)
    },
    touchEnd(event) {
      this.scale = 1
      this.$refs.imageRef.setScale(this.scale, this.scale)
    },
  },
}
</script>

<style scoped>
.view {
  display: flex;
  justify-content: center;
}

.container {
  width: 300px;
  height: 400px;
}
</style>