{"id":8971,"date":"2022-09-06T11:38:59","date_gmt":"2022-09-06T03:38:59","guid":{"rendered":"https:\/\/sdeno.com\/?p=8971"},"modified":"2022-09-06T11:46:38","modified_gmt":"2022-09-06T03:46:38","slug":"element-ui-v-infinite-scroll%e5%88%9d%e5%a7%8b%e5%8c%96%e5%8a%a0%e8%bd%bd%e6%89%80%e6%9c%89%e6%95%b0%e6%8d%ae%e9%97%ae%e9%a2%98","status":"publish","type":"post","link":"https:\/\/sdeno.com\/?p=8971","title":{"rendered":"element ui v-infinite-scroll\u521d\u59cb\u5316\u52a0\u8f7d\u6240\u6709\u6570\u636e\u95ee\u9898"},"content":{"rendered":"

https:\/\/element.eleme.cn\/2.14\/#\/zh-CN\/component\/infiniteScroll<\/a><\/p>\n

\u5b98\u7f51\u63d0\u4f9b\u7684\u6848\u4f8b\u6709\u95ee\u9898\uff0c<\/p>\n

 <\/p>\n

\u5728\u7ec4\u4ef6\u4e2d\u52a0\u5165\u4e86element ui \u65e0\u9650\u6eda\u52a8\u3002<\/p>\n

\u590d\u5236\u5b98\u7f51\u7684\u4ee3\u7801\uff0c\u53d1\u73b0\u4e00\u76f4\u52a0\u8f7d\u3002<\/p>\n

\u539f\u56e0\uff1a<\/p>\n

1.ul\u6807\u7b7e\u7684\u9ad8\u5ea6\u672a\u8bbe\u5b9a\u3002\u9700\u8bbe\u7f6e\u3002<\/p>\n

2.\u672a\u8bbe\u7f6e\u8ddd\u79bb\u591a\u5c11\u50cf\u7d20\u52a0\u8f7d\u5728ul\u6807\u7b7e\u4e2d\u52a0\u5165 infinite-scroll-distance=”10″ \/\/\u8ddd\u79bb10px\u52a0\u8f7d\u3002<\/p>\n

 <\/p>\n

<div class=\"infinite-list-wrapper\"  style=\"overflow:auto;background: red;height: 5rem\">\r\n\r\n          <div v-infinite-scroll=\"load\" infinite-scroll-disabled=\"disabled\" infinite-scroll-distance=\"10\">\r\n              <div v-for=\"i in count\" class=\"box goto\">\r\n                  <div class=\"inner\">\r\n                      <div class=\"titstatus\" style=\"\">\r\n                          <span>xxxxxxxxx<\/span>\r\n                          <span>\u672a\u4f7f\u7528|\u5df2\u4f7f\u7528|\u5df2\u53d6\u6d88<\/span>\r\n                      <\/div>\r\n\r\n                      <div class=\"con\" style=\"position: relative\">\r\n                          <div class=\"title\">\u5f20\u4e09|\u7537|183xxxxxxxx<\/div>\r\n                          <div class=\"title2\">\u5f00\u7968\u5185\u5bb9 \u4e2a\u4eba<\/div>\r\n\r\n                      <\/div>\r\n\r\n                  <\/div>\r\n              <\/div>\r\n          <\/div>\r\n\r\n          <p v-if=\"loading\">\u52a0\u8f7d\u4e2d...<\/p>\r\n          <p v-if=\"noMore\">\u6ca1\u6709\u66f4\u591a\u4e86<\/p>\r\n\r\n<\/div><\/pre>\n
 <\/p>\n
new Vue({\r\n        el:'#app',\r\n        data(){\r\n            return{\r\n                count: 10,\r\n                loading: false\r\n            }\r\n        },\r\n        computed: {\r\n            noMore () {\r\n                return this.count >= 40\r\n            },\r\n            disabled () {\r\n                return this.loading || this.noMore\r\n            }\r\n        },\r\n        mounted(){\r\n            var self = this\r\n            this.getList()\r\n\r\n\r\n        },\r\n        methods:{\r\n            load () {\r\n                this.loading = true\r\n                setTimeout(() => {\r\n                    this.count += 2\r\n                    this.loading = false\r\n                }, 2000)\r\n            },\r\n          \r\n            getList(){\r\n                \/\/ if(!this.formDate.trainStartTime){\r\n                \/\/   delete this.formDate.trainStartTime\r\n                \/\/ }\r\n                \/\/ this.formDate.userId = userId\r\n                \/\/ var datastr={ \"timestamp\": Date.parse(new Date()),\"posts\":this.formDate};\r\n                \/\/ var url = \"\/train\/selectTrainDetailList\";\r\n                \/\/ var result = ajaxPostWithoutToken4(url,datastr);\r\n                \/\/\r\n                \/\/\r\n                \/\/\r\n                \/\/ this.dataList = result.data\r\n            }\r\n        }\r\n    })<\/pre>\n
 <\/p>\n
 <\/p>\n
https:\/\/www.csdn.net\/tags\/MtTaMg4sOTY2NTQ5LWJsb2cO0O0O.html<\/a><\/p>\n
 <\/p>\n
 <\/p>\n
 <\/p>\n
 <\/p>\n
 <\/p>\n","protected":false},"excerpt":{"rendered":"
https:\/\/element.eleme.cn\/2.14\/#\/zh-CN\/component\/infinit […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[16],"tags":[],"class_list":["post-8971","post","type-post","status-publish","format-standard","hentry","category-16"],"_links":{"self":[{"href":"https:\/\/sdeno.com\/index.php?rest_route=\/wp\/v2\/posts\/8971","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sdeno.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/sdeno.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/sdeno.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/sdeno.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=8971"}],"version-history":[{"count":0,"href":"https:\/\/sdeno.com\/index.php?rest_route=\/wp\/v2\/posts\/8971\/revisions"}],"wp:attachment":[{"href":"https:\/\/sdeno.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=8971"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/sdeno.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=8971"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/sdeno.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=8971"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}