移动端左滑滚动加载

多多洛丶

已于 2024-03-20 14:01:41 修改

阅读量380

点赞数 7

文章标签：前端

于 2024-01-30 15:08:55 首次发布

本文链接：https://blog.csdn.net/x_duoduoluo/article/details/135932486

版权

本文详细解释了HTML5中的client、scroll和offset属性在处理元素可见区域、滚动位置及滚动触发事件中的作用，同时展示了Vue-H5、微信小程序和uniapp中scroll-view组件的滚动事件用法。

摘要由CSDN通过智能技术生成

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 });
  },