精通网站建设100全能建站密码,免费咨询造成损害,广宁县住房建设局网站,大气个人网站源码微信小程序如何利用createIntersectionObserver实现图片懒加载 节点布局相交状态 API 可用于监听两个或多个组件节点在布局位置上的相交状态。这一组API常常可以用于推断某些节点是否可以被用户看见、有多大比例可以被用户看见。 节点布局相交状态 API中有一个 wx.createInter…微信小程序如何利用createIntersectionObserver实现图片懒加载 节点布局相交状态 API 可用于监听两个或多个组件节点在布局位置上的相交状态。这一组API常常可以用于推断某些节点是否可以被用户看见、有多大比例可以被用户看见。 节点布局相交状态 API中有一个 wx.createIntersectionObserver(Object this, Objectoptions) Api 支持版本 1.9.3它的作用是创建并返回一个 IntersectionObserver 对象实例(交叉区域)这个对象实例在小程序的解说如下 IntersectionObserver 对象用于推断某些节点是否可以被用户看见、有多大比例可以被用户看见它有relativeTo、relativeToViewport、observe、disconnect等方法 由此我们可以设置图片进入可见界面某一区域时的监听回调事件以此实现图片的懒加载 Page({data: {group: [{src: https://csdnimg.cn/feed/20180914/c67d9521db939fc8beb9a27b046ef1a3.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})})}}})block wx:for{{group}} wx:key1view classloadImg loadImg{{index}} {{item.show? active : }} !-- 通过条件判断确认图片的src --image wx:if{{item.show}} stylewidth:100%;height:100%; src{{item.src}}/imageimage wx:else stylewidth:20%;height:20%;margin:0 auto;margin-top:50%;transform:translateY(-50%); src{{item.def}} modeaspectFit/image/view/block.loadImg{width:100vw;height:46.3vw;transition: all .2s ease-in-out;opacity: 0;}.loadImg.active{opacity: 1}到这里也就结束了希望对您有所帮助。
