uniapp写小程序时遇到的rpx适配不精准问题

遇到的问题

在完成一个奶茶点餐微信小程序的时候,想实现点击左侧分类菜单栏,右侧菜单滚动到相应位置时,出现了rpx适配不精准的问题。只在屏宽375px的机型中测试时可以实现滚动到精确的位置,其他屏宽的机型会出现不精准的情况。使用的是srcoll-view做右侧菜单外包,改变scrollTop值来实现滚动到相应位置的效果。目前问题已解决。

滚动不精准的情况

问题解决后的效果图

问题解决后的相应js代码

解决思路

首先实现rpx转px,实现代码如下

(注:proportion即为rpx/px的值,在屏宽375px的情况下,该值为2)

解决rpx适配不精准问题

在适配时,proportion的值往往取整数,而我们计算时一般会直接使用rpx/proportion的值,这个值通常都会有小数部分,故会出现滚动不精准的问题。

因此我们在计算时也需把每个元素高的转换值取整数,且应该是向下取整。再累加作为scrollTop的值。

注:尽量不用padding,在适配时,会先分别对height和padding进行取整运算再相加作为该元素可见框大小,也会导致一定的误差。(当然你可以对height和proportion做分别取整)

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容