微信小程式圖片按鈕在不同機型的自適應問題解決辦法

• 問題描述
• 解決方法
• js程式碼
• wxml程式碼

問題描述

當你在微信小程式端新增圖片時，總是會遇到不同機型圖片位置發生偏差等等機型自適應問題，這裡提供一種解決辦法

解決方法

在js中運用百分比來計算出圖片位置距離頂部或者底部多少畫素來進行設定，進行資料繫結，並在wxml中使用

js程式碼

//獲取螢幕高寬，並對
pingmu:function(option){
     var that = this;
     wx.getSystemInfo
 
({
       success: function (res) {
         //螢幕高寬
         var windowWidth = res.windowWidth;
         var windowHeight = res.windowHeight;
         console.log('windowHeight: ' + windowHeight);
         
         //圖片離上一元素的高度畫素，這裡用的是百分比來計算，當高度變化時，計算出來的高度畫素距也會發生改變
         var viewTop = windowHeight*0.545
 
;
         var viewSecondTop = windowHeight * 0.026;
         
         console.log('viewTop: ' + viewTop);
         console.log('viewSecondTop: ' + viewSecondTop)

         that.setData({
           viewTop: viewTop,
           viewSecondTop: viewSecondTop
         })
       }
      })
   },

wxml程式碼

<view >
  <view class='image-container'>
      <image class="image1-sty" style='margin-top:{{viewTop}}px' src="../../images/putandrecieve/null.png" catchtap='onRecieve'></image>
      <image class="image2-sty" style='margin-top:{{viewSecondTop}}px' src="../../images/putandrecieve/null.png" catchtap='onRecieve'></image>
  </view>
</view>