快捷導(dǎo)航

uniapp movable-area應(yīng)用

更新時(shí)間：2023年08月20日 16:23:57 作者：周星星的學(xué)習(xí)筆記

這篇文章主要為大家介紹了uniapp movable-area應(yīng)用示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪

需求

今天客戶提了一個(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)底部顯示不全。

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

您可能感興趣的文章:

相關(guān)文章

JS+Ajax實(shí)現(xiàn)百度智能搜索框
現(xiàn)在遇到這樣的需求，要求輸入一個(gè)a之后會(huì)出現(xiàn)包含a的下拉列表，當(dāng)我們點(diǎn)擊某一個(gè)的時(shí)候，搜索框中就會(huì)出現(xiàn)點(diǎn)擊的值。下面小編給大家分享同js和ajax實(shí)現(xiàn)百度智能搜索框，需要的的朋友參考下實(shí)現(xiàn)代碼
2017-08-08
JavaScript如何將時(shí)間戳轉(zhuǎn)化為年月日時(shí)分秒格式
這篇文章主要給大家介紹了關(guān)于JavaScript如何將時(shí)間戳轉(zhuǎn)化為年月日時(shí)分秒格式的相關(guān)資料,在前端的日常工作當(dāng)中,時(shí)間戳的使用也是不少的,有時(shí)后端返回給我們的數(shù)據(jù)是一個(gè)時(shí)間戳,我們需要轉(zhuǎn)換成年月日,時(shí)分秒的形式展示在頁(yè)面當(dāng)中,需要的朋友可以參考下
2023-11-11
JavaScript實(shí)現(xiàn)動(dòng)態(tài)生成表格
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)動(dòng)態(tài)生成表格，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2020-08-08
簡(jiǎn)單談?wù)凧avaScript寄生式組合繼承
寄生組合式繼承,是集寄生式繼承和組合繼承的有點(diǎn)與一身,主要是通過(guò)借用構(gòu)造函數(shù)來(lái)繼承屬性,通過(guò)原型鏈的混成形式來(lái)繼承方法,這篇文章主要給大家介紹了關(guān)于JavaScript寄生式組合繼承的相關(guān)資料,需要的朋友可以參考下
2021-08-08
uni-app使用微信小程序云函數(shù)的步驟示例
這篇文章主要介紹了uni-app使用微信小程序云函數(shù)的步驟示例，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2020-05-05
微信小程序?qū)崿F(xiàn)手勢(shì)圖案鎖屏功能
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)手勢(shì)圖案鎖屏功能，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2018-01-01
BootStrap Validator使用注意事項(xiàng)(必看篇)
針對(duì)bootstrap2和bootstrap3有不同的版本，在使用bootstrap validator時(shí)需要了解其注意事項(xiàng)，下面小編把我遇到的注意事項(xiàng)分享給大家，供大家參考
2016-09-09
JS判斷是否長(zhǎng)按某一鍵的方法
這篇文章主要介紹了JS判斷是否長(zhǎng)按某一鍵的方法,涉及JavaScript針對(duì)鍵盤按鍵的判斷及響應(yīng)操作技巧,需要的朋友可以參考下
2016-03-03
layui問題之模擬select點(diǎn)擊事件的實(shí)例講解
今天小編就為大家分享一篇layui問題之模擬select點(diǎn)擊事件的實(shí)例講解，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2018-08-08
Ionic實(shí)現(xiàn)頁(yè)面下拉刷新(ion-refresher）功能代碼
這篇文章主要介紹了使用Ionic實(shí)現(xiàn)頁(yè)面下拉刷新(ion-refresher）功能的代碼，感興趣的朋友一起看看吧
2016-06-06