在线观看不卡亚洲电影_亚洲妓女99综合网_91青青青亚洲娱乐在线观看_日韩无码高清综合久久

鍍金池/ 問答/HTML/ 微信小程序movable-view

微信小程序movable-view

使movable-view中的圖片固定大小

需要建一個(gè)類似地圖的效果,找到了小程序這個(gè)組件。

地圖由一張圖片作為背景,在實(shí)現(xiàn)放大縮小地圖的過程中,發(fā)現(xiàn)自己寫的用來定位的標(biāo)注,會(huì)隨著圖片放大縮小而同步變化。

但是希望它始終是統(tǒng)一大小,不然在手機(jī)上使用影響體驗(yàn)。

代碼結(jié)構(gòu)

<movable-area style="top:100rpx;height: 100%; width: 750rpx; overflow:hidden">
  <movable-view class='map' scale-min="0.5" scale-max="3" scale-value="1" direction="all" bindchange="onChange" bindscale="onScale" x="{{x}}" y="{{y}}" >
  <!--地圖背景圖片-->
    <image class='movable-img' src='{{mapUrl}}' >
      <!-- 標(biāo)注 -->
       <view style='top:{{bubbleTop}}; left:{{bubbleLeft}}; position: absolute;' data-scale="{{dataScale}}">
        <!-- 標(biāo)注圖片 -->
            <image style="width: {{imgwidth}}; height: {{imgheight}}" src='../images/qie.jpg' />
        </view>
      </view> 
    </image>
  </movable-view>
</movable-area>

自己想到的解決辦法

通過提供的api可以獲取到scale的值,也就是當(dāng)前的放大縮小倍數(shù)。用這個(gè)倍數(shù)去給標(biāo)注圖片做放大縮小的換算。但是發(fā)現(xiàn)并不能改變標(biāo)注的大小。

問題大概就是上面這個(gè)樣子,希望有人能給出理想的解決方案。

回答
編輯回答
忠妾

今天試了一下,css3的zoom就能解決這個(gè)問題。

2017年12月15日 06:59