今天客户提了一个需求，想做一个页面，页面中放一张底图，可以滑动这张底图，也可以放大显示这个底图，形式上类似百度地图的操作一样。找了找资料，发现使用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>
二、效果：
效果
注意：
底图的比例尽可能大于手机的高与宽的比值，这样滑动的时候不会出现底部显示不全。
