89 lines
2.4 KiB
JavaScript
89 lines
2.4 KiB
JavaScript
|
// components/skeleton.js
|
|||
|
|
import SystemInfo from 'getSystemInfo.js'
|
|||
|
|
Component({
|
|||
|
|
/**
|
|||
|
|
* 组件的属性列表
|
|||
|
|
*/
|
|||
|
|
properties: {
|
|||
|
|
|
|||
|
|
},
|
|||
|
|
/**
|
|||
|
|
* 组件的初始数据
|
|||
|
|
*/
|
|||
|
|
data: {
|
|||
|
|
height: 0, //卡片高度，用来做外部懒加载的占位
|
|||
|
|
showSlot: true, //控制是否显示当前的slot内容
|
|||
|
|
skeletonId: ''
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
created() {
|
|||
|
|
//设置一个走setData的数据池
|
|||
|
|
this.extData = {
|
|||
|
|
listItemContainer: null,
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
detached() {
|
|||
|
|
try {
|
|||
|
|
this.extData.listItemContainer.disconnect()
|
|||
|
|
} catch (error) {
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
this.extData = null
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
ready() {
|
|||
|
|
this.setData({
|
|||
|
|
skeletonId: this.randomString(8) //设置唯一标识
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
wx.nextTick(() => {
|
|||
|
|
// 修改了监听是否显示内容的方法，改为前后showNum屏高度渲染
|
|||
|
|
// 监听进入屏幕的范围relativeToViewport({top: xxx, bottom: xxx})
|
|||
|
|
let info = SystemInfo.getInfo()
|
|||
|
|
let { windowHeight = 667 } = info.source.system
|
|||
|
|
let showNum = 3 //超过屏幕的数量，目前这个设置是上下2屏
|
|||
|
|
try {
|
|||
|
|
this.extData.listItemContainer = this.createIntersectionObserver()
|
|||
|
|
this.extData.listItemContainer.relativeToViewport({ top: showNum * windowHeight, bottom: showNum * windowHeight })
|
|||
|
|
.observe(`#list-item-${this.data.skeletonId}`, (res) => {
|
|||
|
|
let { intersectionRatio } = res
|
|||
|
|
if (intersectionRatio === 0) {
|
|||
|
|
console.log('【卸载】', this.data.skeletonId, '超过预定范围，从页面卸载')
|
|||
|
|
this.setData({
|
|||
|
|
showSlot: false
|
|||
|
|
})
|
|||
|
|
} else {
|
|||
|
|
console.log('【进入】', this.data.skeletonId, '达到预定范围，渲染进页面')
|
|||
|
|
this.setData({
|
|||
|
|
showSlot: true,
|
|||
|
|
height: res.boundingClientRect.height
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
} catch (error) {
|
|||
|
|
console.log(error)
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
},
|
|||
|
|
/**
|
|||
|
|
* 组件的方法列表
|
|||
|
|
*/
|
|||
|
|
methods: {
|
|||
|
|
/**
|
|||
|
|
* 生成随机的字符串
|
|||
|
|
*/
|
|||
|
|
randomString(len) {
|
|||
|
|
len = len || 32;
|
|||
|
|
var $chars = 'abcdefhijkmnprstwxyz2345678'; /****默认去掉了容易混淆的字符oOLl,9gq,Vv,Uu,I1****/
|
|||
|
|
var maxPos = $chars.length;
|
|||
|
|
var pwd = '';
|
|||
|
|
for (var i = 0; i < len; i++) {
|
|||
|
|
pwd += $chars.charAt(Math.floor(Math.random() * maxPos));
|
|||
|
|
}
|
|||
|
|
return pwd;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
})
|