150小时Vue.js学习指南：从入门到精通

<p>&quot;<template>\n  <v-app>\n    <v-header>\n      <Header />\n    </v-header>\n    <v-main>\n      &lt;v-scroll-view class=&quot;infinite-list-wrapper&quot; style=&quot;height: 577px;&quot; v-scroll=&quot;onScroll&quot;&gt;\n        &lt;v-row v-for=&quot;i in count&quot; :key=&quot;i&quot; class=&quot;list-item&quot;&gt;\n          &lt;v-col :cols=&quot;24&quot;&gt;\n            <v-card>\n              <v-card-title>\n                150小时教你熟练使用vue.js\n              </v-card-title>\n              <v-card-text>\n              </v-card-text>\n              <v-card-actions>\n                <v-btn icon>\n                  <v-icon>mdi-share-variant</v-icon>\n                </v-btn>\n                <v-btn icon>\n                  <v-icon>mdi-comment-outline</v-icon>\n                </v-btn>\n                <v-btn icon>\n                  <v-icon>mdi-thumb-up-outline</v-icon>\n                </v-btn>\n              </v-card-actions>\n            </v-card>\n          </v-col>\n        </v-row>\n      </v-scroll-view>\n      &lt;v-overlay v-if=&quot;loading&quot;&gt;\n        &lt;v-progress-circular indeterminate color=&quot;primary&quot;&gt;\n        </v-progress-circular>\n        &lt;span class=&quot;loading-text&quot;&gt;加载中...\n        </span>\n      </v-overlay>\n      &lt;div class=&quot;no-more&quot; v-if=&quot;noMore&quot;&gt;\n        &lt;span class=&quot;no-more-text&quot;&gt;已经没有啦！\n        </span>\n      </div>\n      &lt;v-btn v-if=&quot;!disabled&quot; class=&quot;edit-button&quot; fab small color=&quot;primary&quot; @click=&quot;load&quot;&gt;\n        <v-icon>mdi-pencil</v-icon>\n      </v-btn>\n    </v-main>\n    <v-footer>\n      <Footer />\n    </v-footer>\n  </v-app>\n</template>\n\n<script>\nimport VHeader from '../components/Header.vue'\nimport VFooter from '../components/Footer.vue'\nimport { ref, computed } from 'vue'\n\nexport default {\n  components: {\n    VHeader,\n    VFooter\n  },\n  setup() {\n    const count = ref(20)\n    const loading = ref(false)\n    const noMore = computed(() =&gt; count.value &gt;= 10000)\n    const disabled = computed(() =&gt; loading.value || noMore.value)\n    const load = () =&gt; {\n      loading.value = true\n      setTimeout(() =&gt; {\n        count.value += 9\n        loading.value = false\n      }, 2000)\n    }\n\n    const onScroll = () =&gt; {\n      // 处理滚动事件\n    }\n\n    return {\n      count,\n      loading,\n      noMore,\n      disabled,\n      load,\n      onScroll\n    }\n  }\n}\n</script>\n\n<style>\n/* 页头容器 <em>/\n.v-header {\n  height: 40px;\n}\n\n/</em> 内容容器 */\n.v-main {\n  width: 100%;\n  height: 577px;\n}\n\n.v-footer {\n  height: 50px;\n}\n\n.list-item {\n  margin: 0;\n  padding: 0;\n  list-style: none;\n}\n\n.v-overlay {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  background-color: rgba(0, 0, 0, 0.5);\n  z-index: 9999;\n}\n\n.loading-text {\n  color: #808080;\n}\n\n.no-more {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  height: 40px;\n}\n\n.no-more-text {\n  color: #808080;\n}\n\n.edit-button {\n  position: fixed;\n  bottom: 80px;\n  right: 20px;\n}\n\n</style>\n</p>