前言:因为小程序各种交互限制,为了实现这常用的功能,不怎么用小程序的俺把小程序开发文档看了几遍,挑了感觉可以用上的进行测试,还网上搜了别人做的,网上的基本都是死定的尺寸,死定的数据,死定的页面,适用性比较差,所以,花了一天半时间,终于测通了一条路。
开始的失败之路:getIntersectionObserver,刚看到1.9.3+的版本有这方法的时候,心里一阵高兴,感觉就是js的IntersectionObserver,结果折腾了差不多一天,失败告终。原因有:
1.它只能监听一个选择器(js原生的可监听N个dom,小程序没dom,只有选择器),比如js中的querySelector,并且不能是querySelectorAll。这就只能给image打唯一的id了,一对一呗。理论上感觉是可以了。但是。。。
2.它不能监听组件内的image,也就是选择器选不进去。。。反正俺测试没通过。所以只能用在page下的image,不能用在component的。。。丢了component,小程序就没什么意义了。
故,目前放弃了getIntersectionObserver。等抠抠那帮死人折腾到999.999.999版本再说吧。
getIntersectionObserver是走不通了,image的lazy-load属性在文档上就一句话(太恶心了!),并且只能用在scroll-view内,直接不考虑了,限制多,用途窄,没鬼用!
先上个效果图,图中是组件效果,共7张图。右边是selectAll()的数组(数量)
--------------------- 进入主题 -----------------------------
最后想到了,wx.createSelectorQuery().selectAll(),它可以选择多个节点,主要是,它能选组件内的节点。虽然它是有限制条件的。
限制条件(个人测,不完整)
只能是#id,或.class,不能是标签名,也不能是属性。但id和类名已经够用了,不行我们就加个类名给标签呗。
选组件内节点示例
componentA.wxml文件示范
list.wxml文件示范
选择器
wx.createSelectorQuery().selectAll(".a>>>.loading"); //可选中组件A中的image
如果想连.con也一起选,可这样写
wx.createSelectorQuery().selectAll(".a>>>.loading,.con"); //这跟js的差不多一样。
节点选出来了。接下来是获得节点信息。
获取节点位置信息语法
节点位置信息出来了,接下来得判断是否进入可视区域,也就是屏幕。
获取屏幕信息
因为我们是上拉加载,所以要高度信息就行了。
有了节点位置信息,也有了屏高。作进入可视区判断
可视判断
想触发图片加载,小程序只能改变数据,也就是this.setData(data)。
因为节点跟js交互基本就id和dataset,所以,在这里,我考虑的是用dataset记下数据地址。
记录数据地址
假如 list.js代码如下(部分)
(本思路不支持 list:["a.jpg","b.jpg"]这种字符串记录的方式)
list.wxml为:
其中data-addr记录的是当前图片的数据地址(组件同理,传值就好),同时给记录假设了两个属性:
1._lazyload_complete是否完成,默认肯定是没完成,等图片load后设为true。其还有一作用,就是去掉loading状态,同时也去掉了selectAll(".loading")里的匹配。
2._lazyload是否已经加载,默认是未加载。等进入可视区域就设为true.
进入可视区哉,改变_lozyload值
补完执行位置代码:
改变image.src的显示后,等图片加载完后,去掉loading状态,
小程序的image也只有一个load事件可用,这就绑上事件。
绑上懒加载完成事件
list.js
完整的list.js代码:
最后,由于小程序的Page无prototype属性,故扩展封装时,只能自己另起一工具包,给page赋于lazyload的能力即可。
具体封装也不在这写了,js好点的人都会的。
完整源码迟点有时间再上传
over!
评论 (0 )
最新评论
暂无评论
赶紧努力消灭 0 回复