欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

uniapp movable-area應(yīng)用

 更新時(shí)間：2023年08月20日 16:23:57   作者：周星星的學(xué)習(xí)筆記  
這篇文章主要為大家介紹了uniapp movable-area應(yīng)用示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪

需求

今天客戶提了一個(gè)需求，想做一個(gè)頁面，頁面中放一張底圖，可以滑動(dòng)這張底圖，也可以放大顯示這個(gè)底圖，形式上類似百度地圖的操作一樣。找了找資料，發(fā)現(xiàn)使用movable-area和movable-view配合起來使用能實(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í)候不會出現(xiàn)底部顯示不全。

以上就是uniapp movable-area應(yīng)用的詳細(xì)內(nèi)容，更多關(guān)于uniapp movable-area應(yīng)用的資料請關(guān)注腳本之家其它相關(guān)文章！

相關(guān)文章

  • web性能優(yōu)化之javascript性能調(diào)優(yōu)

    web性能優(yōu)化之javascript性能調(diào)優(yōu)

    本文詳細(xì)介紹Web 開發(fā)中關(guān)于性能方面需要注意的一些小細(xì)節(jié)，從 JavaScript 本身著手，介紹了 JavaScript 中需要避免的一些函數(shù)的使用和編程規(guī)則，比如 eval 的弊端，function scope chain 以及 String 的用法等等
    2012-12-12

    • 最新評論