Comments (9)
看你代码,这里走的就是浏览器的 IntersectionObserver,你这里已经监测到与视窗相交的节点刚好都在视窗内吧。你可以让列表超出视窗,然后滚动一下试试看。
from kbone.
这个页面有7张图片 一屏展示的话 最多显示2张图片 因为每一张图片高度498px,而且img_item高度设置的就是498,按道理一屏绝对显示不了这么多图片,但是已进入页面 就会打印7次 每一次都是大于0
我在H5使用 IntersectionObserver Api是可以实现的 进入页面只加载两个图片 但是判断条件不是这个字段 而是isIntersecting
from kbone.
https://developers.weixin.qq.com/miniprogram/dev/api/wxml/wx.createIntersectionObserver.html
![image](https://private-user-images.githubusercontent.com/7931744/274613185-2f28e898-3623-48c8-8dde-92e778e83801.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjEyNTY5MTYsIm5iZiI6MTcyMTI1NjYxNiwicGF0aCI6Ii83OTMxNzQ0LzI3NDYxMzE4NS0yZjI4ZTg5OC0zNjIzLTQ4YzgtOGRkZS05MmU3NzhlODM4MDEucG5nP1gtQW16LUFsZ29yaXRobT1BV1M0LUhNQUMtU0hBMjU2JlgtQW16LUNyZWRlbnRpYWw9QUtJQVZDT0RZTFNBNTNQUUs0WkElMkYyMDI0MDcxNyUyRnVzLWVhc3QtMSUyRnMzJTJGYXdzNF9yZXF1ZXN0JlgtQW16LURhdGU9MjAyNDA3MTdUMjI1MDE2WiZYLUFtei1FeHBpcmVzPTMwMCZYLUFtei1TaWduYXR1cmU9YTRjYzU5ZTBlZDc4ODg2YWQ2ZTg4OTc4ZGM0YWMyZjhjOGRlMmEwMzEwNDZlODRjMDdkYzBlYThkZTIzNWIxMiZYLUFtei1TaWduZWRIZWFkZXJzPWhvc3QmYWN0b3JfaWQ9MCZrZXlfaWQ9MCZyZXBvX2lkPTAifQ.a3cNV7xFdcS4IZUs8KrbXBERuQKAvQUORKqDa1jtOWo)
同时监听多个图片的话,带上这个参数试试,而且只需要创建一次 intersectionObserver 就行。如果你要一张一张图片来监听,那么用不同的 class 来区分不同图片,这里不带 observeAll 参数的话会走 querySelector 接口,那只会找符合 selector 的第一个节点。
from kbone.
好的 ,感谢!
不带observerAll 的话 一张图片一张图片的监听确实可以实现,但是设置observeAll还是不行的
带observeAll代码如下:
// 无法进入debugger ,控制台就抛出了错误 ,不知道是不是我API使用的不对还是没有获取到这个实例 错误如下:
// [Vue warn]: Error in nextTick: "TypeError: Converting circular structure to JSON
// --> starting at object with constructor 'Object'
// --- property '_renderProxy' closes the circle"
// let _this = this
// this.observer = window.$$createIntersectionObserver(this,{observeAll: true});
// this.$nextTick(()=>{
// _this.observer.relativeToViewport({ bottom: 100 }).observe(".h5-body >>> .img_item", res => {
// debugger
// if (res.intersectionRatio > 0) {
// const lazyLoadImage = res.target;
// lazyLoadImage.src = lazyLoadImage.dataset?.src;
// _this.observer.unobserve(lazyLoadImage);
// }
// })
// });
不带的代码如下:
let _this = this;
this.$nextTick(() => {
_this.list.forEach((item,index) => {
let ob = window.$$createIntersectionObserver();
ob.relativeToViewport({ bottom: 100 }).observe(
.h5-body >>> .img_item${index}
,
res => {
const { intersectionRatio } = res;
console.log(当前第${index+1}张图片,intersectionRatio值为${intersectionRatio}
)
if (intersectionRatio > 0) if (item.url === item.dataUrl) return;
_this.$set(item, "url", item.dataUrl);
_this.observer = ob;
_this.clareOb();
}
);
});
});
from kbone.
在你打 debugger 的地方 console 一下,是没有回调,还是回调不正确?
from kbone.
没有进行回调 执行observer.relativeToViewport().observe()完后 没有进入回调函数 即没有进入if判断
from kbone.
没有进行回调 执行observer.relativeToViewport().observe()完后 没有进入回调函数 即没有进入if判断
那感觉不太合理,能否精简一个 demo 给我调试一下?
from kbone.
没有进行回调 执行observer.relativeToViewport().observe()完后 没有进入回调函数 即没有进入if判断
那感觉不太合理,能否精简一个 demo 给我调试一下?
已经发给你了 那个微信号了 有时间您看下
from kbone.
window.$$createIntersectionObserver(this,{observeAll: true})
改为
window.$$createIntersectionObserver({observeAll: true})
即可。
from kbone.
Related Issues (20)
- npm run build,h5空白 HOT 1
- vue-cli-plugin-kbone 是不是不支持webpack5项目 HOT 2
- kbone页面节点1000左右的时候,小程序就会变卡顿吗,即使没有在setData,滑动都感觉不流畅 HOT 11
- wx-input 组件 触发input 事件的时候,没监听事件返回值,以及不会同步外部value的值。 HOT 2
- 【讨论】新的小程序组件框架 glass-easel HOT 1
- wx-button open-type="agreePrivacyAuthorization" 回调无法触发 HOT 4
- -
- 是否可以支持 Construct 3 引擎? HOT 3
- npm install的时候报错,依赖冲突了 HOT 1
- 'rimraf' 不是内部或外部命令,也不是可运行的程序 HOT 1
- kbone递归方案 HOT 1
- 使用window.$$createIntersectionObserver()页面报错异常错误
- 组件属性对齐:input 组件 auto-focus 即将弃用,需要使用 focus 替代 HOT 1
- img xhr 列表下的img的src在init的时候会把所有的图片都通过xhrget一遍,在图片列表较大的时候很影响 HOT 10
- 请问在vue3项目中使用kbone-ui的mp-navigation-bar组件时,如何绑定bindback事件? HOT 3
- 小程序内嵌视频号视频,无法加载到wx-channel-video组件 HOT 11
- 瓦片地图【image】标签在图片较大时(100k左右)在真机环境不显示 HOT 1
- 请求 Blazor WebAssmebly 支持 HOT 2
- 我想问下后期是否继续更新维护? HOT 3
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from kbone.