devbox
AllinToyou
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

vue原生div做触底加载_vue触底加载

作者：AllinToyou | 2024-06-10 11:41:39

赞

踩

vue触底加载

第一种：

触底加载和图片懒加载的思路一样，屏幕的高度加上滚动的高度快要大于最后一个元素距离顶部的高度的时候就开始加载数据；

（1）clientHeight：屏幕的高度；

（2）scrollTop：滚动的高度；

（3）offsetTop：最后一个元素距离顶部的高度；

if ((clientHeight + scrollTop + 快要到底的高度) >= offsetTop) 获取数据;

以下代码实例：

html代码：

  1. <el-tooltip content="打开搜索框" placement="bottom" effect="light">
  2.     <i class="el-icon-search" @click.stop="openSearch"></i>
  3. </el-tooltip>
  4.  
  5. <!-- 搜索弹框 -->
  6. <div class="searchMask" v-if="searchTemplateShow" @click.stop>
  7.     <div class="searchBox" @click.stop>
  8.         <div class="searchHeader">
  9.             <i class="el-icon-close" @click.stop="searchTemplateShow = false"></i>
  10.             <el-input
  11.                 v-model="searchInfo.title"
  12.                 placeholder="搜索模版"
  13.                 clearable
  14.                 prefix-icon="el-icon-search"
  15.                 @keyup.enter.native="search"
  16.                 @keyup.ctrl.enter.native="openNewLink"
  17.                 style="width: 100%;"
  18.                 class="input-with-select">
  19.                 <el-select v-model="templateType" slot="prepend" placeholder="请选择模版类型" @change="search">
  20.                     <el-option v-for="item in templateTypeData" :key="item.value" :label="item.label" :value="item.value"></el-option>
  21.                 </el-select>
  22.             </el-input>
  23.         </div>
  24.         <div class="emptySearch" v-if="wtf">
  25.             <img src="@/assets/img/emptySearch.png" />
  26.             <div>搜索无结果</div>
  27.         </div>
  28.         <div class="searchCenter" v-else>
  29.             <div class="searchContent" v-loading="templateLoading" :style="`height:${templateLoading ? '452px' : 'auto'};`">
  30.                 <div class="searchContentTitle">选择模版</div>
  31.                 <div class="searchContentBox" ref="searchContentBox" @scroll="scrollBottom">
  32.                     <div class="searchItem" v-for="(item, index) in templateData" :key="item.id" @click.stop="createDoc(item.id)" :ref="`searchItem${index}`">
  33.                         <div class="searchItemIcon">
  34.                             <img src="@/assets/img/templateSearchIcon.png" />
  35.                         </div>
  36.                         <div class="searchItemContent">
  37.                             <div class="searchItemTitle one" v-if="item.title">{{ item.title }}</div>
  38.                             <div class="searchItemDesc" v-if="item.desc">{{ item.desc }}</div>
  39.                         </div>
  40.                     </div>
  41.                 </div>
  42.             </div>
  43.             <div class="searchFooter">
  44.                 <span>{{ total || 0 }}</span>
  45.                 <span>结果</span>
  46.                 <span>支持ENTER搜索、CTRL+ENTER新窗口打开</span>
  47.             </div>
  48.         </div>
  49.     </div>
  50. </div>

js变量代码：

  1. // 搜索模版弹框
  2. searchTemplateShow: false,
  3. // 模版类型 1:热门 2:我的
  4. templateType: 1,
  5. templateTypeData: [{
  6.     label: "热门",
  7.     value: 1
  8. },{
  9.     label: "我的",
  10.     value: 2
  11. }],
  12. // 搜索条件对象
  13. searchInfo: {
  14.     title: ""
  15. },
  16. // 搜索模版loading
  17. templateLoading: false,
  18. // 搜索模版数据
  19. templateData: [],
  20. page: 1,
  21. total: null,
  22. mask: true,
  23. wtf: false

