小程序踩坑指北

iOS端border-radius失效

一般我们想设置圆角，都是父元素设置border-radius然后overflow:hidden，然鹅iOS上这个基础属性却并不是支持的很好，需要hack一下。

// 给父元素加上如下属性即可
.father_wrapper {
    border-radius: 50%;
    overflow: hidden;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
}

iOS端滑动特性引起的遮罩失效、白屏

如上图，商品栏是一个横向滚动的scroll-view，父容器position:relation,子容器内的商品状态遮罩(已售罄、已售33%)position:absolute。在iOS端需要滑动到可视区域才会出现，且最后一个元素始终不能出现遮罩。

// 给父元素加上如下属性即可
.father_wrapper {
  will-change: transform;
}

cover-view文字截断问题

这个在Android上出现的更频繁，出现的原因是cover-view自带overflow:hidden属性，如果是固定文字则直接写死cover-view的宽度即可。
如果不是固定的文字，是从接口获取的则需要动态设置宽度。

解决方法1 动态设置宽度

// 封装一下获取宽度的函数
setCoverViewWidth(dom, cb) {
    wx.createSelectorQuery().in(this).select(dom).boundingClientRect((rects) => {
    typeof cb === "function" && cb(rects);
    }).exec()
}

// 调用
this.setCoverViewWidth('#cash-dom', rects => {
    this.setData({
        coverViewWidth: `${Math.ceil(rects.width + 1)}px`
    })
})

解决方法2

给cover-view加上样式white-space: pre-wrap;不过这个有大部分情况下会引起更多问题。

组件内fixed无效的问题

封装了一个模态框组件，遮罩是用的position:fixed;top:0;left:0;right:0;bottom:0实现的，但是遮罩不能全屏展示。
逐级向上查找，去住父级的transform属性即可。

iOS时间格式化问题

ios真机下，日期格式只能是2022/09/21像2022-09-21这种格式无法转时间戳会直接显示NaN