支付宝小程序动画效果适配(微信小程序同)

  • 前景:在做位移等动画效果时,所要求填写的距离参数没有单位,据实测是手机的分辨率,物理像素乘以dpr。导致在不同手机上移动距离不相同,适配很不好
  • 解决:使用小程序的获取系统信息方法my.getSystemInfo获取windowWidth(窗口宽度)和pixelRatio (设备像素比)计算出当前rpx倍数(这里使用的750指的是设计图的尺寸,可以根据设计图的大小进行更改),使用的时候将需要的rpx值(即设计图标注的距离)乘以这个倍数就得到要填的值了
  • 处理代码如下:
my.getSystemInfo({
	success: (res) => {
		console.log(res.windowWidth);   // 窗口宽度
		console.log(res.pixelRatio);   // 设备像素比
		var times = res.windowWidth * res.pixelRatio / (750 * res.pixelRatio);  // 计算得到的当前rpx倍数
		console.log(100 * times);    //任意rpx(例:100rpx) 转换成的值(iphone6手机上值为50)
		console.log(750 * times);    //任意rpx(例:750rpx) 转换成的 值(iphone6手机上值为375)
	}
});
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值