节点布局相交状态 API 可用于监听两个或多个组件节点在布局位置上的相交状态。这一组API常常可以用于推断某些节点是否可以被用户看见、有多大比例可以被用户看见。
节点布局相交状态 API中有一个 wx.createIntersectionObserver(Object this, Object options) Api (支持版本 >= 1.9.3),它的作用是创建并返回一个 IntersectionObserver 对象实例(交叉区域),这个对象实例在小程序的解说如下:
IntersectionObserver 对象,用于推断某些节点是否可以被用户看见、有多大比例可以被用户看见。
方法
IntersectionObserver.relativeTo(string selector, Object margins)
使用选择器指定一个节点,作为参照区域之一。
IntersectionObserver.relativeToViewport(Object margins)
指定页面显示区域作为参照区域之一
IntersectionObserver.observe(string targetSelector, IntersectionObserver.observeCallback callback)
指定目标节点并开始监听相交状态变化情况
IntersectionObserver.disconnect()
停止监听。回调函数将不再触发
这里我们需要用到第二个方法 relativeToViewport :
指定页面显示区域作为参照区域之一
下面的示例代码中,如果目标节点(用选择器 .target-class 指定)进入显示区域以下 100px 时,就会触发回调函数。
Page({
onLoad: function(){
wx.createIntersectionObserver().relativeToViewport({bottom: 100}).observe('.target-class', (res) => {
res.intersectionRatio // 相交区域占目标节点的布局区域的比例
res.intersectionRect // 相交区域
res.intersectionRect.left // 相交区域的左边界坐标
res.intersectionRect.top // 相交区域的上边界坐标
res.intersectionRect.width // 相交区域的宽度
res.intersectionRect.height // 相交区域的高度
})
}
})
由此我们可以设置图片进入可见界面某一区域时的监听回调事件,具体代码如下(这里使用了从csdn获取的的图片链接,如有侵权请联系作者删除):
test.js代码:
// pages/test/test.js
Page({
data: {
group: [
{
src: "https://csdnimg.cn/feed/20180914/c67d9521db939fc8beb9a27b046ef1a3.jpg",
show: false,
def: "https://img.alicdn.com/tps/i3/T1QYOyXqRaXXaY1rfd-32-32.gif"
},
{
src: "https://csdnimg.cn/feed/20180914/02e62ee6cb44213c51976d00e4d21ab2.png",
show: false,
def: "https://img.alicdn.com/tps/i3/T1QYOyXqRaXXaY1rfd-32-32.gif"
},
{
src: "https://csdnimg.cn/feed/20180913/8770caaf4959d5be0e6891c9f57efade.jpg",
show: false,
def: "https://img.alicdn.com/tps/i3/T1QYOyXqRaXXaY1rfd-32-32.gif"
},
{
src: "https://csdnimg.cn/feed/20180914/c67d9521db939fc8beb9a27b046ef1a3.jpg",
show: false,
def: "https://img.alicdn.com/tps/i3/T1QYOyXqRaXXaY1rfd-32-32.gif"
},
{
src: "https://csdnimg.cn/feed/20180914/02e62ee6cb44213c51976d00e4d21ab2.png",
show: false,
def: "https://img.alicdn.com/tps/i3/T1QYOyXqRaXXaY1rfd-32-32.gif"
},
{
src: "https://csdnimg.cn/feed/20180913/8770caaf4959d5be0e6891c9f57efade.jpg",
show: false,
def: "https://img.alicdn.com/tps/i3/T1QYOyXqRaXXaY1rfd-32-32.gif"
},
{
src: "https://csdnimg.cn/feed/20180914/c67d9521db939fc8beb9a27b046ef1a3.jpg",
show: false,
def: "https://img.alicdn.com/tps/i3/T1QYOyXqRaXXaY1rfd-32-32.gif"
},
{
src: "https://csdnimg.cn/feed/20180914/02e62ee6cb44213c51976d00e4d21ab2.png",
show: false,
def: "https://img.alicdn.com/tps/i3/T1QYOyXqRaXXaY1rfd-32-32.gif"
},
{
src: "https://csdnimg.cn/feed/20180913/8770caaf4959d5be0e6891c9f57efade.jpg",
show: false,
def: "https://img.alicdn.com/tps/i3/T1QYOyXqRaXXaY1rfd-32-32.gif"
},
{
src: "https://csdnimg.cn/feed/20180914/c67d9521db939fc8beb9a27b046ef1a3.jpg",
show: false,
def: "https://img.alicdn.com/tps/i3/T1QYOyXqRaXXaY1rfd-32-32.gif"
},
{
src: "https://csdnimg.cn/feed/20180914/02e62ee6cb44213c51976d00e4d21ab2.png",
show: false,
def: "https://img.alicdn.com/tps/i3/T1QYOyXqRaXXaY1rfd-32-32.gif"
},
{
src: "https://csdnimg.cn/feed/20180913/8770caaf4959d5be0e6891c9f57efade.jpg",
show: false,
def: "https://img.alicdn.com/tps/i3/T1QYOyXqRaXXaY1rfd-32-32.gif"
},
{
src: "https://csdnimg.cn/feed/20180914/c67d9521db939fc8beb9a27b046ef1a3.jpg",
show: false,
def: "https://img.alicdn.com/tps/i3/T1QYOyXqRaXXaY1rfd-32-32.gif"
},
{
src: "https://csdnimg.cn/feed/20180914/02e62ee6cb44213c51976d00e4d21ab2.png",
show: false,
def: "https://img.alicdn.com/tps/i3/T1QYOyXqRaXXaY1rfd-32-32.gif"
},
{
src: "https://csdnimg.cn/feed/20180913/8770caaf4959d5be0e6891c9f57efade.jpg",
show: false,
def: "https://img.alicdn.com/tps/i3/T1QYOyXqRaXXaY1rfd-32-32.gif"
},
{
src: "https://csdnimg.cn/feed/20180914/c67d9521db939fc8beb9a27b046ef1a3.jpg",
show: false,
def: "https://img.alicdn.com/tps/i3/T1QYOyXqRaXXaY1rfd-32-32.gif"
},
{
src: "https://csdnimg.cn/feed/20180914/02e62ee6cb44213c51976d00e4d21ab2.png",
show: false,
def: "https://img.alicdn.com/tps/i3/T1QYOyXqRaXXaY1rfd-32-32.gif"
},
{
src: "https://csdnimg.cn/feed/20180913/8770caaf4959d5be0e6891c9f57efade.jpg",
show: false,
def: "https://img.alicdn.com/tps/i3/T1QYOyXqRaXXaY1rfd-32-32.gif"
}
]
},
onLoad: function () {
let group = this.data.group // 获取原数据
for (let i in group) {
// 设置监听回调事件,当元素 .loadImg{{i}},进入页面20px内就触发回调事件,设置图片为真正的图片,通过show控制
wx.createIntersectionObserver().relativeToViewport({ bottom: 20 }).observe('.loadImg' + i, (ret) => {
if (ret.intersectionRatio > 0) {
group[i].show = true
}
this.setData({ // 更新数据
group
})
})
}
}
})
test.wxml
test.wxss
/* pages/test/test.wxss */
.loadImg{
width:100vw;
height:46.3vw;
transition: all .2s ease-in-out;
opacity: 0;
}
.loadImg.active{
opacity: 1
}
lazy-load | Boolean | false | 图片懒加载。只针对page与scroll-view下的image有效 |
以上两种方式都对小程序库版本有要求,如果对于低版本的库就不能使用了,这里我们采取另外一种方式,虽然也有库版本要求,但是支持版本 >= 1.4.0,在小程序的page中有个onPageScroll事件,我们可以监听图片进入显示区域来设置回调事件。
test.wxml和test.wxss不变,改变的是test.js,具体如下:
// pages/test/test.js
// 设置函数防抖
const debounce = (fn, delay=300) => {
let ctx,
args;
let timer = null;
const later = function(){
fn.apply(ctx, args)
timer = null;
}
return function(){
ctx = this
args = arguments;
if(timer){
clearTimeout(timer)
timer = null
}
}
timer = setTimeout(later, delay )
}
Page({
data: {
height: '', // 获取当前页面的可视高度
group: [
{
src: "https://csdnimg.cn/feed/20180914/c67d9521db939fc8beb9a27b046ef1a3.jpg",
show: false,
def: "https://img.alicdn.com/tps/i3/T1QYOyXqRaXXaY1rfd-32-32.gif"
},
{
src: "https://csdnimg.cn/feed/20180914/02e62ee6cb44213c51976d00e4d21ab2.png",
show: false,
def: "https://img.alicdn.com/tps/i3/T1QYOyXqRaXXaY1rfd-32-32.gif"
},
{
src: "https://csdnimg.cn/feed/20180913/8770caaf4959d5be0e6891c9f57efade.jpg",
show: false,
def: "https://img.alicdn.com/tps/i3/T1QYOyXqRaXXaY1rfd-32-32.gif"
},
{
src: "https://csdnimg.cn/feed/20180914/c67d9521db939fc8beb9a27b046ef1a3.jpg",
show: false,
def: "https://img.alicdn.com/tps/i3/T1QYOyXqRaXXaY1rfd-32-32.gif"
},
{
src: "https://csdnimg.cn/feed/20180914/02e62ee6cb44213c51976d00e4d21ab2.png",
show: false,
def: "https://img.alicdn.com/tps/i3/T1QYOyXqRaXXaY1rfd-32-32.gif"
},
{
src: "https://csdnimg.cn/feed/20180913/8770caaf4959d5be0e6891c9f57efade.jpg",
show: false,
def: "https://img.alicdn.com/tps/i3/T1QYOyXqRaXXaY1rfd-32-32.gif"
},
{
src: "https://csdnimg.cn/feed/20180914/c67d9521db939fc8beb9a27b046ef1a3.jpg",
show: false,
def: "https://img.alicdn.com/tps/i3/T1QYOyXqRaXXaY1rfd-32-32.gif"
},
{
src: "https://csdnimg.cn/feed/20180914/02e62ee6cb44213c51976d00e4d21ab2.png",
show: false,
def: "https://img.alicdn.com/tps/i3/T1QYOyXqRaXXaY1rfd-32-32.gif"
},
{
src: "https://csdnimg.cn/feed/20180913/8770caaf4959d5be0e6891c9f57efade.jpg",
show: false,
def: "https://img.alicdn.com/tps/i3/T1QYOyXqRaXXaY1rfd-32-32.gif"
},
{
src: "https://csdnimg.cn/feed/20180914/c67d9521db939fc8beb9a27b046ef1a3.jpg",
show: false,
def: "https://img.alicdn.com/tps/i3/T1QYOyXqRaXXaY1rfd-32-32.gif"
},
{
src: "https://csdnimg.cn/feed/20180914/02e62ee6cb44213c51976d00e4d21ab2.png",
show: false,
def: "https://img.alicdn.com/tps/i3/T1QYOyXqRaXXaY1rfd-32-32.gif"
},
{
src: "https://csdnimg.cn/feed/20180913/8770caaf4959d5be0e6891c9f57efade.jpg",
show: false,
def: "https://img.alicdn.com/tps/i3/T1QYOyXqRaXXaY1rfd-32-32.gif"
},
{
src: "https://csdnimg.cn/feed/20180914/c67d9521db939fc8beb9a27b046ef1a3.jpg",
show: false,
def: "https://img.alicdn.com/tps/i3/T1QYOyXqRaXXaY1rfd-32-32.gif"
},
{
src: "https://csdnimg.cn/feed/20180914/02e62ee6cb44213c51976d00e4d21ab2.png",
show: false,
def: "https://img.alicdn.com/tps/i3/T1QYOyXqRaXXaY1rfd-32-32.gif"
},
{
src: "https://csdnimg.cn/feed/20180913/8770caaf4959d5be0e6891c9f57efade.jpg",
show: false,
def: "https://img.alicdn.com/tps/i3/T1QYOyXqRaXXaY1rfd-32-32.gif"
},
{
src: "https://csdnimg.cn/feed/20180914/c67d9521db939fc8beb9a27b046ef1a3.jpg",
show: false,
def: "https://img.alicdn.com/tps/i3/T1QYOyXqRaXXaY1rfd-32-32.gif"
},
{
src: "https://csdnimg.cn/feed/20180914/02e62ee6cb44213c51976d00e4d21ab2.png",
show: false,
def: "https://img.alicdn.com/tps/i3/T1QYOyXqRaXXaY1rfd-32-32.gif"
},
{
src: "https://csdnimg.cn/feed/20180913/8770caaf4959d5be0e6891c9f57efade.jpg",
show: false,
def: "https://img.alicdn.com/tps/i3/T1QYOyXqRaXXaY1rfd-32-32.gif"
}
]
},
onLoad: function () {
wx.getSystemInfo({ // 获取页面可视区域的高度
success: (res) =>{
this.setData({
height: res.screenHeight
})
},
})
this.showImg()
},
onPageScroll:function() { // 调用showImg函数
debounce(this.showImg())
},
showImg() { // 判断高度是否需要加载
// wx.createSelectorQuery()支持的最低库版本是1.4
// selectAll作用是查询元素,boundingClientRect获取元素的相关信息
wx.createSelectorQuery().selectAll('.loadImg').boundingClientRect((ret) => {
const group = this.data.group // 获取原数据
const height = this.data.height // 获取可视区域高度
ret.forEach((item, index) => {
// console.log(item)
// 这里top值获取的是元素相对于可视区域左上角(0,0)的垂直坐标值,超过(0,0),top值为负数
// 一旦元素进入可视区域,top值小于可视区域高度height
if (item.top < height) {
group[index].show = true
}
})
this.setData({
group
})
}).exec()
}
})