解决 uView Parse 富文本解析器 ready 事件触发时机不准确的问题
判断 ready 的标准是每 350ms 检查一次高度,两次高度不变化就认为加载完毕,然后返回大小,处理的地方在 这里
这个处理方式确实可能在某些情况下不准确,如果 350ms 总高度不变化就会触发,但这个很难权衡,因为要确保一定准确的话可能这个时间间隔要更长或者多次不变化后再触发,这样的话触发的就会很慢,某些情况下会带来问题(比如进入页面后等待图片加载完要跳转到某个锚点,等待时间过长就会影响体验),所以这里如果要求很高的话可能需要自行调整一下
ps:对于这个问题最准确的获取时机应该是所有图片都触发 load 事件的时候,但由于开启懒加载后,一些图片不会立即加载,所以无法判断是否全部加载完毕,以及另外一些原因这个方法不适用,所以只能通过高度变化判断
1export default {
2 data () {
3 return {
4 _timer: null
5 }
6 },
7 method () {
8 /**
9 * @description 获取内容大小和位置
10 * @return {Promise}
11 */
12 getRect (selector) {
13 return new Promise((resolve, reject) => {
14 uni.createSelectorQuery()
15 // #ifndef MP-ALIPAY
16 .in(this)
17 // #endif
18 .select(selector).boundingClientRect().exec(res => res[0] ? resolve(res[0]) : reject(Error('Root label not found')))
19 })
20 },
21
22 watchGoodsDetail () {
23 let times = 0; // 监听次数
24 let maxTimes = 10; // 连续 10 获取高度相同视为加载完毕
25 let wait = 350; // 间隔
26 let height = 0; // 详情高度
27
28 clearInterval(this._timer)
29 this._timer = setInterval(() => {
30 this.getRect('#tab3').then(rect => {
31 // 350ms 总高度无变化就触发 ready 事件
32 if (rect.height === height) {
33 times++
34 if (times >= maxTimes) {
35 clearInterval(this._timer)
36 }
37 } else {
38 times = 0
39 height = rect.height
40 this.onNavTargetChange()
41 }
42 }).catch(() => { })
43 }, wait)
44 }
45 }
46}