{"id":34218,"date":"2024-11-25T16:05:49","date_gmt":"2024-11-25T08:05:49","guid":{"rendered":"https:\/\/fwq.ai\/blog\/34218\/"},"modified":"2024-11-25T16:05:49","modified_gmt":"2024-11-25T08:05:49","slug":"%e6%80%bb%e7%bb%93%e5%88%86%e4%ba%ab%e4%b8%80%e4%ba%9b%e5%b0%8f%e7%a8%8b%e5%ba%8f%e5%bc%80%e5%8f%91%e4%b8%ad%e9%81%87%e5%88%b0%e7%9a%84%e9%97%ae%e9%a2%98%ef%bc%88%e5%b8%ae%e5%bf%99%e9%81%bf%e5%9d%91","status":"publish","type":"post","link":"https:\/\/fwq.ai\/blog\/34218\/","title":{"rendered":"\u603b\u7ed3\u5206\u4eab\u4e00\u4e9b\u5c0f\u7a0b\u5e8f\u5f00\u53d1\u4e2d\u9047\u5230\u7684\u95ee\u9898\uff08\u5e2e\u5fd9\u907f\u5751\uff09"},"content":{"rendered":"<p>\u672c\u7bc7\u6587\u7ae0\u7ed9\u5927\u5bb6\u603b\u7ed3\u4e0b\u4e4b\u524d\u5f00\u53d1\u5c0f\u7a0b\u5e8f\u7684\u65f6\u5019\u9047\u5230\u8fc7\u4e00\u4e9b\u95ee\u9898\uff0c\u5e76\u5c06\u89e3\u51b3\u65b9\u6848\u5206\u4eab\u7ed9\u5927\u5bb6\uff0c\u5e0c\u671b\u5bf9\u5927\u5bb6\u6709\u6240\u5e2e\u52a9\uff01<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/img.php.cn\/upload\/article\/000\/000\/024\/6201cf86ade6b983.jpg\" class=\"aligncenter\" title=\"\u603b\u7ed3\u5206\u4eab\u4e00\u4e9b\u5c0f\u7a0b\u5e8f\u5f00\u53d1\u4e2d\u9047\u5230\u7684\u95ee\u9898\uff08\u5e2e\u5fd9\u907f\u5751\uff09\u63d2\u56fe\" alt=\"\u603b\u7ed3\u5206\u4eab\u4e00\u4e9b\u5c0f\u7a0b\u5e8f\u5f00\u53d1\u4e2d\u9047\u5230\u7684\u95ee\u9898\uff08\u5e2e\u5fd9\u907f\u5751\uff09\u63d2\u56fe\" \/><\/p>\n<blockquote><p>\n  \u8bf7\u4ee5\u5c0f\u7a0b\u5e8f\u6700\u65b0\u6587\u6863\u4e3a\u51c6\uff5e\uff1ahttps:\/\/developers.weixin.qq.com\/ebook?action=get_post_info&amp;docid=0008aeea9a8978ab0086a685851c0a&amp;highline=webview\n<\/p><\/blockquote>\n<p><span style=\"font-size: 18px\"><strong>\u6e32\u67d3\u5217\u8868\u65f6\u7528 <\/strong><strong>block \u5305\u88f9<\/strong><\/span><\/p>\n<pre>&lt;block&gt;\n&nbsp;&nbsp;&lt;view&gt;&nbsp;{{index}}:&nbsp;&lt;\/view&gt;\n&nbsp;&nbsp;&lt;view&gt;&nbsp;{{item}}&nbsp;&lt;\/view&gt;&lt;\/block&gt;<\/pre>\n<p> \u767b\u5f55\u540e\u590d\u5236 <\/p>\n<p>block \u4e0d\u4f1a\u771f\u5b9e\u6e32\u67d3\u5230\u9875\u9762\u4e0a\uff0c\u53ea\u4f5c\u4e3a\u4e00\u4e2a\u5305\u88f9\u5143\u7d20\uff0c\u63a5\u53d7\u63a7\u5236\u5c5e\u6027<\/p>\n<p><strong><span style=\"font-size: 18px\">\u5199\u4e00\u4e2a\u81ea\u5b9a\u4e49\u7ec4\u4ef6<\/span><\/strong><\/p>\n<p><strong>\u81ea\u5b9a\u4e49\u7ec4\u4ef6\u5206\u4e3a 4 \u90e8\u5206<\/strong><\/p>\n<ul>\n<li>\n<p>properties \u7ec4\u4ef6\u63a5\u6536\u7684\u5c5e\u6027<\/p>\n<\/li>\n<\/ul>\n<pre>properties:&nbsp;{\n&nbsp;&nbsp;\/\/&nbsp;\u8f93\u5165\u6846\u7684\u9ed8\u8ba4\u63d0\u793a\n&nbsp;&nbsp;placeholder:&nbsp;{\n\ttype:&nbsp;String,&nbsp;&nbsp;\/\/&nbsp;\u5c5e\u6027\u503c\u7684\u7c7b\u578b\n\tvalue:&nbsp;''&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;\/\/&nbsp;\u5c5e\u6027\u9ed8\u8ba4\u503c\n&nbsp;&nbsp;}\n},<\/pre>\n<p> \u767b\u5f55\u540e\u590d\u5236 <\/p>\n<ul>\n<li>\n<p>data \u7ec4\u4ef6\u6570\u636e<\/p>\n<\/li>\n<li>\n<p>methods \u7ec4\u4ef6\u65b9\u6cd5\uff0c\u4e00\u822c\u5185\u90e8\u65b9\u6cd5\u7528_\u5f00\u5934<\/p>\n<\/li>\n<li>\n<p>\u7ec4\u4ef6\u7684\u751f\u547d\u5468\u671f\u51fd\u6570\uff0c\u4e00\u822c\u4f7f\u7528 ready\uff0c\u5728\u7ec4\u4ef6\u5e03\u5c40\u5b8c\u6210\u540e\u6267\u884c\uff0c\u6b64\u65f6\u53ef\u4ee5\u83b7\u53d6\u8282\u70b9\u4fe1\u606f\uff08\u4f7f\u7528  \uff09<\/p>\n<\/li>\n<\/ul>\n<p><strong>\u8c03\u7528\u7236\u7ec4\u4ef6\u4f20\u5165\u7684\u65b9\u6cd5<\/strong><\/p>\n<pre>\/\/&nbsp;\u5b50\u7ec4\u4ef6\nvar&nbsp;myEventDetail&nbsp;=&nbsp;{value:&nbsp;''};&nbsp;\/\/&nbsp;detail\u5bf9\u8c61\uff0c\u63d0\u4f9b\u7ed9\u4e8b\u4ef6\u76d1\u542c\u51fd\u6570\uff0c\u5199\u9700\u8981\u4f20\u7ed9\u5916\u9762\u7684\u6570\u636e\nvar&nbsp;myEventOption&nbsp;=&nbsp;{}&nbsp;\/\/&nbsp;\u89e6\u53d1\u4e8b\u4ef6\u7684\u9009\u9879\nthis.triggerEvent('onclear',&nbsp;myEventDetail,&nbsp;myEventOption)<\/pre>\n<p> \u767b\u5f55\u540e\u590d\u5236 <\/p>\n<pre>&lt;!-- \u7236\u7ec4\u4ef6 --&gt;\n&lt;searchbar&gt;&lt;\/searchbar&gt;&lt;!-- \u50cf\u7ed1\u5b9a bindtap \u4e00\u6837\u7ed1\u5b9a\u81ea\u5b9a\u4e49\u51fd\u6570 --&gt;<\/pre>\n<p> \u767b\u5f55\u540e\u590d\u5236 <\/p>\n<pre>\/\/&nbsp;\u7236\u7ec4\u4ef6\nonSearch(e){\n&nbsp;&nbsp;console.log(e.detail.value)\n}<\/pre>\n<p> \u767b\u5f55\u540e\u590d\u5236 <\/p>\n<p><strong>\u7236\u7ec4\u4ef6\u76f4\u63a5\u8c03\u7528\u5b50\u7ec4\u4ef6\u7684\u65b9\u6cd5<\/strong><\/p>\n<pre>\/\/&nbsp;\u7236\u7ec4\u4ef6\uff0c\u4f7f\u7528&nbsp;selectComponent&nbsp;\u62ff\u5230\u5b50\u7ec4\u4ef6\u7684\u5b9e\u4f8b\uff0c\u76f4\u63a5\u8c03\u7528\u5176\u4e2d\u7684\u65b9\u6cd5\nlet&nbsp;searchBar&nbsp;=&nbsp;this.selectComponent('#search-bar');\nsearchBar.setData({&nbsp;value:&nbsp;e.currentTarget.dataset.name&nbsp;})\nsearchBar.onClickSearch({&nbsp;detail:&nbsp;{value:&nbsp;e.currentTarget.dataset.name}});<\/pre>\n<p> \u767b\u5f55\u540e\u590d\u5236 <\/p>\n<p><strong>\u5b50\u7ec4\u4ef6\u4e2d\u83b7\u53d6 dom \u5bbd\u9ad8<\/strong><\/p>\n<pre>\/\/&nbsp;\u83b7\u53d6\u5c4f\u5e55\u5bbd\u5ea6\nlet&nbsp;windowWidth&nbsp;=&nbsp;wx.getSystemInfoSync().windowWidth\n\/\/&nbsp;\u5728\u7ec4\u4ef6\u5185\u90e8\u9700\u8981\u5199&nbsp;this\nlet&nbsp;query&nbsp;=&nbsp;wx.createSelectorQuery().in(this);\nlet&nbsp;that&nbsp;=&nbsp;this;\nquery.selectAll('.tagItem').boundingClientRect()\nquery.exec(function&nbsp;(res)&nbsp;{\n\tlet&nbsp;allWidth&nbsp;=&nbsp;0;\n\tres[0].map(item=&amp;gt;{\n\t\tallWidth&nbsp;=&nbsp;allWidth&nbsp;+&nbsp;item.width\n\t\treturn&nbsp;allWidth\n\t})\n\tlet&nbsp;length&nbsp;=&nbsp;res[0].length\n\tlet&nbsp;ratioWidth&nbsp;=&nbsp;allWidth&nbsp;\/&nbsp;windowWidth\n\tthat.setData({\n\t\tallLength:&nbsp;length,\n\t\tiphone:&nbsp;ratioWidth&nbsp;+&nbsp;(length&nbsp;==&nbsp;1&nbsp;?&nbsp;0&nbsp;:&nbsp;res[0].length&nbsp;*&nbsp;0.0533)\n\t})\n})<\/pre>\n<p> \u767b\u5f55\u540e\u590d\u5236 <\/p>\n<p><strong><span style=\"font-size: 18px\">\u9875\u9762\u8fd4\u56de\u65f6\u4e0d\u4f1a\u8c03\u7528 onLoad<\/span><\/strong><\/p>\n<p>\u4e4b\u524d\u628a\u8c03\u7528\u63a5\u53e3\u7684\u90e8\u5206\u5199\u5230\u4e86onLoad\u91cc\uff0c\u4ece\u6587\u7ae0\u5217\u8868\u8fdb\u5165\u8be6\u60c5\u9875\uff0c\u5728\u4ece\u8be6\u60c5\u9875\u70b9\u51fb\u5de6\u4e0a\u89d2\u56de\u9000\u8fd4\u56de\u5217\u8868\u9875\uff0c\u5217\u8868\u9875\u7684\u9605\u8bfb\u6570\u5e94\u8be5\u66f4\u65b0\uff0c\u4f46\u662f\u6ca1\u6709\u66f4\u65b0\uff0c\u56e0\u4e3a\u6ca1\u6709\u91cd\u65b0\u8c03\u6587\u7ae0\u5217\u8868\u63a5\u53e3\u3002<\/p>\n<p>\u6240\u4ee5\u628a\u8c03\u6587\u7ae0\u5217\u8868\u63a5\u53e3\u7684\u90e8\u5206\u5199\u597d\u4e86onShow\u91cc\u3002<\/p>\n<p><strong><span style=\"font-size: 18px\">\u81ea\u5b9a\u4e49 tabbar \u4f18\u5316<\/span><\/strong><\/p>\n<p>\u7b2c\u4e00\u6b21\u4f18\u5316\uff0c\u5c06\u7ec4\u4ef6\u5c01\u88c5\u7684tabbar\u6539\u6210\u9875\u9762\u7684\u6a21\u7248\u5f62\u5f0f<\/p>\n<p>1\u3001\u4e4b\u524d\u7528\u7ec4\u4ef6\u7684\u5f62\u5f0f\u5199\u7684\uff0c\u6539\u4e3a\u4e86 template\uff1btabbar \u4e0a\u7684\u56fe\u6807\u90fd\u6539\u6210\u7684 iconfont\uff0c\u89e3\u51b3\u70b9\u51fb tabbar \u65f6\u5019\u4f1a\u95ea\u7684\u95ee\u9898<\/p>\n<pre>&lt;template&gt;&lt;view&gt;&lt;block&gt;&lt;navigator&gt;&lt;view&gt;&lt;text&gt;&lt;\/text&gt;{{item.text}}&lt;text&gt;{{tabbar.num&nbsp;&amp;gt;&nbsp;99&nbsp;?&nbsp;'99+'&nbsp;:&nbsp;tabbar.num}}&lt;\/text&gt;&lt;\/view&gt;&lt;\/navigator&gt;&lt;\/block&gt;&lt;\/view&gt;&lt;\/template&gt;<\/pre>\n<p> \u767b\u5f55\u540e\u590d\u5236 <\/p>\n<p>2\u3001\u70b9\u51fb tabbar \u65f6\uff0c\u9700\u8981\u9500\u6bc1\u4e4b\u524d\u7684\u9875\u9762\uff0c\u5728\u8df3\u5230\u9700\u8981\u8df3\u8f6c\u7684\u9875\u9762\uff0c\u6240\u4ee5\u5728 navigator \u7ec4\u4ef6\u7528\u4e86 reLaunch<\/p>\n<p>\u7b2c\u4e8c\u6b21\u4f18\u5316\uff0c\u5c06\u5e26\u6709tabbar\u7684\u9875\u9762\u90fd\u5c01\u88c5\u6210\u7ec4\u4ef6\u5199\u5728\u9875\u9762\uff0c\u5728\u9875\u9762\u4e2dsetData\u5207\u6362tab<\/p>\n<pre>&lt;homepage&gt;&lt;\/homepage&gt;&lt;articlelibrarypage&gt;&lt;\/articlelibrarypage&gt;&lt;doclistpage&gt;&lt;\/doclistpage&gt;&lt;mepage&gt;&lt;\/mepage&gt;&lt;tabbar&gt;&lt;\/tabbar&gt;<\/pre>\n<p> \u767b\u5f55\u540e\u590d\u5236 <\/p>\n<p>\u4fee\u6539\u7684\u5730\u65b9\uff1a<\/p>\n<ul>\n<li>\n<p>\u5e26\u6709tabbar\u7684\u9875\u9762\u90fd\u91cd\u5199\u4e3a\u7ec4\u4ef6\u5f62\u5f0f<\/p>\n<\/li>\n<li>\n<p>\u56e0\u4e3a\u7ec4\u4ef6\u4e2d\u53ea\u6709\u6302\u8f7d\u5b8c\u6210\u540e\u7684 ready \u65b9\u6cd5\uff0c\u6240\u4ee5\u4e4b\u524d\u9875\u9762\u4e2d onShow\uff0conReachBottom\uff0conPullDownRefresh \u90fd\u653e\u5230\u7236\u9875\u9762\u8c03\u7528<\/p>\n<\/li>\n<\/ul>\n<pre>onPullDownRefresh:&nbsp;function&nbsp;()&nbsp;{\n\tif&nbsp;(this.data.tabbarID&nbsp;===&nbsp;this.data.tabbarList.article)&nbsp;{\n\t&nbsp;&nbsp;\/\/&nbsp;\u4f7f\u7528&nbsp;selectComponent&nbsp;\u627e\u5230\u7ec4\u4ef6\u5b9e\u4f8b\uff0c\u8c03\u7528\u5185\u90e8\u65b9\u6cd5\n\t&nbsp;&nbsp;let&nbsp;articlePage&nbsp;=&nbsp;this.selectComponent('#article-page');\n\t&nbsp;&nbsp;articlePage.onPullDownRefresh();\n\t}&nbsp;else&nbsp;if&nbsp;(this.data.tabbarID&nbsp;===&nbsp;this.data.tabbarList.doctor){\n\t&nbsp;&nbsp;let&nbsp;doctorPage&nbsp;=&nbsp;this.selectComponent('#doctor-page');\n\t&nbsp;&nbsp;doctorPage.onPullDownRefresh();\n\t}&nbsp;else&nbsp;{\n\t&nbsp;&nbsp;wx.stopPullDownRefresh();\n\t}\n},<\/pre>\n<p> \u767b\u5f55\u540e\u590d\u5236 <\/p>\n<p>\u5e26\u6765\u7684\u95ee\u9898\uff1a<\/p>\n<ul>\n<li>\n<p>\u6bcf\u4e2atabbar\u90fd\u4f1a\u6709\u4e0b\u62c9\u5237\u65b0\u7684\u6548\u679c\uff0c\u5373\u4f7f\u4e0d\u9700\u8981\u4e0b\u62c9\u5237\u65b0<\/p>\n<\/li>\n<li>\n<p>\u4ece\u5176\u4ed6\u9875\u9762\u70b9\u51fb\u6309\u94ae\uff0c\u76f4\u63a5\u8df3\u5230\u9996\u9875\u7684\u67d0\u4e00\u4e2atab\u5361\uff0c\u53ef\u80fd\u4f1a\u6709\u95ee\u9898<\/p>\n<\/li>\n<\/ul>\n<p><strong><span style=\"font-size: 18px\">\u4f7f\u7528 iconfont<\/span><\/strong><\/p>\n<p>https:\/\/www.jianshu.com\/p\/1cfc074eeb75<\/p>\n<ul>\n<li>\n<p>\u767b\u5f55 iconfont.cn \u4e0b\u8f7d zip \u5305<\/p>\n<\/li>\n<li>\n<p>\u89e3\u538b\u7f29\uff0c\u5176\u4e2d\u7684 .ttf \u6587\u4ef6\u5728  \u4e0a\u9762\u8f6c\u6210 base64 \u683c\u5f0f<\/p>\n<\/li>\n<li>\n<p>\u5c06 style.css \u5199\u5165\u65b0\u5efa\u7684 iconfont.wxss \u4e2d\uff0c\u4e0a\u9762\u7684\u5b57\u4f53\u6587\u4ef6\u8def\u5f84\u7528\u521a\u521a\u8f6c\u597d\u7684 base64 \u66ff\u4ee3<\/p>\n<\/li>\n<li>\n<p>\u5728 app.wxss \u4e2d import iconfont.wxss<\/p>\n<\/li>\n<\/ul>\n<p>\u6ce8\u610f\uff1a\u7ec4\u4ef6\u4e2d\u7684\u6837\u5f0f\u672c\u8eab\u4e0d\u53d7 app.wxss \u5f71\u54cd\uff0c\u56e0\u6b64\uff0c\u7ec4\u4ef6\u4e2d\u9700\u8981\u4f7f\u7528 iconfont \u7684\u65f6\u5019\uff0c\u9700\u8981\u624b\u52a8\u5f15\u4e00\u4e0b app.wxss \u6216\u8005 iconfont.wxss<\/p>\n<p><strong><span style=\"font-size: 18px\">\u5217\u8868\u7684\u5de6\u6ed1\u6548\u679c<\/span><\/strong><\/p>\n<p>1\u3001\u5728\u5217\u8868\u7684\u7236\u5143\u7d20\u4e0a\u7ed1\u5b9a\u4e8b\u4ef6<\/p>\n<pre>&lt;view class=\"list-container\" wx:for=\"{{doctorList.list}}\" wx:key=\"{{index}}\"&gt;&lt;view bindtouchstart=\"'onTouchStartListItem'\" bindtouchmove=\"'onTouchMoveListItem'\" style=\"{{item.txtStyle}}\"&gt;\u6ed1\u52a8\u7684\u5185\u5bb9\n\t&lt;\/view&gt;&lt;view&gt;\u6ed1\u52a8\u540e\u663e\u793a\u7684\u6309\u94ae&lt;\/view&gt;&lt;\/view&gt;<\/pre>\n<p> \u767b\u5f55\u540e\u590d\u5236 <\/p>\n<pre>.list-container{\n\tposition:&nbsp;relative;\n\twidth:100%;\n\theight:&nbsp;224rpx;\n\toverflow:&nbsp;hidden;\n}\n.list-item{\n\tposition:&nbsp;absolute;\n\tleft:&nbsp;0;\n\tz-index:&nbsp;5;\n\ttransition:&nbsp;left&nbsp;0.2s&nbsp;ease-in-out;\n\tbackground-color:&nbsp;#fff;\n}\n.backCover{\n\tbox-sizing:&nbsp;border-box;\n\twidth:&nbsp;200rpx;\n\theight:&nbsp;218rpx;\n\tposition:&nbsp;absolute;\n\tright:&nbsp;0;\n\ttop:&nbsp;0;\n\tz-index:&nbsp;4;\n}<\/pre>\n<p> \u767b\u5f55\u540e\u590d\u5236 <\/p>\n<p>2\u3001\u901a\u8fc7\u5224\u65ad\u6ed1\u52a8\u8ddd\u79bb\u4fee\u6539\u5217\u8868\u9879\u7684 left \u503c<\/p>\n<pre>onTouchStartListItem:&nbsp;function&nbsp;(e)&nbsp;{\n\t\/\/&nbsp;\u662f\u5355\u6307\u89e6\u78b0\n\tif&nbsp;(e.touches.length&nbsp;===&nbsp;1)&nbsp;{\n\t\t\/\/&nbsp;\u8bb0\u4e0b\u89e6\u78b0\u70b9\u8ddd\u5c4f\u5e55\u8fb9\u7f18\u7684x\u8f74\u4f4d\u7f6e\n\t\tthis.setData({\n\t\t\tstartX:&nbsp;e.touches[0].clientX,\n\t\t})\n\t}\n},\n\nonTouchMoveListItem:&nbsp;function&nbsp;(e)&nbsp;{\n\tvar&nbsp;that&nbsp;=&nbsp;this\n\tif&nbsp;(e.touches.length&nbsp;==&nbsp;1)&nbsp;{\n\t\tvar&nbsp;disX&nbsp;=&nbsp;that.data.startX&nbsp;-&nbsp;e.touches[0].clientX;\n\t\tvar&nbsp;deleteBtnWidth&nbsp;=&nbsp;that.data.deleteBtnWidth;\n\t\tvar&nbsp;txtStyle&nbsp;=&nbsp;\"\";\n\t\tif&nbsp;(disX&nbsp;&nbsp;deleteBtnWidth&nbsp;\/&nbsp;2&nbsp;?&nbsp;\"left:-\"&nbsp;+&nbsp;deleteBtnWidth&nbsp;+&nbsp;\"px\"&nbsp;:&nbsp;\"left:0px\";\n\t\tvar&nbsp;index&nbsp;=&nbsp;e.currentTarget.id\n\t\tvar&nbsp;list&nbsp;=&nbsp;that.data.doctorList.list\n\t\tlist[index].txtStyle&nbsp;=&nbsp;txtStyle;\n\t\tthat.setData({\n\t\t\tdoctorList:&nbsp;{\n\t\t\t\tlist:&nbsp;list,\n\t\t\t\ttotal:&nbsp;that.data.doctorList.total\n\t\t\t}\n\t\t});\n\t}\n},<\/pre>\n<p> \u767b\u5f55\u540e\u590d\u5236 <\/p>\n<p>\u3010\u76f8\u5173\u5b66\u4e60\u63a8\u8350\uff1a\u3011<\/p>\n<p>\u4ee5\u4e0a\u5c31\u662f\u603b\u7ed3\u5206\u4eab\u4e00\u4e9b\u5c0f\u7a0b\u5e8f\u5f00\u53d1\u4e2d\u9047\u5230\u7684\u95ee\u9898\uff08\u5e2e\u5fd9\u907f\u5751\uff09\u7684\u8be6\u7ec6\u5185\u5bb9\uff0c\u66f4\u591a\u8bf7\u5173\u6ce8\u7c73\u4e91\u5176\u5b83\u76f8\u5173\u6587\u7ae0\uff01<\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u672c\u7bc7\u6587\u7ae0\u7ed9\u5927\u5bb6\u603b\u7ed3\u4e0b\u4e4b\u524d\u5f00\u53d1\u5c0f\u7a0b\u5e8f\u7684\u65f6\u5019\u9047\u5230\u8fc7\u4e00\u4e9b\u95ee\u9898\uff0c\u5e76\u5c06\u89e3\u51b3\u65b9\u6848\u5206\u4eab\u7ed9\u5927\u5bb6\uff0c\u5e0c\u671b\u5bf9\u5927\u5bb6\u6709\u6240\u5e2e\u52a9\uff01 \u8bf7\u4ee5\u5c0f\u7a0b\u5e8f\u6700\u65b0\u6587\u6863\u4e3a\u51c6\uff5e\uff1ahttps:\/\/developers.weixin.qq.com\/ebook?action=get_post_info&amp;docid=0008aeea9a8978ab0086a685851c0a&amp;highline=webview \u6e32\u67d3\u5217\u8868\u65f6\u7528 block \u5305\u88f9 &lt;block&gt; &nbsp;&nbsp;&lt;view&gt;&nbsp;{{index}}:&nbsp;&lt;\/view&gt; &nbsp;&nbsp;&lt;view&gt;&nbsp;{{item}}&nbsp;&lt;\/view&gt;&lt;\/block&gt; \u767b\u5f55\u540e\u590d\u5236 block \u4e0d\u4f1a\u771f\u5b9e\u6e32\u67d3\u5230\u9875\u9762\u4e0a\uff0c\u53ea\u4f5c\u4e3a\u4e00\u4e2a\u5305\u88f9\u5143\u7d20\uff0c\u63a5\u53d7\u63a7\u5236\u5c5e\u6027 \u5199\u4e00\u4e2a\u81ea\u5b9a\u4e49\u7ec4\u4ef6 \u81ea\u5b9a\u4e49\u7ec4\u4ef6\u5206\u4e3a 4 \u90e8\u5206 properties \u7ec4\u4ef6\u63a5\u6536\u7684\u5c5e\u6027 properties:&nbsp;{ &nbsp;&nbsp;\/\/&nbsp;\u8f93\u5165\u6846\u7684\u9ed8\u8ba4\u63d0\u793a &nbsp;&nbsp;placeholder:&nbsp;{ type:&nbsp;String,&nbsp;&nbsp;\/\/&nbsp;\u5c5e\u6027\u503c\u7684\u7c7b\u578b value:&nbsp;&#8221;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;\/\/&nbsp;\u5c5e\u6027\u9ed8\u8ba4\u503c &nbsp;&nbsp;} }, \u767b\u5f55\u540e\u590d\u5236 data \u7ec4\u4ef6\u6570\u636e methods \u7ec4\u4ef6\u65b9\u6cd5\uff0c\u4e00\u822c\u5185\u90e8\u65b9\u6cd5\u7528_\u5f00\u5934 \u7ec4\u4ef6\u7684\u751f\u547d\u5468\u671f\u51fd\u6570\uff0c\u4e00\u822c\u4f7f\u7528 ready\uff0c\u5728\u7ec4\u4ef6\u5e03\u5c40\u5b8c\u6210\u540e\u6267\u884c\uff0c\u6b64\u65f6\u53ef\u4ee5\u83b7\u53d6\u8282\u70b9\u4fe1\u606f\uff08\u4f7f\u7528 \uff09 \u8c03\u7528\u7236\u7ec4\u4ef6\u4f20\u5165\u7684\u65b9\u6cd5 \/\/&nbsp;\u5b50\u7ec4\u4ef6 var&nbsp;myEventDetail&nbsp;=&nbsp;{value:&nbsp;&#8221;};&nbsp;\/\/&nbsp;detail\u5bf9\u8c61\uff0c\u63d0\u4f9b\u7ed9\u4e8b\u4ef6\u76d1\u542c\u51fd\u6570\uff0c\u5199\u9700\u8981\u4f20\u7ed9\u5916\u9762\u7684\u6570\u636e var&nbsp;myEventOption&nbsp;=&nbsp;{}&nbsp;\/\/&nbsp;\u89e6\u53d1\u4e8b\u4ef6\u7684\u9009\u9879 this.triggerEvent(&#8216;onclear&#8217;,&nbsp;myEventDetail,&nbsp;myEventOption) \u767b\u5f55\u540e\u590d\u5236 &lt;!&#8211; \u7236\u7ec4\u4ef6 &#8211;&gt; &lt;searchbar&gt;&lt;\/searchbar&gt;&lt;!&#8211; \u50cf\u7ed1\u5b9a bindtap \u4e00\u6837\u7ed1\u5b9a\u81ea\u5b9a\u4e49\u51fd\u6570 &#8211;&gt; \u767b\u5f55\u540e\u590d\u5236 \/\/&nbsp;\u7236\u7ec4\u4ef6 onSearch(e){ &nbsp;&nbsp;console.log(e.detail.value) } \u767b\u5f55\u540e\u590d\u5236 \u7236\u7ec4\u4ef6\u76f4\u63a5\u8c03\u7528\u5b50\u7ec4\u4ef6\u7684\u65b9\u6cd5 \/\/&nbsp;\u7236\u7ec4\u4ef6\uff0c\u4f7f\u7528&nbsp;selectComponent&nbsp;\u62ff\u5230\u5b50\u7ec4\u4ef6\u7684\u5b9e\u4f8b\uff0c\u76f4\u63a5\u8c03\u7528\u5176\u4e2d\u7684\u65b9\u6cd5 let&nbsp;searchBar&nbsp;=&nbsp;this.selectComponent(&#8216;#search-bar&#8217;); [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[19],"tags":[],"class_list":["post-34218","post","type-post","status-publish","format-standard","hentry","category-19"],"_links":{"self":[{"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/posts\/34218","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/comments?post=34218"}],"version-history":[{"count":0,"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/posts\/34218\/revisions"}],"wp:attachment":[{"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/media?parent=34218"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/categories?post=34218"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/tags?post=34218"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}