遇到的問題
在完成一個奶茶點(diǎn)餐微信小程序的時候,想實(shí)現(xiàn)點(diǎn)擊左側(cè)分類菜單欄,右側(cè)菜單滾動到相應(yīng)位置時,出現(xiàn)了rpx適配不精準(zhǔn)的問題恋日。只在屏寬375px的機(jī)型中測試時可以實(shí)現(xiàn)滾動到精確的位置,其他屏寬的機(jī)型會出現(xiàn)不精準(zhǔn)的情況嘹狞。使用的是srcoll-view做右側(cè)菜單外包岂膳,改變scrollTop值來實(shí)現(xiàn)滾動到相應(yīng)位置的效果。目前問題已解決磅网。
滾動不精準(zhǔn)的情況
問題解決后的效果圖
問題解決后的相應(yīng)js代碼
解決思路
首先實(shí)現(xiàn)rpx轉(zhuǎn)px谈截,實(shí)現(xiàn)代碼如下
(注:proportion即為rpx/px的值,在屏寬375px的情況下涧偷,該值為2)
解決rpx適配不精準(zhǔn)問題
在適配時簸喂,proportion的值往往取整數(shù),而我們計算時一般會直接使用rpx/proportion的值燎潮,這個值通常都會有小數(shù)部分喻鳄,故會出現(xiàn)滾動不精準(zhǔn)的問題。
因此我們在計算時也需把每個元素高的轉(zhuǎn)換值取整數(shù)确封,且應(yīng)該是向下取整除呵。再累加作為scrollTop的值。