{"id":1174,"date":"2023-05-06T18:20:00","date_gmt":"2023-05-06T10:20:00","guid":{"rendered":"http:\/\/blog.xrhoujie.com\/?p=1174"},"modified":"2023-04-20T18:24:22","modified_gmt":"2023-04-20T10:24:22","slug":"uniapp%e4%bd%bf%e7%94%a8%e8%bf%87%e7%a8%8b%e4%b8%ad%e4%b8%80%e4%ba%9b%e8%b8%a9%e5%9d%91","status":"publish","type":"post","link":"http:\/\/blog.xrhoujie.com\/?p=1174","title":{"rendered":"uniapp\u4f7f\u7528\u8fc7\u7a0b\u4e2d\u4e00\u4e9b\u8e29\u5751"},"content":{"rendered":"\n

1.carousel-3d\u8f6e\u64ad\u56fetransfrom \u659c\u5207\u79fb\u52a8\u56fe\u7247\u6a21\u7cca(ios)\u8868\u73b0\u4e3a—transform y\u8f74\u659c\u5207\u8ba1\u7b97\u6d6e\u70b9\u4e0d\u51c6\u786e\uff0c<\/strong><\/p>\n\n\n\n

1-1.<\/strong>\u8bbe\u7f6e\u5076\u6570\u6216\u8c03\u6574\u659c\u5207y\u65b9\u5411\u4e3a0\u3002 <\/p>\n\n\n\n

1-2.<\/strong>\u56fe\u7247css\u8bbe\u7f6e<\/p>\n\n\n\n

img{image-rendering: -moz-crisp-edges; \/* Firefox \/<\/p>\n\n\n\n

image-rendering: -o-crisp-edges; \/ Opera *\/<\/p>\n\n\n\n

image-rendering: -webkit-optimize-contrast; \/*Webkit (non-standard naming)<\/p>\n\n\n\n

image-rendering: crisp-edges; \/-ms-interpolation-m[[ode: nearest-neighbor; \/ IE (non-standard property) *\/}<\/p>\n\n\n\n

2.carousel-3d\u8f6e\u64ad\u56fe\u70b9\u51fb\u540e\u65e0\u6cd5\u8f6e\u64ad<\/strong>(\u6587\u6863\u592a\u5dee\u4e86\u6ca1\u65b9\u6cd5\uff0c\u53ea\u80fd\u770b\u4f8b\u5b50\u8ddf\u539f\u578b\u94fe\u5c5e\u6027\u627e)<\/p>\n\n\n\n

\/\/\u5148\u6682\u505c<\/p>\n\n\n\n

this.carousel.pauseAutoplay()<\/p>\n\n\n\n

\u5728\u5f00\u542f<\/p>\n\n\n\n

setTimeout(() => {<\/p>\n\n\n\n

this.carousel.startAutoplay()}, <\/p>\n\n\n\n

0)<\/p>\n\n\n\n

3.scroll-view \u5207\u6362\u5206\u680f\uff0c\u56de\u5230\u9876\u90e8\u6eda\u52a8\u6761\u4e0d\u91cd\u7f6e\uff0c <\/strong><\/p>\n\n\n\n

\u5207\u6362tab\u65f6\u6267\u884c\uff1a<\/p>\n\n\n\n

this.scrollTop = this.scrollTop === 0 ? 1:0 \/\/\u624b\u52a8\u8bbe\u7f6e\uff0c\u907f\u514d\u6570\u636e\u5237\u65b0\u89c6\u56fe\u672a\u5237\u65b0<\/strong><\/p>\n\n\n\n

4.scroll-ivew\u5217\u8868\u62d6\u79fb\u95ee\u9898(ios)\uff0c\u6dfb\u52a0\u7981\u6b62\u5411\u4e0a\u5192\u6ce1<\/strong><\/p>\n\n\n\n

\u5728scrollView\u6807\u7b7e\u5185\u6dfb\u52a0\u4ee5\u4e0b\u5c5e\u6027:disableBounce=”true” <\/strong><\/p>\n\n\n\n

\/\/\u5f00\u542f\u7981\u6b62\u5f39\u6027\u6eda\u52a8@touchmove.stop <\/strong><\/p>\n\n\n\n

\/\/\u5f00\u542f\u7981\u6b62\u5411\u4e0a\u5192\u6ce1<\/strong><\/p>\n\n\n\n

5.\u6d6e\u52a8\u5f39\u7a97\u6ed1\u52a8 \uff0c\u5e95\u5c42\u4e5f\u8ddf\u7740\u79fb\u52a8\u3002<\/strong><\/p>\n\n\n\n

—-\u8bbe\u7f6e\u5728\u6807\u7b7e\u5185\u6dfb\u52a0\u4ee5\u4e0b\u5c5e\u6027 <\/strong>—-@touchmove.stop.prevent<\/strong><\/a> \u7981\u7528\u79fb\u52a8\u5c42\u4f4d\u79fb<\/strong><\/p>\n\n\n\n

6.\u5e95\u90e8\u5f39\u5c42\u5f39\u5c42\u5f02\u5e38uni-popup\uff0c\u4e0d\u5438\u5e95\u3002<\/strong><\/p>\n\n\n\n

\u4fee\u6539\u6e90\u7801 ,\u5728uni-popup.vue\u6587\u4ef6\u5185 \uff0c<\/p>\n\n\n\n

.uni-popup__wrapper-box { \/* #ifndef APP-NVUE *\/ display: block; <\/p>\n\n\n\n

\/* #endif *\/ position: relative; <\/p>\n\n\n\n

\/* iphonex \u7b49\u5b89\u5168\u533a\u8bbe\u7f6e\uff0c\u5e95\u90e8\u5b89\u5168\u533a\u9002\u914d *\/ \/* #ifndef APP-NVUE *<\/p>\n\n\n\n

\/ \/\/\u6ce8\u91ca\u6b64\u884c padding-bottom: constant(safe-area-inset-bottom); <\/p>\n\n\n\n

\/\/\u6ce8\u91ca\u6b64\u884c padding-bottom: env(safe-area-inset-bottom); \/* #endif *\/ }<\/p>\n\n\n\n

\u6ce8\u91ca\u9884\u7559\u7684\u5438\u5e95\u5b89\u5168\u533a\u4ee3\u7801\uff0c\u5c31\u53ef\u4ee5\u5438\u5e95\u4e86<\/p>\n\n\n\n

7.boder\u7ed8\u5236\u7ebf\u6bb5\uff0c\u6d6e\u70b9\u6570\u5728iphonexs\u4e0a\u5f02\u5e38\u6d88\u5931<\/strong>\u6700\u5c0f\u8bbe\u7f6e1\u50cf\u7d20\uff0c\u907f\u514d\u95ee\u9898\u3002<\/p>\n\n\n\n

8.\u5b50\u7ec4\u4ef6\u6ca1\u6709onshow\u4e0eonload\u65b9\u6cd5\uff0c<\/strong><\/p>\n\n\n\n

\u7236\u7ec4\u4ef6\u903b\u8f91\u5c3d\u53ef\u80fd\u5199\u5230onShow\u5185\uff0conlad\u521d\u59cb\u5316\u53ea\u6267\u884c\u4e00\u6b21\uff0conShow\u662f\u6bcf\u6b21\u8fdb\u6765\u90fd\u4f1a\u6267\u884c\uff0c\u901a\u5e38\u5199\u4e00\u4e9b\u6570\u636e\u521d\u59cb\u5316(\u63a5\u53e3\uff0c\u5237\u65b0\u5185\u5bb9)\u3002<\/p>\n\n\n\n

9.\u9ad8\u5ea6\u584c\u9677\u95ee\u9898\uff0c\u4e0e\u9875\u9762\u9002\u914d1.\u5b50\u5bb9\u5668\u6491\u5f00\u7236\u5bb9\u5668–\u9047\u5230\u9ad8\u5ea6\u584c\u9677\u95ee\u9898\u3002<\/strong><\/p>\n\n\n\n

1-1.<\/strong>\u8bbe\u7f6e\u5143\u7d20\u7684\u6d6e\u52a8 <\/p>\n\n\n\n

1-2.<\/strong>\u5c06\u5143\u7d20\u8bbe\u7f6e\u4e3a\u884c\u5185\u5757\u5143\u7d20\uff1adisplay:inline-block <\/p>\n\n\n\n

1-3.<\/strong>\u8bbe\u7f6eoverflow\u4e3a\u975evisible\u7684\u503c\uff1aoverflow:hidden<\/p>\n\n\n\n

2.\u9002\u914d\u5efa\u8bae\u5916\u5c42\u4f7f\u7528\u767e\u5206\u6bd4\uff0c\u975e\u5fc5\u8981\u5143\u7d20\u53ef\u5199px\uff0c\u7f16\u8bd1\u8fc7\u7a0b\u4e2d\u4f1a\u81ea\u52a8\u8f6c\u4e49\u50cf\u7d20\u9002\u914d\u3002<\/strong><\/p>\n\n\n\n

10.canvas\u76f8\u5173\uff0c\u56fe\u7247loading\uff0c\u8de8\u57df\u4e0b\u8f7d\uff0c\u56fe\u7247\u5c55\u793a\uff0c\u957f\u6309\u4fdd\u5b58\u3002<\/strong><\/p>\n\n\n\n

1.<\/strong>\u4f7f\u7528\u65f6\u5148\u8bf7\u6c42\u63a5\u53e3\u62ff\u5230\u63a5\u53e3\u94fe\u63a5\uff0c\u5206\u522b\u8fdb\u884c\u52a0\u8f7d\uff0c\u4e0b\u8f7d\u56fe\u7247\u5230\u672c\u5730\uff0c<\/p>\n\n\n\n

\u7ed8\u5236-\u901a\u8fc7\u56de\u8c03\u62c9\u8d77\u7a97\u53e3<\/p>\n\n\n\n

uni.showLoading({ title: ‘\u52a0\u8f7d\u4e2d’, mask: true }); <\/p>\n\n\n\n

const img = new Image() img.src = userInfo.avatar; <\/p>\n\n\n\n

img.onload = async (res) => { await this.inCanvas() uni.hideLoading()\/\/\u62ff\u4e0d\u5230canvas\u5c55\u793a\u51fa\u6765\u56de\u8c03\u51fd\u6570\u6682\u65f6\u8fd9\u4e48\u5199 this.posterState = true; }<\/p>\n\n\n\n

2.<\/strong>\u76f4\u63a5\u7528\u7684\u56fe\u7247\uff0c\u4f1a\u8de8\u57df\uff0c\u8fd9\u91cc\u8981\u5148\u8fdb\u884c\u4e0b\u8f7d\uff0c\u628a\u56fe\u7247\u4e0b\u5230\u672c\u5730\uff1auni.getImageInfo({ src: _this.photoPath, success(res) { \/\/\u5f00\u59cb\u7ed8\u5236 }, fail(res){ \/\/\u7ed8\u5236\u5931\u8d25 }) }<\/p>\n\n\n\n

3.<\/strong>\u7ed8\u5236\u5b8c\u6210\u5bfc\u51fa\u4e3a\u6307\u5b9a\u5927\u5c0f\u56fe\u7247,\u628athis.tempFilePath\u63d2\u5165\u6807\u7b7e\u7684src=\u201c\u201d\u5185 let me = this uni.canvasToTempFilePath({ canvasId: ‘shareCanvas’, async success(res) { onsole.log(‘success’, res) me.tempFilePath = res.tempFilePath }, fail(e) { console.log(‘fail’, e) } })<\/p>\n\n\n\n

4.<\/strong> \u4e0e \u6709\u533a\u522b \uff0cimage\u66f4\u9884\u89c8\u7eaf\u770b\uff0cimg\u9002\u5408\u5f15\u7528,\u5728\u6d4f\u89c8\u5668\u5185\u957f\u6309\u4f1a\u5b58\u5728\u4e0d\u540c\u8868\u73b0\u65b9\u5f0f\u3002<\/p>\n\n\n\n

\u4e8c.\u7ec4\u4ef6\u5c01\u88c5\u5efa\u8bae<\/strong><\/p>\n\n\n\n

1.-\u904d\u5386item\u4e0edata\u4f20\u9012\u5c3d\u91cf\u5199\u7236\u7ec4\u4ef6\u4e0a(\u5b50\u7ec4\u4ef6\u6ca1\u6709onload\u4e0eonShow)\uff0c\u4e0d\u7136\u5904\u7406\u8d77\u6765\u5f88\u9ebb\u70e6\u3002<\/p>\n\n\n\n

2.-\u5b50\u7ec4\u4ef6\u5236\u4f5c\u65f6\u5019\u5c3d\u91cf\u63d0\u53d6\u516c\u5171\u65b9\u6cd5\uff0c\u6269\u5c55\u51fd\u6570\u517c\u5bb9\u591a\u79cd\u53c2\u6570\u5df2\u8fbe\u5230\u4e0d\u540c\u6548\u679c\u3002<\/p>\n\n\n\n

3.\u5199\u4e868\u4e2a\u7ec4\u4ef6\u6700\u540e\u56e0\u4e3a\u5404\u79cd\u4f18\u5316\uff0c\u9700\u6c42\u7684\u6539\u52a8\uff0c\u53ea\u7528\u5230\u4e865\u4e2a\uff0c\u9020\u8f6e\u5b50\u524d\u591a\u4e0e\u540e\u7aef\u548c\u4ea7\u54c1\u4ea4\u6d41\uff0c\u907f\u514d\u6d6a\u8d39\u5f00\u53d1\u8d44\u6e90\u3002<\/p>\n","protected":false},"excerpt":{"rendered":"

1.carousel-3d\u8f6e\u64ad\u56fetransfrom \u659c\u5207\u79fb\u52a8\u56fe\u7247\u6a21\u7cca(ios)\u8868\u73b0\u4e3a—transf […]<\/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\/1174"}],"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=1174"}],"version-history":[{"count":1,"href":"http:\/\/blog.xrhoujie.com\/index.php?rest_route=\/wp\/v2\/posts\/1174\/revisions"}],"predecessor-version":[{"id":1175,"href":"http:\/\/blog.xrhoujie.com\/index.php?rest_route=\/wp\/v2\/posts\/1174\/revisions\/1175"}],"wp:attachment":[{"href":"http:\/\/blog.xrhoujie.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1174"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/blog.xrhoujie.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=1174"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/blog.xrhoujie.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=1174"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}