今天客戶提了一個(gè)需求，想做一個(gè)頁(yè)面，頁(yè)面中放一張底圖，可以滑動(dòng)這張底圖，也可以放大顯示這個(gè)底圖，形式上類似百度地圖的操作一樣。找了找資料，發(fā)現(xiàn)使用movable-area和movable-view配合起來(lái)使用能實(shí)現(xiàn)這樣的效果。示例代碼如下：

一、代碼：

<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>

二、效果：

效果

注意：

底圖的比例盡可能大于手機(jī)的高與寬的比值，這樣滑動(dòng)的時(shí)候不會(huì)出現(xiàn)底部顯示不全。