uniapp中movable-area的应用

今天客户提了一个需求，想做一个页面，页面中放一张底图，可以滑动这张底图，也可以放大显示这个底图，形式上类似百度地图的操作一样。找了找资料，发现使用movable-area和movable-view配合起来使用能实现这样的效果。示例代码如下：

一、代码：

<template>
  <view class="my-page-wrap">
    <movable-area class="map-area-wrap" :scale-area="true">
      <movable-view
        class="map-show-wrap"
        :scale="true"
        :out-of-bounds="true"
        :scale-min="1"
        :scale-max="2"
        direction="all"
      >
        <view class="map-image-wrap">
          <image class="map-image" mode="widthFix" :src="mapImageUrl"></image>
        </view>
      </movable-view>
    </movable-area>
  </view>
</template>

<script>
export default {
  data() {
    return {
      //底图图片
      mapImageUrl:
        this.$cnf.proResDomains.image +
        '/1/20102/2023/0404/642bd75e91809qvzs.jpg'
    }
  }
}
</script>

<style lang="scss" scoped>
page {
  width: 100%;
  height: 100%;
  background: #2fc4f2;
}
.my-page-wrap {
  width: 100%;
  height: 100%;
  background: #2fc4f2;
  .map-area-wrap {
    width: 100%;
    height: 100%;
    overflow: hidden;
    .map-show-wrap {
      width: 150%;
      height: 150%;
      .map-image-wrap {
        position: relative;
        width: 100%;
        height: 100%;
        .map-image {
          position: absolute;
          width: 100%;
          height: 100%;
          display: block;
        }
      }
    }
  }
}
</style>

二、效果：

注意：

底图的比例尽可能大于手机的高与宽的比值，这样滑动的时候不会出现底部显示不全。