今天客戶提了一個需求,想做一個頁面,頁面中放一張底圖,可以滑動這張底圖,也可以放大顯示這個底圖,形式上類似百度地圖的操作一樣。找了找資料,發現使用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>
二、效果:
效果
注意:
底圖的比例盡可能大于手機的高與寬的比值,這樣滑動的時候不會出現底部顯示不全。