js滚动条触底加载更多#js懒加载数据#步骤条布局懒加载

11 篇文章 0 订阅
10 篇文章 0 订阅

引言

不浪费大家时间,兄弟们先看效果图,如果是你们想要的就看,不是想要的效果就去下家

在这里插入图片描述
.
.
.
.
这次实现的是步骤条式的懒加载效果,滚动条到底实现触发接口;
说加载前先说下步骤条样式的实现思路,具体代码有点杂,有需要的可以留言dd

步骤条布局:
思路:div不浮动竖排排列,或者用flex布局的纵向轴,第一层的每个div上下紧靠这里不可以用magin-top和button,然后设置个border-left或者border-right样式,这时一条不间断长线就会形成,然后设置圆圈,圆圈的样式可以使用定位,和第一层的div进行定位布局,会形成带圆圈的一条长线。但是此时每个div写上内容的时候发现不会对齐圆圈,这时要将第一层div里面的内容进行margin-top:一个负值,让其移上去一些距离,实现和圆圈对齐。
这时,一个简单的步骤条就实现了哦,要实现左右布局的效果,再去用奇偶选择去设置transform: translateX(xx);
算了,上个代码吧,可能要改,但是希望对你有帮助qaq,这里是vue的哈

布局:这里的f f-d-c等样式是封装的flex样式,后面贴上

<div class="record-one f" v-for="i in 20">
  <div class="f">
    <div class="f f-d-c f-a-c tx">
      <div class="circle"></div>
      <div class="line"></div>
    </div>
    <div class="f text">
      <div></div>
      <div class="f f-a-c">
        <div class="content">访问了 <span style="color: #368fff">资源中心</span></div>
        <div class="time">20220828<span class="mar-left-20">09:09:09</span></div>
      </div>
    </div>
  </div>
</div>

css:less或scss

 .record-one{
    &:nth-child(2n+1) .text{
      transform: translateX(-100% - 2px);
      text-align: right;
      //padding-right: 20px;
      justify-content: space-between;
      //color: red;
    }
    .tx{
      //margin-top: -5px;
    }
    .circle{
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: #FFFFFF;
      border: 2px solid #368FFF;
      flex-shrink: 0;
    }
    .line{
      width: 2px;
      min-height: 100%;
      background-color: #D9DCE2;
    }
    .text{
      width: 442px;
      margin-bottom: 20px;
      >div:last-child{
        margin-top: -17px;
        padding: 10px 10px;
        border-radius: 4px;
        &:hover{
          cursor: pointer;
          background: #D2E6FF;
        }
      }
    }
    .content{
      min-width: 70px;
      margin-left: 8px;
      //margin-top: -7px;
    }
    .time{
      margin-left: 21px;
      //margin-top: -7px;
      color: #333333;
    }
    &:last-child .tx .line{
      display: none;
    }
  }
  

flex封装

.f {
	display: flex;
	/* 设置为flex布局 */
}
.f-a-c {
	align-items: center;
	/* 交叉轴上如何对齐,每个div中心轴对齐 */
}
.f-a-b {
	align-items: baseline;
}
.f-d-c {
	flex-direction: column;
	/* 排列方式,垂直 */
}
.f-w-w {
	flex-wrap: wrap; /*ie浏览器不支持--父元素要加个宽度*/
	/* 换行方式 */
}
.f-j-c {
	justify-content: center;
	/* 居中 */
}
.f-j-b {
	justify-content: space-between;
	/* 两边排列 */
}
.f-j-a {
	justify-content: space-around;
	/* 靠近两边,没有接触到旁边 */
}
.f-j-s {
	justify-content: start;
	/* 靠近左侧 */
}
.f-s-1 {
	flex-shrink: 1;
}
.f-s-0 {
	flex-shrink: 0;
}
.f-1 {
	flex: 1;
}
.mar-top-10 {
	margin-top: 10px;
}
.mar-top-20 {
	margin-top: 20px;
}
.mar-left-10 {
	margin-left: 10px;
}
.mar-left-20 {
	margin-left: 20px;
}

步骤条布局到此结束,有问题的留言dd,
.
.
.
.
.

触底加载

下面说触底加载思路,这里当时调研了,主要有两个简单的方法:
①如果你项目中用了elementUI这里可以去用其中的无限滚动组件InfiniteScroll,当然这里面也有小坑,但是不大,好摸索;
②js计算高度实现,直接上代码吧,代码里有注释

 mounted() {
        this.scrollFunc();
    },
    destroyed() {
        //销毁scroll事件监听
        $(document).unbind("scroll");
    },
    methods:{
        scrollFunc(){
            $(document).scroll(()=>{
                var viewH =$(document).height(),//body文档流的总高度
                    screenHeight=$(window).height(),//窗口屏幕的高度
                    scrollHeight =$(document).scrollTop();//滚动高度
                /*触底加载条件=>[文档流高度-(滚动高度+屏幕高度)< 10px]*/
                if(viewH-(screenHeight+scrollHeight)<2){
                    //进行截流-(这里可以写个正规的截流函数)
                    if(this.lock === true){
                        return ;
                    }
                    console.log('触底加载');
                    this.lock = true;
                    setTimeout(()=>{
                        //模拟数据请求
                        this.times ++;
                        this.lock=false;
                    },2000)
                }
            });
        },
    }

拜拜

  • 2
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
`ag-Grid-Vue` 是一个基于 Vue.js 的 `ag-Grid` 的封装组件,它是 `ag-Grid`(一个功能强大的数据表格和网格组件库)在 Vue 框架中的实现。滚动多(Infinite Scroll or Virtual Scrolling)是 ag-Grid 提供的一种功能,用于在用户滚动到表格部时自动多行,而不是一次性所有数据,从而提高性能和用户体验。 在 ag-Grid-Vue 中实现滚动多的步骤通常包括: 1. 配置列:在 ag-Grid 的列定义中启用 `infiniteScroll` 属性,并设置 `scrollThreshold` 参数,指定当滚动部多少距离时。例如: ```html <ag-grid-vue :columnDefs="columnDefs" :infiniteScroll="true" scrollThreshold="100"></ag-grid-vue> ``` 这里 `100` 表示当滚动条距离部小于100px时开始数据。 2. 数据分页:你需要确保数据源是分页的,可以使用 ag-Grid 的 `gridApi.getRowNode` 方法获取当前可视区域的行号范围,然后从后向前逐页。 3. 事件处理:在 Vue 组件中监听 `onGridReady` 或其他适当的事件,当滚动部时数据的请求,并数据源。示例: ```javascript mounted() { this.gridApi.addEventListener(&#39;scroll&#39;, this.handleScroll); }, methods: { handleScroll(params) { if (params.isEnd && params.isLastRenderedPage) { // 数据 this.loadMoreData(); } }, loadMoreData() { // 假设你有一个接口 `loadNextPage` 用于请求数据 this.loadNextPage().then(() => { // 新行数,告诉 ag-Grid 完成 this.gridApi.sizeColumnsToFit(); }); } } ``` 4. 新视图:数据后,你需要将其添到现有数据的末尾,并调用 `gridApi.sizeColumnsToFit()` 来调整列宽以适应新的内容。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

吴大大逛博客

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值