javascript技巧

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript技巧 > uniapp movable-area应用

uniapp movable-area应用

作者:周星星的学习笔记

这篇文章主要为大家介绍了uniapp movable-area应用示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪

需求

今天客户提了一个需求,想做一个页面,页面中放一张底图,可以滑动这张底图,也可以放大显示这个底图,形式上类似百度地图的操作一样。找了找资料,发现使用movable-areamovable-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>

效果

效果

注意

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

以上就是uniapp movable-area应用的详细内容,更多关于uniapp movable-area应用的资料请关注脚本之家其它相关文章!

您可能感兴趣的文章:
阅读全文