js方法代码：

  1. /**
  2.  * 搜索弹框显示
  3.  */
  4. openSearch() {
  5.     if (!this.userInfo.type) {
  6.         this.showLogin = true;
  7.         return false;
  8.     };
  9.     Object.keys(this.searchInfo).forEach(key => {
  10.         this.searchInfo[key] = "";
  11.     });
  12.     this.searchTemplateShow = true;
  13.     this.search();
  14. },
  15. /**
  16.  * 搜索
  17.  */
  18. search() {
  19.     this.templateLoading = true;
  20.     this.page = 1;
  21.     this.templateData = [];
  22.     this.mask = true;
  23. 				this.wtf = false;
  24.     this.getTemplateData();
  25. },
  26. /**
  27.  * 滚动到下面
  28.  */
  29. scrollBottom() {
  30.     let clientHeight = this.$refs.searchContentBox.clientHeight;
  31.     let scrollTop = this.$refs.searchContentBox.scrollTop;
  32.     let offsetTop = this.$refs[`searchItem${this.templateData.length - 1}`][0].offsetTop;
  33.     if (((clientHeight + scrollTop + 300) >= offsetTop) && this.mask) this.getTemplateData();
  34. },
  35. /**
  36.  * 获取模版数据
  37.  */
  38. getTemplateData: debounce(async function () {
  39.     this.templateLoading = true;
  40.     let params = {
  41.         ...this.searchInfo,
  42.         page: this.page,
  43.         size: 10,
  44.         is_not_template: 1
  45.     }
  46.     let res = await document.getTemplateData(params, this.templateType);
  47.     if (res.code == 200) {
  48.         this.templateLoading = false;
  49. 		res.data.data.forEach(item => {
  50. 			this.templateData.push(item);
  51. 		});
  52.         this.total = res.data.total;
  53. 		this.wtf = this.templateData.length == 0 ? true : false;
  54. 		this.page == res.data.last_page ? this.mask = false : this.page++;
  55.     };
  56. }, 300),
  57. /**
  58.  * 打开新链接搜索
  59.  */
  60. openNewLink() {
  61.     window.open(window.location.href);
  62. },
  63. /**
  64.  * 创建文档
  65.  */
  66. createDoc(id) {
  67.     if (!this.userInfo.type) {
  68.         this.showLogin = true;
  69.         return false;
  70.     };
  71.     this.$parent.createDoc(id);
  72.     this.searchTemplateShow = false;
  73. }

