{"id":186159,"date":"2023-06-19T16:28:49","date_gmt":"2023-06-19T08:28:49","guid":{"rendered":"http:\/\/www.idc.net\/help\/186159\/"},"modified":"2023-06-19T16:28:49","modified_gmt":"2023-06-19T08:28:49","slug":"%e5%90%8e%e6%b5%aa%e4%ba%91%e7%99%be%e5%ba%a6%e5%b0%8f%e7%a8%8b%e5%ba%8f%e6%95%99%e7%a8%8b%ef%bc%9amovable-view-%e5%8f%af%e7%a7%bb%e5%8a%a8%e8%a7%86%e5%9b%be%e5%ae%b9%e5%99%a8","status":"publish","type":"post","link":"https:\/\/idc.net\/help\/186159\/","title":{"rendered":"\u540e\u6d6a\u4e91\u767e\u5ea6\u5c0f\u7a0b\u5e8f\u6559\u7a0b\uff1amovable-view \u53ef\u79fb\u52a8\u89c6\u56fe\u5bb9\u5668"},"content":{"rendered":"<ul>\n<li>movable-view \u53ef\u79fb\u52a8\u89c6\u56fe\u5bb9\u5668\n<ul>\n<li>\u5c5e\u6027\u8bf4\u660e\n<ul>\n<li>direction \u6709\u6548\u503c<\/li>\n<\/ul>\n<\/li>\n<li>\u793a\u4f8b\n<ul>\n<li>\u4ee3\u7801\u793a\u4f8b 1\uff1amovable-view \u533a\u57df\u5c0f\u4e8e movable-area<\/li>\n<li>\u4ee3\u7801\u793a\u4f8b 2\uff1amovable-view \u533a\u57df\u5927\u4e8e movable-area<\/li>\n<li>\u4ee3\u7801\u793a\u4f8b 3\uff1a\u53ea\u53ef\u4ee5\u6a2a\u5411\u79fb\u52a8<\/li>\n<li>\u4ee3\u7801\u793a\u4f8b 4\uff1a\u53ea\u53ef\u4ee5\u7eb5\u5411\u79fb\u52a8<\/li>\n<li>\u4ee3\u7801\u793a\u4f8b 5\uff1a\u53ef\u8d85\u51fa\u8fb9\u754c<\/li>\n<li>\u4ee3\u7801\u793a\u4f8b 6\uff1a\u5e26\u6709\u60ef\u6027<\/li>\n<li>\u4ee3\u7801\u793a\u4f8b 7\uff1a\u53ef\u653e\u7f29<\/li>\n<li>\u4ee3\u7801\u793a\u4f8b 8\uff1a\u53ef\u60ac\u6d6e\u83dc\u5355<\/li>\n<\/ul>\n<\/li>\n<li>Bug &amp; Tip\n<ul><\/ul>\n<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<h1><span><\/span>movable-view \u53ef\u79fb\u52a8\u89c6\u56fe\u5bb9\u5668<\/h1>\n<p><strong>\u89e3\u91ca<\/strong>\uff1a\u53ef\u79fb\u52a8\u7684\u89c6\u56fe\u5bb9\u5668\uff0c\u5728\u9875\u9762\u4e2d\u53ef\u4ee5\u62d6\u62fd\u6ed1\u52a8\u3002movable-view \u5fc5\u987b\u5728 movable-area \u7ec4\u4ef6\u4e2d\uff0c\u5e76\u4e14\u5fc5\u987b\u662f\u76f4\u63a5\u5b50\u8282\u70b9\uff0c\u5426\u5219\u4e0d\u80fd\u79fb\u52a8\u3002<\/p>\n<h2><span><\/span>\u5c5e\u6027\u8bf4\u660e<\/h2>\n<table>\n<thead>\n<tr>\n<th>\u5c5e\u6027\u540d<\/th>\n<th>\u7c7b\u578b<\/th>\n<th>\u9ed8\u8ba4\u503c<\/th>\n<th>\u5fc5\u586b<\/th>\n<th>\u8bf4\u660e<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td>\n<p>direction<\/p>\n<\/td>\n<td>\n<p>String<\/p>\n<\/td>\n<td>\n<p>none<\/p>\n<\/td>\n<td>\n<p>\u5426<\/p>\n<\/td>\n<td>\n<p>movable-view \u7684\u79fb\u52a8\u65b9\u5411\uff0c\u5c5e\u6027\u503c\u6709 all\u3001vertical\u3001horizontal\u3001none<\/p>\n<\/td>\n<\/tr>\n<tr>\n<td>\n<p>inertia<\/p>\n<\/td>\n<td>\n<p>Boolean<\/p>\n<\/td>\n<td>\n<p>false<\/p>\n<\/td>\n<td>\n<p>\u5426<\/p>\n<\/td>\n<td>\n<p>movable-view \u662f\u5426\u5e26\u6709\u60ef\u6027<\/p>\n<\/td>\n<\/tr>\n<tr>\n<td>\n<p>out-of-bounds<\/p>\n<\/td>\n<td>\n<p>Boolean<\/p>\n<\/td>\n<td>\n<p>false<\/p>\n<\/td>\n<td>\n<p>\u5426<\/p>\n<\/td>\n<td>\n<p>\u8d85\u8fc7\u53ef\u79fb\u52a8\u533a\u57df\u540e\uff0cmovable-view \u662f\u5426\u8fd8\u53ef\u4ee5\u79fb\u52a8<\/p>\n<\/td>\n<\/tr>\n<tr>\n<td>\n<p>x<\/p>\n<\/td>\n<td>\n<p>Number<\/p>\n<\/td>\n<td><\/td>\n<td>\n<p>\u5426<\/p>\n<\/td>\n<td>\n<p>\u5b9a\u4e49 x \u8f74\u65b9\u5411\u7684\u504f\u79fb\uff0c\u5982\u679c x \u7684\u503c\u4e0d\u5728\u53ef\u79fb\u52a8\u8303\u56f4\u5185\uff0c\u4f1a\u81ea\u52a8\u79fb\u52a8\u5230\u53ef\u79fb\u52a8\u8303\u56f4\uff1b\u6539\u53d8 x \u7684\u503c\u4f1a\u89e6\u53d1\u52a8\u753b<\/p>\n<\/td>\n<\/tr>\n<tr>\n<td>\n<p>y<\/p>\n<\/td>\n<td>\n<p>Number<\/p>\n<\/td>\n<td><\/td>\n<td>\n<p>\u5426<\/p>\n<\/td>\n<td>\n<p>\u5b9a\u4e49 y \u8f74\u65b9\u5411\u7684\u504f\u79fb\uff0c\u5982\u679c y \u7684\u503c\u4e0d\u5728\u53ef\u79fb\u52a8\u8303\u56f4\u5185\uff0c\u4f1a\u81ea\u52a8\u79fb\u52a8\u5230\u53ef\u79fb\u52a8\u8303\u56f4\uff1b\u6539\u53d8 y \u7684\u503c\u4f1a\u89e6\u53d1\u52a8\u753b<\/p>\n<\/td>\n<\/tr>\n<tr>\n<td>\n<p>damping<\/p>\n<\/td>\n<td>\n<p>Number<\/p>\n<\/td>\n<td>\n<p>20<\/p>\n<\/td>\n<td>\n<p>\u5426<\/p>\n<\/td>\n<td>\n<p>\u963b\u5c3c\u7cfb\u6570\uff0c\u7528\u4e8e\u63a7\u5236 x \u6216 y \u6539\u53d8\u65f6\u7684\u52a8\u753b\u548c\u8fc7\u754c\u56de\u5f39\u7684\u52a8\u753b\uff0c\u503c\u8d8a\u5927\u79fb\u52a8\u8d8a\u5feb<\/p>\n<\/td>\n<\/tr>\n<tr>\n<td>\n<p>friction<\/p>\n<\/td>\n<td>\n<p>Number<\/p>\n<\/td>\n<td>\n<p>2<\/p>\n<\/td>\n<td>\n<p>\u5426<\/p>\n<\/td>\n<td>\n<p>\u6469\u64e6\u7cfb\u6570\uff0c\u7528\u4e8e\u63a7\u5236\u60ef\u6027\u6ed1\u52a8\u7684\u52a8\u753b\uff0c\u503c\u8d8a\u5927\u6469\u64e6\u529b\u8d8a\u5927\uff0c\u6ed1\u52a8\u8d8a\u5feb\u505c\u6b62\uff1b\u5fc5\u987b\u5927\u4e8e 0\uff0c\u5426\u5219\u4f1a\u88ab\u8bbe\u7f6e\u6210\u9ed8\u8ba4\u503c<\/p>\n<\/td>\n<\/tr>\n<tr>\n<td>\n<p>disabled<\/p>\n<\/td>\n<td>\n<p>Boolean<\/p>\n<\/td>\n<td>\n<p>false<\/p>\n<\/td>\n<td>\n<p>\u5426<\/p>\n<\/td>\n<td>\n<p>\u662f\u5426\u7981\u7528<\/p>\n<\/td>\n<\/tr>\n<tr>\n<td>\n<p>scale<\/p>\n<\/td>\n<td>\n<p>Boolean<\/p>\n<\/td>\n<td>\n<p>false<\/p>\n<\/td>\n<td>\n<p>\u5426<\/p>\n<\/td>\n<td>\n<p>\u662f\u5426\u652f\u6301\u53cc\u6307\u7f29\u653e\uff0c\u9ed8\u8ba4\u7f29\u653e\u624b\u52bf\u751f\u6548\u533a\u57df\u662f\u5728 movable-view \u5185<\/p>\n<\/td>\n<\/tr>\n<tr>\n<td>\n<p>scale-min<\/p>\n<\/td>\n<td>\n<p>Number<\/p>\n<\/td>\n<td>\n<p>0.5<\/p>\n<\/td>\n<td>\n<p>\u5426<\/p>\n<\/td>\n<td>\n<p>\u5b9a\u4e49\u7f29\u653e\u500d\u6570\u6700\u5c0f\u503c<\/p>\n<\/td>\n<\/tr>\n<tr>\n<td>\n<p>scale-max<\/p>\n<\/td>\n<td>\n<p>Number<\/p>\n<\/td>\n<td>\n<p>10<\/p>\n<\/td>\n<td>\n<p>\u5426<\/p>\n<\/td>\n<td>\n<p>\u5b9a\u4e49\u7f29\u653e\u500d\u6570\u6700\u5927\u503c<\/p>\n<\/td>\n<\/tr>\n<tr>\n<td>\n<p>scale-value<\/p>\n<\/td>\n<td>\n<p>Number<\/p>\n<\/td>\n<td>\n<p>1<\/p>\n<\/td>\n<td>\n<p>\u5426<\/p>\n<\/td>\n<td>\n<p>\u5b9a\u4e49\u7f29\u653e\u500d\u6570\uff0c\u53d6\u503c\u8303\u56f4\u4e3a 0.5-10<\/p>\n<\/td>\n<\/tr>\n<tr>\n<td>\n<p>animation<\/p>\n<\/td>\n<td>\n<p>Boolean<\/p>\n<\/td>\n<td>\n<p>true<\/p>\n<\/td>\n<td>\n<p>\u5426<\/p>\n<\/td>\n<td>\n<p>\u662f\u5426\u4f7f\u7528\u52a8\u753b<\/p>\n<\/td>\n<\/tr>\n<tr>\n<td>\n<p>bindchange<\/p>\n<\/td>\n<td>\n<p>EventHandle<\/p>\n<\/td>\n<td><\/td>\n<td>\n<p>\u5426<\/p>\n<\/td>\n<td>\n<p>\u62d6\u52a8\u8fc7\u7a0b\u4e2d\u89e6\u53d1\u7684\u4e8b\u4ef6\uff0c<code>event.detail = {x: x, y: y, source: source}<\/code>\uff0c\u5176\u4e2d source \u8868\u793a\u4ea7\u751f\u79fb\u52a8\u7684\u539f\u56e0\uff0c\u503c\u53ef\u4e3a touch\uff08\u62d6\u52a8\uff09<\/p>\n<\/td>\n<\/tr>\n<tr>\n<td>\n<p>bindscale<\/p>\n<\/td>\n<td>\n<p>EventHandle<\/p>\n<\/td>\n<td><\/td>\n<td>\n<p>\u5426<\/p>\n<\/td>\n<td>\n<p>\u7f29\u653e\u8fc7\u7a0b\u4e2d\u89e6\u53d1\u7684\u4e8b\u4ef6\uff0c<code>event.detail = {x: x, y: y, scale: scale}<\/code><\/p>\n<\/td>\n<\/tr>\n<tr>\n<td>\n<p>htouchmove<\/p>\n<\/td>\n<td>\n<p>EventHandle<\/p>\n<\/td>\n<td><\/td>\n<td>\n<p>\u5426<\/p>\n<\/td>\n<td>\n<p>\u624b\u6307\u521d\u6b21\u89e6\u6478\u540e\u53d1\u751f\u6a2a\u5411\u79fb\u52a8\uff0c\u5982\u679c catch \u6b64\u4e8b\u4ef6\uff0c\u5219\u610f\u5473\u7740 touchmove \u4e8b\u4ef6\u4e5f\u88ab catch<\/p>\n<\/td>\n<\/tr>\n<tr>\n<td>\n<p>vtouchmove<\/p>\n<\/td>\n<td>\n<p>EventHandle<\/p>\n<\/td>\n<td><\/td>\n<td>\n<p>\u5426<\/p>\n<\/td>\n<td>\n<p>\u624b\u6307\u521d\u6b21\u89e6\u6478\u540e\u53d1\u751f\u7eb5\u5411\u79fb\u52a8\uff0c\u5982\u679c catch \u6b64\u4e8b\u4ef6\uff0c\u5219\u610f\u5473\u7740 touchmove \u4e8b\u4ef6\u4e5f\u88ab catch<\/p>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<h3><span><\/span>direction \u6709\u6548\u503c<\/h3>\n<table>\n<thead>\n<tr>\n<th>\u503c<\/th>\n<th>\u8bf4\u660e<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td>all<\/td>\n<td>\u6c34\u5e73\u65b9\u5411\u548c\u5782\u76f4\u65b9\u5411<\/td>\n<\/tr>\n<tr>\n<td>vertical<\/td>\n<td>\u5782\u76f4\u65b9\u5411<\/td>\n<\/tr>\n<tr>\n<td>horizontal<\/td>\n<td>\u6c34\u5e73\u65b9\u5411<\/td>\n<\/tr>\n<tr>\n<td>none<\/td>\n<td>\u4e0d\u53ef\u79fb\u52a8<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<h2><span><\/span>\u793a\u4f8b<\/h2>\n<p>\u8df3\u8f6c\u7f16\u8f91\u5de5\u5177<\/p>\n<p>\u5728\u5f00\u53d1\u8005\u5de5\u5177\u4e2d\u6253\u5f00<\/p>\n<p>\u5728 WEB IDE \u4e2d\u6253\u5f00<\/p>\n<p>\u626b\u7801\u4f53\u9a8c<\/p>\n<p>\u4ee3\u7801\u793a\u4f8b<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/static.sitestack.cn\/projects\/smartprogram-20210306\/97ebf63311ffac886baad1c970c1b97b.png\" class=\"aligncenter\"><\/p>\n<p>\u8bf7\u4f7f\u7528\u767e\u5ea6APP\u626b\u7801<\/p>\n<h3><span><\/span>\u4ee3\u7801\u793a\u4f8b 1\uff1amovable-view \u533a\u57df\u5c0f\u4e8e movable-area<\/h3>\n<ul>\n<li>SWAN<\/li>\n<li>JS<\/li>\n<\/ul>\n<pre>\n \n \n <ol>\n  \n  \n  <li><code><span>&lt;view<\/span><span> <\/span><span>class<\/span><span>=<\/span><span>\"wrap\"<\/span><span>&gt;<\/span><\/code><\/li>\n  \n  \n  <li><code><span> <\/span><span>&lt;view<\/span><span> <\/span><span>class<\/span><span>=<\/span><span>\"card-area\"<\/span><span>&gt;<\/span><\/code><\/li>\n  \n  \n  <li><code><span> <\/span><span>&lt;view<\/span><span> <\/span><span>class<\/span><span>=<\/span><span>\"top-description border-bottom\"<\/span><span>&gt;<\/span><\/code><\/li>\n  \n  \n  <li><code><span> movable-view\u533a\u57df\u5c0f\u4e8emovable-area<\/span><\/code><\/li>\n  \n  \n  <li><code><span> <\/span><span>&lt;\/view&gt;<\/span><\/code><\/li>\n  \n  \n  <li><code><span> <\/span><span>&lt;movable-area&gt;<\/span><\/code><\/li>\n  \n  \n  <li><code><span> <\/span><span>&lt;movable-view<\/span><span> <\/span><span>x<\/span><span>=<\/span><span>\"{=x1=}\"<\/span><span> <\/span><span>y<\/span><span>=<\/span><span>\"{=y1=}\"<\/span><span> <\/span><span>damping<\/span><span>=<\/span><span>\"20\"<\/span><span> <\/span><span>disabled<\/span><span>=<\/span><span>\"false\"<\/span><span> <\/span><span>direction<\/span><span>=<\/span><span>\"all\"<\/span><span>&gt;<\/span><span>text<\/span><span>&lt;\/movable-view&gt;<\/span><\/code><\/li>\n  \n  \n  <li><code><span> <\/span><span>&lt;\/movable-area&gt;<\/span><span> <\/span><\/code><\/li>\n  \n  \n  <li><code><span> <\/span><span>&lt;button<\/span><span> <\/span><span>bind:tap<\/span><span>=<\/span><span>\"move\"<\/span><span> <\/span><span>class<\/span><span>=<\/span><span>\"move-button\"<\/span><span> <\/span><span>type<\/span><span>=<\/span><span>\"primary\"<\/span><span>&gt;<\/span><span>\u70b9\u51fb\u79fb\u52a8\u5230 (50px, 50px)<\/span><span>&lt;\/button&gt;<\/span><\/code><\/li>\n  \n  \n  <li><code><span> <\/span><span>&lt;\/view&gt;<\/span><\/code><\/li>\n  \n  \n  <li><code><span>&lt;\/view&gt;<\/span><\/code><\/li>\n \n \n <\/ol><\/pre>\n<h3><span><\/span>\u4ee3\u7801\u793a\u4f8b 2\uff1amovable-view \u533a\u57df\u5927\u4e8e movable-area<\/h3>\n<ul>\n<li>SWAN<\/li>\n<li>JS<\/li>\n<li>CSS<\/li>\n<\/ul>\n<pre>\n \n \n <ol>\n  \n  \n  <li><code><span>&lt;view<\/span><span> <\/span><span>class<\/span><span>=<\/span><span>\"wrap\"<\/span><span>&gt;<\/span><\/code><\/li>\n  \n  \n  <li><code><span> <\/span><span>&lt;view<\/span><span> <\/span><span>class<\/span><span>=<\/span><span>\"card-area\"<\/span><span>&gt;<\/span><\/code><\/li>\n  \n  \n  <li><code><span> <\/span><span>&lt;view<\/span><span> <\/span><span>class<\/span><span>=<\/span><span>\"top-description border-bottom\"<\/span><span>&gt;<\/span><\/code><\/li>\n  \n  \n  <li><code><span> movable-view\u533a\u57df\u5927\u4e8emovable-area<\/span><\/code><\/li>\n  \n  \n  <li><code><span> <\/span><span>&lt;\/view&gt;<\/span><\/code><\/li>\n  \n  \n  <li><code><span> <\/span><span>&lt;movable-area&gt;<\/span><\/code><\/li>\n  \n  \n  <li><code><span> <\/span><span>&lt;!-- \u6dfb\u52a0\u5927\u4e8emovable-area\u7684class --&gt;<\/span><\/code><\/li>\n  \n  \n  <li><code><span> <\/span><span>&lt;movable-view<\/span><span> <\/span><span>x<\/span><span>=<\/span><span>\"{=x=}\"<\/span><span> <\/span><span>y<\/span><span>=<\/span><span>\"{=y=}\"<\/span><span> <\/span><span>class<\/span><span>=<\/span><span>\"bigger-area\"<\/span><span> <\/span><span>direction<\/span><span>=<\/span><span>\"all\"<\/span><span>&gt;<\/span><span>text<\/span><span>&lt;\/movable-view&gt;<\/span><\/code><\/li>\n  \n  \n  <li><code><span> <\/span><span>&lt;\/movable-area&gt;<\/span><\/code><\/li>\n  \n  \n  <li><code><span> <\/span><span>&lt;\/view&gt;<\/span><\/code><\/li>\n  \n  \n  <li><code><span>&lt;\/view&gt;<\/span><\/code><\/li>\n \n \n <\/ol><\/pre>\n<h3><span><\/span>\u4ee3\u7801\u793a\u4f8b 3\uff1a\u53ea\u53ef\u4ee5\u6a2a\u5411\u79fb\u52a8<\/h3>\n<ul>\n<li>SWAN<\/li>\n<li>JS<\/li>\n<\/ul>\n<pre>\n \n \n <ol>\n  \n  \n  <li><code><span>&lt;view<\/span><span> <\/span><span>class<\/span><span>=<\/span><span>\"card-area\"<\/span><span>&gt;<\/span><\/code><\/li>\n  \n  \n  <li><code><span> <\/span><span>&lt;view<\/span><span> <\/span><span>class<\/span><span>=<\/span><span>\"top-description border-bottom\"<\/span><span>&gt;<\/span><\/code><\/li>\n  \n  \n  <li><code><span> \u53ea\u53ef\u4ee5\u6a2a\u5411\u79fb\u52a8<\/span><\/code><\/li>\n  \n  \n  <li><code><span> <\/span><span>&lt;\/view&gt;<\/span><\/code><\/li>\n  \n  \n  <li><code><span> <\/span><span>&lt;movable-area<\/span><span> <\/span><span>htouchmove<\/span><span>&gt;<\/span><\/code><\/li>\n  \n  \n  <li><code><span> <\/span><span>&lt;movable-view<\/span><span> <\/span><span>x<\/span><span>=<\/span><span>\"{=x=}\"<\/span><span> <\/span><span>y<\/span><span>=<\/span><span>\"{=y=}\"<\/span><span> <\/span><span>direction<\/span><span>=<\/span><span>\"horizontal\"<\/span><span>&gt;<\/span><span>text<\/span><span>&lt;\/movable-view&gt;<\/span><\/code><\/li>\n  \n  \n  <li><code><span> <\/span><span>&lt;\/movable-area&gt;<\/span><\/code><\/li>\n  \n  \n  <li><code><span>&lt;\/view&gt;<\/span><\/code><\/li>\n \n \n <\/ol><\/pre>\n<h3><span><\/span>\u4ee3\u7801\u793a\u4f8b 4\uff1a\u53ea\u53ef\u4ee5\u7eb5\u5411\u79fb\u52a8<\/h3>\n<ul>\n<li>SWAN<\/li>\n<li>JS<\/li>\n<\/ul>\n<pre>\n \n \n <ol>\n  \n  \n  <li><code><span>&lt;view<\/span><span> <\/span><span>class<\/span><span>=<\/span><span>\"card-area\"<\/span><span>&gt;<\/span><\/code><\/li>\n  \n  \n  <li><code><span> <\/span><span>&lt;view<\/span><span> <\/span><span>class<\/span><span>=<\/span><span>\"top-description border-bottom\"<\/span><span>&gt;<\/span><\/code><\/li>\n  \n  \n  <li><code><span> \u53ea\u53ef\u4ee5\u7eb5\u5411\u79fb\u52a8<\/span><\/code><\/li>\n  \n  \n  <li><code><span> <\/span><span>&lt;\/view&gt;<\/span><\/code><\/li>\n  \n  \n  <li><code><span> <\/span><span>&lt;movable-area<\/span><span> <\/span><span>vtouchmove<\/span><span>&gt;<\/span><\/code><\/li>\n  \n  \n  <li><code><span> <\/span><span>&lt;movable-view<\/span><span> <\/span><span>x<\/span><span>=<\/span><span>\"{=x=}\"<\/span><span> <\/span><span>y<\/span><span>=<\/span><span>\"{=y=}\"<\/span><span> <\/span><span>direction<\/span><span>=<\/span><span>\"vertical\"<\/span><span>&gt;<\/span><span>text<\/span><span>&lt;\/movable-view&gt;<\/span><\/code><\/li>\n  \n  \n  <li><code><span> <\/span><span>&lt;\/movable-area&gt;<\/span><\/code><\/li>\n  \n  \n  <li><code><span>&lt;\/view&gt;<\/span><\/code><\/li>\n \n \n <\/ol><\/pre>\n<h3><span><\/span>\u4ee3\u7801\u793a\u4f8b 5\uff1a\u53ef\u8d85\u51fa\u8fb9\u754c<\/h3>\n<ul>\n<li>SWAN<\/li>\n<li>JS<\/li>\n<\/ul>\n<pre>\n \n \n <ol>\n  \n  \n  <li><code><span>&lt;view<\/span><span> <\/span><span>class<\/span><span>=<\/span><span>\"wrap\"<\/span><span>&gt;<\/span><\/code><\/li>\n  \n  \n  <li><code><span> <\/span><span>&lt;view<\/span><span> <\/span><span>class<\/span><span>=<\/span><span>\"card-area\"<\/span><span>&gt;<\/span><\/code><\/li>\n  \n  \n  <li><code><span> <\/span><span>&lt;view<\/span><span> <\/span><span>class<\/span><span>=<\/span><span>\"top-description border-bottom\"<\/span><span>&gt;<\/span><\/code><\/li>\n  \n  \n  <li><code><span> \u53ef\u8d85\u51fa\u8fb9\u754c<\/span><\/code><\/li>\n  \n  \n  <li><code><span> <\/span><span>&lt;\/view&gt;<\/span><\/code><\/li>\n  \n  \n  <li><code><span> <\/span><span>&lt;movable-area&gt;<\/span><\/code><\/li>\n  \n  \n  <li><code><span> <\/span><span>&lt;movable-view<\/span><span> <\/span><span>x<\/span><span>=<\/span><span>\"{=x=}\"<\/span><span> <\/span><span>y<\/span><span>=<\/span><span>\"{=y=}\"<\/span><span> <\/span><span>direction<\/span><span>=<\/span><span>\"all\"<\/span><span> <\/span><span>out-of-bounds<\/span><span>&gt;<\/span><span>text<\/span><span>&lt;\/movable-view&gt;<\/span><\/code><\/li>\n  \n  \n  <li><code><span> <\/span><span>&lt;\/movable-area&gt;<\/span><\/code><\/li>\n  \n  \n  <li><code><span> <\/span><span>&lt;\/view&gt;<\/span><\/code><\/li>\n  \n  \n  <li><code><span>&lt;\/view&gt;<\/span><\/code><\/li>\n \n \n <\/ol><\/pre>\n<h3><span><\/span>\u4ee3\u7801\u793a\u4f8b 6\uff1a\u5e26\u6709\u60ef\u6027<\/h3>\n<ul>\n<li>SWAN<\/li>\n<li>JS<\/li>\n<\/ul>\n<pre>\n \n \n <ol>\n  \n  \n  <li><code><span>&lt;view<\/span><span> <\/span><span>class<\/span><span>=<\/span><span>\"wrap\"<\/span><span>&gt;<\/span><\/code><\/li>\n  \n  \n  <li><code><span> <\/span><span>&lt;view<\/span><span> <\/span><span>class<\/span><span>=<\/span><span>\"card-area\"<\/span><span>&gt;<\/span><\/code><\/li>\n  \n  \n  <li><code><span> <\/span><span>&lt;view<\/span><span> <\/span><span>class<\/span><span>=<\/span><span>\"top-description border-bottom\"<\/span><span>&gt;<\/span><\/code><\/li>\n  \n  \n  <li><code><span> \u5e26\u6709\u60ef\u6027<\/span><\/code><\/li>\n  \n  \n  <li><code><span> <\/span><span>&lt;\/view&gt;<\/span><\/code><\/li>\n  \n  \n  <li><code><span> <\/span><span>&lt;movable-area&gt;<\/span><\/code><\/li>\n  \n  \n  <li><code><span> <\/span><span>&lt;movable-view<\/span><span> <\/span><span>x<\/span><span>=<\/span><span>\"{=x=}\"<\/span><span> <\/span><span>y<\/span><span>=<\/span><span>\"{=y=}\"<\/span><span> <\/span><span>direction<\/span><span>=<\/span><span>\"all\"<\/span><span> <\/span><span>inertia<\/span><span> <\/span><span>friction<\/span><span>=<\/span><span>\"0.5\"<\/span><span>&gt;<\/span><span>text<\/span><span>&lt;\/movable-view&gt;<\/span><\/code><\/li>\n  \n  \n  <li><code><span> <\/span><span>&lt;\/movable-area&gt;<\/span><\/code><\/li>\n  \n  \n  <li><code><span> <\/span><span>&lt;\/view&gt;<\/span><\/code><\/li>\n  \n  \n  <li><code><span>&lt;\/view&gt;<\/span><\/code><\/li>\n \n \n <\/ol><\/pre>\n<h3><span><\/span>\u4ee3\u7801\u793a\u4f8b 7\uff1a\u53ef\u653e\u7f29<\/h3>\n<ul>\n<li>SWAN<\/li>\n<li>JS<\/li>\n<\/ul>\n<pre>\n \n \n <ol>\n  \n  \n  <li><code><span>&lt;view<\/span><span> <\/span><span>class<\/span><span>=<\/span><span>\"wrap\"<\/span><span>&gt;<\/span><\/code><\/li>\n  \n  \n  <li><code><span> <\/span><span>&lt;view<\/span><span> <\/span><span>class<\/span><span>=<\/span><span>\"card-area\"<\/span><span>&gt;<\/span><\/code><\/li>\n  \n  \n  <li><code><span> <\/span><span>&lt;view<\/span><span> <\/span><span>class<\/span><span>=<\/span><span>\"top-description border-bottom\"<\/span><span>&gt;<\/span><\/code><\/li>\n  \n  \n  <li><code><span> \u53ef\u653e\u7f29<\/span><\/code><\/li>\n  \n  \n  <li><code><span> <\/span><span>&lt;\/view&gt;<\/span><\/code><\/li>\n  \n  \n  <li><code><span> <\/span><span>&lt;movable-area<\/span><span> <\/span><span>scale-area<\/span><span>=<\/span><span>\"true\"<\/span><span>&gt;<\/span><\/code><\/li>\n  \n  \n  <li><code><span> <\/span><span>&lt;movable-view<\/span><span> <\/span><\/code><\/li>\n  \n  \n  <li><code><span> <\/span><span>x<\/span><span>=<\/span><span>\"{=x=}\"<\/span><span> <\/span><\/code><\/li>\n  \n  \n  <li><code><span> <\/span><span>y<\/span><span>=<\/span><span>\"{=y=}\"<\/span><span> <\/span><\/code><\/li>\n  \n  \n  <li><code><span> <\/span><span>scale<\/span><\/code><\/li>\n  \n  \n  <li><code><span> <\/span><span>scale-min<\/span><span>=<\/span><span>\"0.5\"<\/span><\/code><\/li>\n  \n  \n  <li><code><span> <\/span><span>scale-max<\/span><span>=<\/span><span>\"4\"<\/span><\/code><\/li>\n  \n  \n  <li><code><span> <\/span><span>scale-value<\/span><span>=<\/span><span>\"{{scale}}\"<\/span><\/code><\/li>\n  \n  \n  <li><code><span> <\/span><span>direction<\/span><span>=<\/span><span>\"all\"<\/span><span> <\/span><\/code><\/li>\n  \n  \n  <li><code><span> <\/span><span>animation<\/span><span>=<\/span><span>\"false\"<\/span><span> <\/span><\/code><\/li>\n  \n  \n  <li><code><span> <\/span><span>bindchange<\/span><span>=<\/span><span>\"onChange\"<\/span><span> <\/span><\/code><\/li>\n  \n  \n  <li><code><span> <\/span><span>bindscale<\/span><span>=<\/span><span>\"onScale\"<\/span><span>&gt;<\/span><\/code><\/li>\n  \n  \n  <li><code><span> text<\/span><\/code><\/li>\n  \n  \n  <li><code><span> <\/span><span>&lt;\/movable-view&gt;<\/span><\/code><\/li>\n  \n  \n  <li><code><span> <\/span><span>&lt;\/movable-area&gt;<\/span><\/code><\/li>\n  \n  \n  <li><code><span> <\/span><span>&lt;button<\/span><span> <\/span><span>bind:tap<\/span><span>=<\/span><span>\"scale\"<\/span><span> <\/span><span>class<\/span><span>=<\/span><span>\"scale-button\"<\/span><span> <\/span><span>type<\/span><span>=<\/span><span>\"primary\"<\/span><span>&gt;<\/span><span>\u70b9\u51fb\u653e\u59273\u500d<\/span><span>&lt;\/button&gt;<\/span><\/code><\/li>\n  \n  \n  <li><code><span> <\/span><span>&lt;\/view&gt;<\/span><\/code><\/li>\n  \n  \n  <li><code><span>&lt;\/view&gt;<\/span><\/code><\/li>\n \n \n <\/ol><\/pre>\n<h3><span><\/span>\u4ee3\u7801\u793a\u4f8b 8\uff1a\u53ef\u60ac\u6d6e\u83dc\u5355<\/h3>\n<ul>\n<li>SWAN<\/li>\n<li>JS<\/li>\n<\/ul>\n<pre>\n \n \n <ol>\n  \n  \n  <li><code><span>&lt;view<\/span><span> <\/span><span>class<\/span><span>=<\/span><span>\"wrap\"<\/span><span>&gt;<\/span><\/code><\/li>\n  \n  \n  <li><code><span> <\/span><span>&lt;movable-area<\/span><span> <\/span><span>class<\/span><span>=<\/span><span>\"movable-area\"<\/span><span> <\/span><span>style<\/span><span>=<\/span><span>\"<\/span><span>height<\/span><span>:{{<\/span><span>height<\/span><span>\/<\/span><span>100<\/span><span>}}<\/span><span>rem<\/span><span>\"<\/span><span>&gt;<\/span><\/code><\/li>\n  \n  \n  <li><code><span> <\/span><span>&lt;movable-view<\/span><\/code><\/li>\n  \n  \n  <li><code><span> <\/span><span>x<\/span><span>=<\/span><span>\"0\"<\/span><\/code><\/li>\n  \n  \n  <li><code><span> <\/span><span>y<\/span><span>=<\/span><span>\"0\"<\/span><\/code><\/li>\n  \n  \n  <li><code><span> <\/span><span>direction<\/span><span>=<\/span><span>\"all\"<\/span><\/code><\/li>\n  \n  \n  <li><code><span> <\/span><span>animation<\/span><span>=<\/span><span>\"false\"<\/span><\/code><\/li>\n  \n  \n  <li><code><span> <\/span><span>scale<\/span><\/code><\/li>\n  \n  \n  <li><code><span> <\/span><span>scale-min<\/span><span>=<\/span><span>\"0.5\"<\/span><\/code><\/li>\n  \n  \n  <li><code><span> <\/span><span>scale-max<\/span><span>=<\/span><span>\"4\"<\/span><span>&gt;<\/span><\/code><\/li>\n  \n  \n  <li><code><span> <\/span><span>&lt;\/movable-view&gt;<\/span><\/code><\/li>\n  \n  \n  <li><code><span> <\/span><span>&lt;\/movable-area&gt;<\/span><\/code><\/li>\n  \n  \n  <li><code><span>&lt;\/view&gt;<\/span><\/code><\/li>\n \n \n <\/ol><\/pre>\n<h2><span><\/span>Bug &amp; Tip<\/h2>\n<ul>\n<li>Tip\uff1amovable-view \u9700\u8981\u5728 CSS \u4e2d\u8bbe\u7f6e width \u548c height \u5c5e\u6027\uff1b\u82e5\u4e0d\u8bbe\u7f6e\uff0c\u9ed8\u8ba4\u4e3a 10px \u3002<\/li>\n<li>Tip\uff1amovable-view \u9ed8\u8ba4\u4e3a\u7edd\u5bf9\u5b9a\u4f4d\uff0ctop \u548c left \u5c5e\u6027\u4e3a 0px \u3002<\/li>\n<li>Tip\uff1a\u5f53 movable-view \u7684\u8303\u56f4\u5c0f\u4e8e movable-area \u65f6\uff0cmovable-view \u7684\u79fb\u52a8\u8303\u56f4\u662f\u5728 movable-area \u5185\u3002<\/li>\n<li>Tip\uff1a\u5f53 movable-view \u7684\u8303\u56f4\u5927\u4e8e movable-area \u65f6\uff0cmovable-view \u7684\u79fb\u52a8\u8303\u56f4\u5fc5\u987b\u5728 movable-area \u5185\uff08x \u8f74\u65b9\u5411\u548c y \u8f74\u65b9\u5411\u5206\u5f00\u8003\u8651\uff09\u3002<\/li>\n<li>Tip\uff1amovable-view \u5fc5\u987b\u5728\u7ec4\u4ef6\u4e2d\uff0c\u5e76\u4e14\u5fc5\u987b\u662f\u76f4\u63a5\u5b50\u8282\u70b9\uff0c\u5426\u5219\u4e0d\u80fd\u79fb\u52a8\u3002<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>movable-view \u53ef\u79fb\u52a8\u89c6\u56fe\u5bb9\u5668 \u5c5e\u6027\u8bf4\u660e direction \u6709\u6548\u503c \u793a\u4f8b \u4ee3\u7801\u793a\u4f8b 1\uff1amovab [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":186160,"comment_status":"closed","ping_status":"","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[182398],"tags":[],"class_list":["post-186159","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-mini-program"],"_links":{"self":[{"href":"https:\/\/idc.net\/help\/wp-json\/wp\/v2\/posts\/186159","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/idc.net\/help\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/idc.net\/help\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/idc.net\/help\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/idc.net\/help\/wp-json\/wp\/v2\/comments?post=186159"}],"version-history":[{"count":0,"href":"https:\/\/idc.net\/help\/wp-json\/wp\/v2\/posts\/186159\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/idc.net\/help\/wp-json\/wp\/v2\/media\/186160"}],"wp:attachment":[{"href":"https:\/\/idc.net\/help\/wp-json\/wp\/v2\/media?parent=186159"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/idc.net\/help\/wp-json\/wp\/v2\/categories?post=186159"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/idc.net\/help\/wp-json\/wp\/v2\/tags?post=186159"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}