• 日期: 2025-01-26
  • 标签: 常规

{/'template/': /'<div class=///'common-layout///'><el-header class=///'el-header///'>

<el-main class=///'el-main///'><div class=///'infinite-list-wrapper///' style=///'overflow: auto///'><ul v-infinite-scroll=///'load///' class=///'list///' :infinite-scroll-disabled=///'disabled///'><li v-for=///'i in count///' :key=///'i///' class=///'list-item///'><el-col :span=///'24///'><RouterLink to=///'/home/post///'><div class=///'grid-content ep-bg-purple///'><div class=///'post///'><div class=///'post-title///'>150小时教你熟练使用vue.js
<div class=///'post-content///'>
<div class=///'userinfo///'><el-avatar src=///'https://cube.elemecdn.com/9/c2/f0ee8a3c7c9638a54940382568c9dpng.png///' shape=///'square///' :size=///'25///'/>
用户{{ i }}
<div class=///'/'><div class=///'transpond///'>
<div class=///'comment///'><div class=///'like///'><p v-if=///'loading///' v-loading=///'loading///' style=///'height:40px;///'>

<p v-if=///'noMore///' style=///'color:#808080;///'>已经没有啦!

<div class=///'affix///'><el-button type=///'primary///' icon=///'el-icon-edit///' circle/><el-footer class=///'el-footer///'>/', /'script/': /'import { computed, ref } from 'vue'/nimport { RouterLink } from 'vue-router'/n// import axios from 'axios'/n// import { Edit } from '@element-plus/icons-vue'/n/nexport default {/n name: 'MyComponent',/n components: {/n RouterLink/n },/n setup() {/n const count = ref(20)/n const loading = ref(false)/n const noMore = computed(() => count.value >= 10000)/n const disabled = computed(() => loading.value || noMore.value)/n const load = () => {/n loading.value = true/n setTimeout(() => {/n count.value += 9/n loading.value = false/n }, 2000)/n }/n/n return {/n count,/n loading,/n noMore,/n disabled,/n load/n }/n }/n}/', /'style/': /'/* 页头容器 //n.el-header {/n --el-header-padding: 0;/n height: 40px;/n}/n/n/ 内容容器 *//n.el-main {/n --el-main-padding: 0px;/n width: 100%;/n height: 577px;/n}/n/n.el-footer {/n --el-footer-padding: 0px;/n height: 50px;/n}/n/n.grid-content {/n margin: 8px;/n min-height: 60px;/n background-color: #f1f1f1;/n border-radius: 4px;/n color: #000;/n}/n/n.el-divider {/n margin: 0;/n}/n/n.infinite-list-wrapper {/n height: 577px;/n text-align: center;/n}/n/n.infinite-list-wrapper .list {/n padding: 0;/n margin: 0;/n list-style: none;/n}/n/n.affix {/n position: absolute;/n bottom: 80px;/n right: 20px;/n z-index: 1;/n}/n/n.post {/n float: left;/n width: 75%;/n}/n/n.post-title {/n float: left;/n margin: 2.5px;/n width: 100%;/n text-align: left;/n}/n/n.post-content {/n float: left;/n margin-top: 5px;/n width: 100%;/n min-height: 25px;/n border: 1px solid #ddd;/n border-radius: 4px;/n background-color: #fff;/n}/n/n.userinfo {/n float: right;/n margin: 7.5px 0;/n width: 20%;/n}/n/

Vue.js 无限滚动列表实现 - 150小时教你熟练使用vue.js

原文地址: https://www.cveoy.top/t/topic/qfle 著作权归作者所有。请勿转载和采集!

免费AI点我,无需注册和登录