记录平时在小程序开发中遇到的问题,以及解决思路。

页面滚动吸顶

时间:2019年12月21日

问题:使用 wx.pageScrollTo 在开发者工具中页面可以按预期置顶和向下移动,但是在真机中页面无法移动。

描述:

  1. 页面元素:页面顶部有内容,中间是分类,底部是商品列表。

  2. 操作:滚动商品列表时,分类置顶。滚动商品列表时,执行 wx.pageScrollTo 方法,在开发者工具中可以吸顶,但是真机上无法完成吸顶。

原因:顶部内容+分类+底部商品列表的高度正好是一屏高度(ip6 1334),占满一屏所以无法吸顶。

解决:将底部商品列表的高度设置为一屏高度,通过js获取屏幕高度,动态设置底部商品列表的高度。底部商品的高度+分类+顶部内容超过一屏,可以使页面滚动,执行 wx.pageScrollTo 方法才有效。在开发者工具中有效果应该是开发者工具的bug。

小程序 iOS 兼容底部横线(1)

时间:2019年12月21日

问题:使用 padding-bottom: constant(safe-area-inset-bottom); padding-bottom: env(safe-area-inset-bottom); 页面依然没有被撑起

描述:在需要设置安全距离的地方,添加 class="safePadding" ,结果不起作用。

原因:检查元素发现 padding-bottom 被其他写有 class 的类覆盖了,导致添加的 safePadding 没有起作用。

解决:给需要设置安全距离的 DOM 元素的 class 中添加 padding-bottom 代码,解决样式优先级。在 iOS 中测试正常。

小程序 iOS 兼容底部横线(代码示例)

<view class="container">
  <view class="list"></view>
</view>
.container {
    padding-bottom: env(safe-area-inset-bottom);
}

.list {
	/* 循环列表,业务中底部有 98rpx 的购物车,设置 padding-bottom 避免元素被遮挡 */
    padding-bottom: 98rpx;
	box-sizing: border-box;
}