微信小程序中如何监听元素进入目标元素
Page({onLoad: function(){// 如果目标节点（用选择器 .target-class 指定）进入显示区域以下 100px 时，就会触发回调函数。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 // 相交区域的高度})}
})
上面是相当于视口的，如何相当于目标元素视口：
使用relativeTo。
<view class="container"><view class="page-body"><view class="page-section message"><text wx:if="{{appear}}">小球出现</text><text wx:else>小球消失</text></view><view class="page-section"><scroll-view class="scroll-view" scroll-y><view class="scroll-area" style="{{appear ? 'background: #ccc' : ''}}"><text class="notice">向下滚动让小球出现</text><view class="filling"></view><view class="ball"></view></view></scroll-view></view></view>
</view>
Page({data: {appear: false},onLoad() {this._observer = wx.createIntersectionObserver(this)this._observer.relativeTo('.scroll-view').observe('.ball', (res) => {console.log(res);this.setData({appear: res.intersectionRatio > 0})})},onUnload() {if (this._observer) this._observer.disconnect()}
})小球与目标元素刚一交叉就出现。
继续滑动小球会消失