css代码：

  1. .el-icon-search, .el-icon-plus {
  2.     width: 24px;
  3.     display: flex;
  4.     align-items: center;
  5.     justify-content: center;
  6.  
  7.     &:hover {
  8.         background-color: rgba(0,0,0,.04);
  9.         border-radius: 2px;
  10.         cursor: pointer;
  11.     }
  12. }
  13.  
  14. .searchMask {
  15. 	width: 100vw;
  16. 	height: 100vh;
  17. 	background-color: rgba(30, 30, 30, .8);
  18. 	position: fixed;
  19. 	bottom: 0;
  20. 	left: 0;
  21. 	z-index: 11;
  22. 	display: flex;
  23. 	align-items: center;
  24. 	flex-direction: column;
  25. 	justify-content: center;
  26. 	
  27. 	.searchBox {
  28. 	    width: 600px;
  29.         height: auto;
  30.         background: #FFFFFF;
  31.         box-shadow: 0px 6px 28px -3px rgba(165,165,165,0.36);
  32.         border-radius: 10px;
  33.         
  34.         .searchHeader, .searchContentBox, .emptySearch, .searchContent, .searchFooter {
  35.             width: 100%;
  36.             box-sizing: border-box;
  37.         }
  38.         
  39.         .searchHeader {
  40.             height: 117px;
  41.             padding: 60px 28px 13px 28px;
  42.             border-bottom: 1px solid #F5F5F5;
  43.             position: relative;
  44.             
  45.             .el-icon-close {
  46.                 position: absolute;
  47.                 top: 24px;
  48.                 right: 23px;
  49.                 font-size: 18px;
  50.                 color: #111111;
  51.                 cursor: pointer;
  52.             }
  53.             
  54.             /deep/ .el-select .el-input {
  55.                 width: 95px;
  56.             }
  57.             
  58.             /deep/ .input-with-select .el-input-group__prepend {
  59.                 background-color: #fff;
  60.             }
  61.         }
  62.         
  63.         .searchCenter {
  64.             height: auto;
  65.             
  66.             .searchContent {
  67.                 height: auto;
  68.                 
  69.                 .searchContentTitle {
  70.                     width: 100%;
  71.                     box-sizing: border-box;
  72.                     padding: 20px 28px 10px 28px;
  73.                     font-weight: 400;
  74.                     font-size: 15px;
  75.                     color: #999999;
  76.                 }
  77.                 
  78.                 .searchContentBox {
  79.                     width: 100%;
  80.                     height: auto;
  81.                     max-height: 400px;
  82.                     overflow-y: auto;
  83.                     
  84.                     .searchItem {
  85.                         width: 100%;
  86.                         height: auto;
  87.                         box-sizing: border-box;
  88.                         padding: 12px 28px;
  89.                         display: flex;
  90.                         cursor: pointer;
  91.         
  92.                         &:hover {
  93.                             background-color: rgba(51, 77, 102, 0.06);
  94.                         }
  95.                         
  96.                         .searchItemIcon {
  97.                             width: 16px;
  98.                             height: 16px;
  99.                             margin: 2px 12px 0 0;
  100.                             
  101.                             img {
  102.                                 width: 100%;
  103.                                 height: 100%;
  104.                             }
  105.                         }
  106.             
  107.                         .searchItemContent {
  108.                             max-width: 508px;
  109.                             
  110.                             .searchHeader, .searchContent {
  111.                                 max-width: 508px;
  112.                                 font-weight: 400;
  113.                             }
  114.                             
  115.                             .searchItemTitle {
  116.                                 font-size: 15px;
  117.                                 color: #333333;
  118.                                 line-height: 21px;
  119.                             }
  120.                             
  121.                             .searchItemDesc {
  122.                                 font-size: 13px;
  123.                                 color: #999999;
  124.                                 line-height: 18px;
  125.                             }
  126.                         }
  127.                     }
  128.                 }
  129.             }
  130.         
  131.             .searchFooter {
  132.                 height: 40px;
  133.                 padding: 10px 28px;
  134.                 box-shadow: 0 6px 28px -3px rgba(165,165,165,0.36);
  135.                 font-weight: 400;
  136.                 font-size: 14px;
  137.                 color: #999999;
  138.                 line-height: 20px;
  139.                 
  140.                 & > span:first-of-type {
  141.                     color: rgba(0, 0, 0, 0.64);
  142.                     margin-right: 5px;
  143.                 }
  144.                 
  145.                 & > span:last-of-type {
  146.                     color: rgba(0, 0, 0, 0.64);
  147.                     margin-left: 16px;
  148.                 }
  149.             }
  150.         }
  151.         
  152.         .emptySearch {
  153.             height: 295px;
  154.             font-size: 14px;
  155.             color: rgba(0, 0, 0, 0.4);
  156.             display: flex;
  157.             flex-direction: column;
  158.             justify-content: center;
  159.             align-items: center;
  160.             
  161.             img {
  162.                 width: 128px;
  163.                 height: 128px;
  164.                 margin-bottom: 20px;
  165.             }
  166.         }
  167. 	}
  168. }

 第二种：

使用element ui的v-infinite-scroll属性添加触底加载事件：

v-infinite-scroll=触底加载事件

例：

  1. <template>
  2.   <ul class="infinite-list" v-infinite-scroll="load" style="overflow:auto">
  3.     <li v-for="i in count" class="infinite-list-item">{{ i }}</li>
  4.   </ul>
  5. </template>
  6.  
  7. <script>
  8.   export default {
  9.     data () {
  10.       return {
  11.         count: 0
  12.       }
  13.     },
  14.     methods: {
  15.       load () {
  16.         this.count += 2
  17.       }
  18.     }
  19.   }
  20. </script>
声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/AllinToyou/article/detail/698614
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号