微信小程序图片按钮在不同机型的自适应问题解决办法

问题描述

当你在微信小程序端添加图片时，总是会遇到不同机型图片位置发生偏差等等机型自适应问题，这里提供一种解决办法

解决方法

在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>