1)1张图片适配,通过动态设置image宽高来实现:先在data中用变量表示小图标初始宽高,并绑定到image组件上;再通过wx.getSystemInfo获取屏幕宽度,那么小图标的宽度=原宽*屏宽/设计图宽,长=原长*屏宽/设计图宽,再用this.setData()修改变量。
<image class="progress-img" src="../../../imgs/transaction/01.png" bindload="imageLoad" style="width:{{imgwidth}}px; height:{{imgheight }}px;"></image>
Page({ data: { screenWidth: 0, imgwidth: 0, imgheight: 0 }, onLoad: function (options) { var _this = this; wx.getSystemInfo({ success: function (res) { _this.setData({ screenWidth: res.windowWidth, }); } }); }, imageLoad: function (e) { var _this = this; var screenW = this.data.screenWidth; var viewWidth = 54 * screenW / 750; var viewHeight = viewWidth; this.setData({ imgwidth: viewWidth, imgheight: viewHeight }) } }
2)3张图片适配:把1倍屏、2倍屏、3倍屏对应的图片分别命名成text1\text2\text3
<image class="img-s text" src="../../images/text{{pixelRatio}}.png"></image>
const device = wx.getSystemInfoSync() const pixelRatio = Math.floor(device.pixelRatio); Page({ data:{ pixelRatio, } })