前端实习day33

今天又是改bug的一天,把无限滚动的功能实现了,弄得比较熟悉了,但是还是有一点bug,明天继续改改,今天最大的收获是按照原型进行开发,不要按照自己的想法去开发,费力还不讨好!!

这段代码是一个 Vue.js 的模板代码,主要用于实现无限滚动加载数据的功能,并在加载数据时显示加载状态。现在我来详细解释其中的属性,并举例说明:
1、class="algorithm-list":给 div 元素添加了一个 CSS 类名为 "algorithm-list",可以通过该类名在样式文件中进行样式定义。

2、:infinite-scroll-disabled="isBottom || loading":这是一个动态属性绑定,用于控制是否禁用无限滚动加载。

3、:infinite-scroll-disabled 是一个 Vue 指令,它的值表达式为 isBottom || loading,即当 isBottom 为真或者 loading 为真时,禁用无限滚动加载。

4、v-infinite-scroll="loadBottom":这是一个自定义指令,用于监听滚动事件并调用相应的方法。v-infinite-scroll 指令的值为 loadBottom,表示在滚动到底部时会执行 loadBottom 方法。

5、element-loading-text="拼命加载中":这是一个自定义属性,用于设置加载过程中显示的文本内容。element-loading-text 属性的值为 "拼命加载中",即加载时显示 "拼命加载中" 文本。

6、element-loading-spinner="el-icon-loading":这是一个自定义属性,用于设置加载过程中显示的图标或图像。element-loading-spinner 属性的值为 "el-icon-loading",表示加载时显示 "el-icon-loading" 图标。

7、element-loading-background="rgba(0, 0, 0, 0.1)":这是一个自定义属性,用于设置加载过程中的背景颜色。element-loading-background 属性的值为 "rgba(0, 0, 0, 0.1)",即加载时背景颜色为透明度为 0.1 的黑色。

8、v-loading="loading && currentPage == 1":这是一个动态指令,用于控制是否显示加载状态。v-loading 指令的值表达式为 loading && currentPage == 1,即当 loading 和 currentPage 都为真时,显示加载状态。

这个可以做为一个写无限加载的模板!

你可能感兴趣的:(前端实习博客记录,前端,vue.js,javascript)