上拉加载更多其他方法

本文介绍了三种实现上拉加载更多的CSS布局方法:1) 使用grid布局,通过设置`grid-template-rows`和`calc(100vh - 240px)`高度;2) 设置固定高度和`overflow:scroll`属性;3) 使用flex布局,结合JavaScript监听滚动事件判断是否到达页面底部。同时提醒注意避免因数据数组重置导致滚动位置异常。
摘要由CSDN通过智能技术生成
  • 一屏展示。

(1)还有一种方法,用grid布局

.vx-layout {

  width: 100%;

  height: 100vh;

  display: grid;

  grid-template-rows: 240px auto;(说明vx-layout下面只有两个元素)

  grid-template-columns: 100%;

  background: #f4f4f6;

  .vx-body {

    height: calc(100vh - 240px);

    overflow-y: auto;

    padding: 0 32px 0;

  }

(2)或者只要给这个位置一个高度,overFlow:scroll就可以。

height: calc(100vh - 220px);

    padding: 0 30px 0 30px;

    overflow: scroll;

    margin-top: 30px;

(3)flex布局

  • 大于一屏展示

(1)

.content{
          position: fixed;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
          overflow: auto;
 }

(2)

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值