{"id":1074,"date":"2022-10-15T14:00:00","date_gmt":"2022-10-15T06:00:00","guid":{"rendered":"http:\/\/blog.xrhoujie.com\/?p=1074"},"modified":"2022-10-18T14:21:08","modified_gmt":"2022-10-18T06:21:08","slug":"vue3vant3%e5%ae%9e%e7%8e%b0%e6%87%92%e5%8a%a0%e8%bd%bd%e4%b8%8e%e5%88%86%e9%a1%b5%e6%95%88%e6%9e%9c%e3%80%82","status":"publish","type":"post","link":"http:\/\/blog.xrhoujie.com\/?p=1074","title":{"rendered":"vue3+vant3\u5b9e\u73b0\u61d2\u52a0\u8f7d\u4e0e\u5206\u9875\u6548\u679c\u3002"},"content":{"rendered":"\n<p>\u524d\u6bb5\u65f6\u95f4\u7528vue3.3+vant3\u505a\u4e86\u4e00\u4e2a\u79fb\u52a8\u7aef\u7684 \u5c0f\u7a0b\u5e8f\u9879\u76ee \uff0c\u91cc\u9762\u6d89\u53ca\u5230\u4e86 \u61d2\u52a0\u8f7d\u4e0e\u5206\u9875\u529f\u80fd\uff0c\u4eca\u5929\u603b\u7ed3\u4e00\u4e0b \u3002<\/p>\n\n\n\n<p>\u5148\u770b\u4e0bvant\u5b98\u65b9\u7684\u6587\u6863\uff1ahttps:\/\/vant-contrib.gitee.io\/vant\/v2\/#\/zh-CN\/list<\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img loading=\"lazy\" src=\"http:\/\/blog.xrhoujie.com\/wp-content\/uploads\/2022\/10\/image-1024x932.png\" alt=\"\" class=\"wp-image-1075\" width=\"442\" height=\"402\" srcset=\"http:\/\/blog.xrhoujie.com\/wp-content\/uploads\/2022\/10\/image-1024x932.png 1024w, http:\/\/blog.xrhoujie.com\/wp-content\/uploads\/2022\/10\/image-300x273.png 300w, http:\/\/blog.xrhoujie.com\/wp-content\/uploads\/2022\/10\/image-768x699.png 768w, http:\/\/blog.xrhoujie.com\/wp-content\/uploads\/2022\/10\/image.png 1406w\" sizes=\"(max-width: 442px) 100vw, 442px\" \/><\/figure>\n\n\n\n<p>\u5b98\u7f51\u7ed9\u5230\u4e86\u76f8\u5173\u7684\u4ee3\u7801 \u662flist\u5217\u8868\u6211\u8fd9\u8fb9\u7684\u5b9e\u9645\u6548\u679c\u662f\u8fd9\u6837&#8212;&gt;<\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img loading=\"lazy\" src=\"http:\/\/blog.xrhoujie.com\/wp-content\/uploads\/2022\/10\/image-1-620x1024.png\" alt=\"\" class=\"wp-image-1076\" width=\"154\" height=\"254\" srcset=\"http:\/\/blog.xrhoujie.com\/wp-content\/uploads\/2022\/10\/image-1-620x1024.png 620w, http:\/\/blog.xrhoujie.com\/wp-content\/uploads\/2022\/10\/image-1-182x300.png 182w, http:\/\/blog.xrhoujie.com\/wp-content\/uploads\/2022\/10\/image-1-768x1268.png 768w, http:\/\/blog.xrhoujie.com\/wp-content\/uploads\/2022\/10\/image-1.png 778w\" sizes=\"(max-width: 154px) 100vw, 154px\" \/><\/figure>\n\n\n\n<p>vant-list \u5957 van-cell,\u65e2 \u5217\u8868\u61d2\u52a0\u8f7d \u5185\u90e8\u662f\u5355\u5143\u683c\u7ec4\u4ef6\uff0c\u5e9f\u8bdd\u4e0d\u591a\u8bf4 \u76f4\u63a5\u770b\u4ee3\u7801 \uff1a<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code><strong>index.vue<\/strong>\n\n&lt;van-list v-model=\"loading\" :finished=\"finished\" finished-text=\"\u6682\u65f6\u6ca1\u6709\u66f4\u591a\u4e86\uff5e\" @load=\"listOnLoad\"\n  class=\"finished-text\" v-model:error=\"error\" error-text=\"\u52a0\u8f7d\u5931\u8d25,\u8bf7\u91cd\u8bd5!\">\n     &lt;UploadItem v-for=\"(item,index) in fileItemArr\" :key=\"item.file_id\" :listData=\"item\" :listIndex='index' \/>\n    \n&lt;\/van-list>\n\nexport default {\n  components: {\n    UploadItem: defineAsyncComponent(() =>\n      import(\".\/uploadItem.vue\")\n    ),\n  },\n\ndata() {\n    return {\n      loading: false,\n      finished: false,\n      error: false,\n      fileItemArr: &#91;],\n      patiendValue: '',\n      pageNum: 1, \/\/\u5f53\u524d\u9875\n      per_page: 30, \/\/\u5f53\u524d\u9875\u663e\u793a\u591a\u5c11\u6761\n    }\n  },\n\nmethods: {\nasync listOnLoad() {\n      if (this.latestLoadTime) clearTimeout(this.latestLoadTime) \/\/\u6bcf\u6b21\u8fdb\u6765\u5148\u6e05\u7406\u4e0a\u4e00\u6b21\u7684\u8ba1\u65f6\n      this.latestLoadTime = setTimeout(async () => {\/\/\u8bbe\u7f6e\u8ba1\u65f6\u5668\u5f02\u6b65\u83b7\u53d6\n        try { \/\/\u5982\u679c\u6ca1\u5f02\u5e38\n          let res = await getXcxFileList({ page: this.pageNum, limit: this.per_page, relation_id: this.patiendValue }); \/\/\u8bf7\u6c42\u540e\u7aef\u63a5\u53e3 \n         \/\/ if (this.pageNum === 1) { \/\/\u5982\u679c\u662f\u7b2c\u4e00\u9875\u628a\u6587\u4ef6\u5939\u5c55\u793a\n           \/\/ this.fileDirArr = res.folder.data\n            \/\/this.fileItemArr = &#91;];\n          \/\/}\n          const results = res.file.data \/\/ \u83b7\u53d6\u63a5\u53e3\u7684\u6570\u636e \n          this.fileItemArr.push(...results) \/\/\u52a8\u6001\u6dfb\u52a0\u5230\u6570\u7ec4\u91cc\n          \/\/ 3\u5c06\u672c\u6b21\u52a0\u8f7d\u7684loading\u5173\u95ed\n          this.loading = false\n          \/\/ 4\u5224\u65ad\u662f\u5426\u8fd8\u6709\u6570\u636e\n          if (results.length) {\n            \/\/ \u6709\uff0c\u5219\u66f4\u65b0\u83b7\u53d6\u4e0b\u4e00\u4e2a\u6570\u636e\u7684\u9875\u7801\n            this.pageNum++\n          } else {\n            \/\/ \u6ca1\u6709\uff0c\u5219\u5c06\u52a0\u8f7d\u72b6\u6001finished\u8bbe\u7f6e\u4e3a\u7ed3\u675f\n            this.finished = true\n          }\n        } catch (err) {\n          this.error = true\n          this.loading = false\n        }\n      }, 100)\n    },\n}\n\n<strong>uploadItem.vue<\/strong>\n\n&lt;template>\n  &lt;van-cell center :title=\"listData.file_memo\" :value=\"createTime\" :label=\"userLabel\" :icon=\"headImage\"\n    class=\"cell-content\" @click=\"viewImgFun(listData,listIndex)\" \/>\n&lt;\/template>\n&lt;script>\nimport { Cell, List, ImagePreview } from 'vant';\nexport default {\n  props: &#91;'listData', 'listIndex'],\n  components: {\n    &#91;Cell.name]: Cell,\n    &#91;List.name]: List,\n    &#91;ImagePreview.name]: ImagePreview,\n  },\n  data() {\n    return {\n      createTime: '',\n      userLabel: '',\n      headImage: '',\n    };\n  },\n}\n<\/code><\/pre>\n\n\n\n<p>\u6700\u540e\u6765\u770b\u4e00\u4e0b\u6548\u679c :<\/p>\n\n\n\n<figure class=\"wp-block-video\"><video controls muted src=\"http:\/\/blog.xrhoujie.com\/wp-content\/uploads\/2022\/10\/1.mp4\"><\/video><\/figure>\n","protected":false},"excerpt":{"rendered":"<p>\u524d\u6bb5\u65f6\u95f4\u7528vue3.3+vant3\u505a\u4e86\u4e00\u4e2a\u79fb\u52a8\u7aef\u7684 \u5c0f\u7a0b\u5e8f\u9879\u76ee \uff0c\u91cc\u9762\u6d89\u53ca\u5230\u4e86 \u61d2\u52a0\u8f7d\u4e0e\u5206\u9875\u529f\u80fd\uff0c\u4eca\u5929\u603b\u7ed3\u4e00\u4e0b [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[41],"tags":[38],"_links":{"self":[{"href":"http:\/\/blog.xrhoujie.com\/index.php?rest_route=\/wp\/v2\/posts\/1074"}],"collection":[{"href":"http:\/\/blog.xrhoujie.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/blog.xrhoujie.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/blog.xrhoujie.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/blog.xrhoujie.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=1074"}],"version-history":[{"count":3,"href":"http:\/\/blog.xrhoujie.com\/index.php?rest_route=\/wp\/v2\/posts\/1074\/revisions"}],"predecessor-version":[{"id":1080,"href":"http:\/\/blog.xrhoujie.com\/index.php?rest_route=\/wp\/v2\/posts\/1074\/revisions\/1080"}],"wp:attachment":[{"href":"http:\/\/blog.xrhoujie.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1074"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/blog.xrhoujie.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=1074"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/blog.xrhoujie.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=1074"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}