client、scroll、offset
client:
属性 | 含义 |
---|---|
clientWidth,clientHeight | 只读属性,表示一个元素的可见区域宽高,以像素计单位;该属性即包括元素的padding,但不包括border,margin以及改元素滚动条的宽高。 |
clientLeft,clientTop | 仅仅表示元素的左边框宽度和上边框宽度。 |
sroll:
属性 | 含义 |
---|---|
scrollTop,scrollLeft | 可读可写属性,表示一个元素在有滚动条的情况下,被卷去的高宽。 |
scrollWidth,scrollHeight | 只读属性,表示一个元素正文全文宽高 |
offset:
属性 | 含义 |
---|---|
offsetWidth,offsetHeight | 只读属性,表示一个元素的布局宽高,等于这个元素的宽高加上padding,border |
offsetLeft,offsetTop | 只读属性,表示当前元素距离上级有定位的元素左边或上边边框的距离,如果上级元素没有定位,则往更上一级寻找,直至body。 |
vue-h5
<div @scroll="loadData($event)">
<div v-for="(item,idx) in week" :key="idx">{{item}}</div>
</div>
loadDays(event) {
if (this.loading) {
return;
}
const el = event.target;
// 元素划过屏幕的宽度 + 元素可见宽度 >= 元素正文宽度,加载数据
if (Math.ceil(el.scrollLeft + el.clientWidth) >= el.scrollWidth) {
this.loading = true;
// get data
this.loading = false;
}
},
// 下滑滚动: el.scrollTop+el.clientHeight >= el.scrollHeigh
微信小程序
微信小程序页面组件中, scroll-view,提供了bindscrolltolower
方法,滚动到底部/右边时触发。
<scroll-view scroll-x bindscrolltolower="loadDays">
<view wx:for="{{items}}" wx:key="index">{{item}}</div>
</scroll-view>
loadDays() {
if (this.data.loading) {
return;
}
this.setData({ loading: true });
// get data
this.setData({ loading: false });
},
uniapps
uniapp也可使用 scroll-view,使用@scrolltolower
方法,滚动到底部/右边时触发。
<scroll-view scroll-x @scrolltolower="loadDays">
<view v-for="(item,idx) in items" :key="idx">{{item}}</div>
</scroll-view>
loadDays() {
if (this.loading) {
return;
}
this.setData({ loading: true });
// get data
this.setData({ loading: false });
},