ios和android的兼容问题
小可爱天下无敌 2022-10-21
# backgroundAttachment
问题背景
选座页的背景图片不随着内容滚动而更改位置（android可以，ios14.0以上不行，具体没测试）
解决方案
给需要滚动的元素加上
position: 'relative'
设置子元素，给子元素加上 绝对定位并设置样式
# Date 时间字符串
问题背景
在苹果的 Safari 浏览器上 YYYY-MM-DD hh:mm:ss 格式的时间出现的 NaN
解决方案
- 更换格式： 将
YYYY-MM-DD hh:mm:ss更换成YYYY/MM/DD hh:mm:ss的格式
const timeString = '2022-10-20 14:30:00'
const timestamp = new Date(timeString.replace(/\-/g, '/')).getTime()
console.log(timestamp); // 1666247400000
1
2
3
4
5
2
3
4
5
- 使用第三方时间库。如
moment
const timeString = '2022-10-20 14:30:00'
const timestamp = moment(timeString).valueOf()
console.log(timestamp) // 1666247400000
1
2
3
4
5
2
3
4
5
# ios上面的橡皮筋效果
解决方案
查了一些资料，都有一些坑。 以 touchmove 禁用默认时间为例，会导致带 scroll 的元素无法滚动。针对滚动元素使用 event.stopPropagation() 阻止事件冒泡，滚动条的元素是可以滚动了，但滚动的同时依然会触发页面滚动。这就好像元素的滚动和页面的滚动处理都放在了一块，很难通过 event 区分开。
可以参考链接 谈橡皮筋特效的解决方案 (opens new window)