{"id":32173,"date":"2024-11-25T10:36:13","date_gmt":"2024-11-25T02:36:13","guid":{"rendered":"https:\/\/fwq.ai\/blog\/32173\/"},"modified":"2024-11-25T10:36:13","modified_gmt":"2024-11-25T02:36:13","slug":"%e5%be%ae%e4%bf%a1%e5%b0%8f%e7%a8%8b%e5%ba%8f%e5%ae%9e%e7%8e%b0%e4%b8%8b%e6%8b%89%e6%a1%86%ef%bc%88%e9%99%84%e4%bb%a3%e7%a0%81%ef%bc%89","status":"publish","type":"post","link":"https:\/\/fwq.ai\/blog\/32173\/","title":{"rendered":"\u5fae\u4fe1\u5c0f\u7a0b\u5e8f\u5b9e\u73b0\u4e0b\u62c9\u6846\uff08\u9644\u4ee3\u7801\uff09"},"content":{"rendered":"<p>\u5fae\u4fe1\u5c0f\u7a0b\u5e8f\u91cc\u6ca1\u6709\u548cHTML\u91cc\u7684\u4e0b\u62c9\u6846\u4e00\u6837\u7684\u7ec4\u4ef6\uff0c\u60f3\u8981\u76f8\u540c\u7684\u6548\u679c\u53ea\u80fd\u81ea\u5df1\u5199\u4e00\u4e2a\uff0c\u5148\u770b\u6548\u679c<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/img.php.cn\/\/upload\/image\/663\/108\/582\/1533606677905742.gif\" class=\"aligncenter\" title=\"\u5fae\u4fe1\u5c0f\u7a0b\u5e8f\u5b9e\u73b0\u4e0b\u62c9\u6846\uff08\u9644\u4ee3\u7801\uff09\u63d2\u56fe\" alt=\"\u5fae\u4fe1\u5c0f\u7a0b\u5e8f\u5b9e\u73b0\u4e0b\u62c9\u6846\uff08\u9644\u4ee3\u7801\uff09\u63d2\u56fe\" \/>&nbsp;<\/p>\n<p>\u4e0b\u9762\u6765\u770b\u4e00\u4e0b\u4ee3\u7801\uff1a<\/p>\n<p>\u9996\u5148wxml<\/p>\n<pre>&lt;view&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&lt;view&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;text&gt;{{selectData[index]}}&lt;\/text&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;image&gt;&lt;\/image&gt;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;\n&nbsp;&nbsp;&nbsp;&nbsp;&lt;\/view&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&lt;view&gt;5?300:selectData.length*60):0}}rpx;'&amp;gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;text&gt;{{item}}&lt;\/text&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&lt;\/view&gt;&lt;\/view&gt;&lt;!--\n  show&amp;&amp;\"select_img_rotate\"-----\u7ed9\u663e\u793a\u6846\u53f3\u8fb9\u7684\u4e0b\u62c9\u7bad\u5934\u6dfb\u52a0\u52a8\u753b\n\n  height:{{show?(selectData.length&gt;5?300:selectData.length*60):0}}rpx;-----\u7ed9\u6539\u53d8\u4e0b\u62c9\u6846\u9ad8\u5ea6\uff0c\u5b9e\u73b0\u4e0b\u62c9\u6846\u7684\u663e\u793a\u9690\u85cf\uff0c\u6bcf\u4e2a\u4e0b\u62c9\u9009\u9879\u7684\u9ad8\u5ea6\u4e3a60\uff0c\u4e0b\u62c9\u6846\u7684\u6700\u5927\u9ad8\u5ea6\u8fd9\u91cc\u8bbe\u7f6e\u7684\u662f300\uff0c\u6240\u4ee5\u8fd9\u91cc\u5199\u6210\u5f53\u6570\u636e\u957f\u5ea6\u5927\u4e8e5\u65f6\uff0c\u4e0b\u62c9\u6846\u9ad8\u5ea6\u4e3a300\uff0c\u53cd\u4e4b\u4e0b\u62c9\u6846\u9ad8\u5ea6\u4e3a\u6570\u636e\u957f\u5ea6\u4e58\u4ee560\n\n  index==selectData.length-1&amp;&amp;\"border:0;\"-----\u53d6\u6d88\u4e0b\u62c9\u9009\u9879\u7684\u6700\u540e\u4e00\u4e2a\u7684\u4e0b\u8fb9\u6846\n  --&gt;<\/pre>\n<p> \u767b\u5f55\u540e\u590d\u5236 <\/p>\n<p>\u7136\u540eWXSS\uff08\u5982\u679c\u4e0d\u60f3\u8981\u52a8\u753b\uff0c\u5220\u6389wxss\u91cc\u7684transition:transform 0.3s;\u548ctransition: height 0.3s;\u5373\u53ef\uff09<\/p>\n<pre>page{\n&nbsp;&nbsp;background:&nbsp;#f3f7f7;\n}\n.select_box{\n&nbsp;&nbsp;background:&nbsp;#fff;\n&nbsp;&nbsp;width:&nbsp;80%;\n&nbsp;&nbsp;margin:&nbsp;30rpx&nbsp;auto;\n&nbsp;&nbsp;position:&nbsp;relative;\n}\n.select{\n&nbsp;&nbsp;box-sizing:&nbsp;border-box;\n&nbsp;&nbsp;width:&nbsp;100%;\n&nbsp;&nbsp;height:&nbsp;70rpx;\n&nbsp;&nbsp;border:1px&nbsp;solid&nbsp;#efefef;\n&nbsp;&nbsp;border-radius:&nbsp;8rpx;\n&nbsp;&nbsp;display:&nbsp;flex;\n&nbsp;&nbsp;align-items:&nbsp;center;\n&nbsp;&nbsp;padding:&nbsp;0&nbsp;20rpx;\n}\n.select_text{\n&nbsp;&nbsp;font-size:&nbsp;30rpx;\n&nbsp;&nbsp;flex:&nbsp;1;\n}\n.select_img{\n&nbsp;&nbsp;width:&nbsp;40rpx;\n&nbsp;&nbsp;height:&nbsp;40rpx;\n&nbsp;&nbsp;display:&nbsp;block;\n&nbsp;&nbsp;transition:transform&nbsp;0.3s;\n}\n.select_img_rotate{\n&nbsp;&nbsp;transform:rotate(180deg);&nbsp;\n}\n.option_box{\n&nbsp;&nbsp;position:&nbsp;absolute;\n&nbsp;&nbsp;top:&nbsp;70rpx;\n&nbsp;&nbsp;width:&nbsp;100%;\n&nbsp;&nbsp;border:1px&nbsp;solid&nbsp;#efefef;\n&nbsp;&nbsp;box-sizing:&nbsp;border-box;\n&nbsp;&nbsp;height:&nbsp;0;\n&nbsp;&nbsp;overflow-y:&nbsp;auto;\n&nbsp;&nbsp;border-top:&nbsp;0;\n&nbsp;&nbsp;background:&nbsp;#fff;\n&nbsp;&nbsp;transition:&nbsp;height&nbsp;0.3s;\n}\n.option{\n&nbsp;&nbsp;display:&nbsp;block;\n&nbsp;&nbsp;line-height:&nbsp;40rpx;\n&nbsp;&nbsp;font-size:&nbsp;30rpx;\n&nbsp;&nbsp;border-bottom:&nbsp;1px&nbsp;solid&nbsp;#efefef;\n&nbsp;&nbsp;padding:&nbsp;10rpx;\n}<\/pre>\n<p> \u767b\u5f55\u540e\u590d\u5236 <\/p>\n<p>\u8fd9\u91cc\u662fJS<\/p>\n<pre>Page({\n\n&nbsp;&nbsp;data:&nbsp;{\n&nbsp;&nbsp;&nbsp;&nbsp;show:false,\/\/\u63a7\u5236\u4e0b\u62c9\u5217\u8868\u7684\u663e\u793a\u9690\u85cf\uff0cfalse\u9690\u85cf\u3001true\u663e\u793a\n&nbsp;&nbsp;&nbsp;&nbsp;selectData:['1','2','3','4','5','6'],\/\/\u4e0b\u62c9\u5217\u8868\u7684\u6570\u636e\n&nbsp;&nbsp;&nbsp;&nbsp;index:0\/\/\u9009\u62e9\u7684\u4e0b\u62c9\u5217\u8868\u4e0b\u6807\n&nbsp;&nbsp;},\n&nbsp;&nbsp;\/\/&nbsp;\u70b9\u51fb\u4e0b\u62c9\u663e\u793a\u6846\n&nbsp;&nbsp;selectTap(){\n&nbsp;&nbsp;&nbsp;&nbsp;this.setData({\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;show:&nbsp;!this.data.show\n&nbsp;&nbsp;&nbsp;&nbsp;});\n&nbsp;&nbsp;},\n&nbsp;&nbsp;\/\/&nbsp;\u70b9\u51fb\u4e0b\u62c9\u5217\u8868\n&nbsp;&nbsp;optionTap(e){\n&nbsp;&nbsp;&nbsp;&nbsp;let&nbsp;Index=e.currentTarget.dataset.index;\/\/\u83b7\u53d6\u70b9\u51fb\u7684\u4e0b\u62c9\u5217\u8868\u7684\u4e0b\u6807\n&nbsp;&nbsp;&nbsp;&nbsp;this.setData({\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;index:Index,\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;show:!this.data.show\n&nbsp;&nbsp;&nbsp;&nbsp;});\n&nbsp;&nbsp;},\n&nbsp;&nbsp;onLoad:&nbsp;function&nbsp;(options)&nbsp;{\n&nbsp;&nbsp;\n&nbsp;&nbsp;}\n\n})<\/pre>\n<p> \u767b\u5f55\u540e\u590d\u5236 <\/p>\n<p>\u76f8\u5173\u63a8\u8350\uff1a<\/p>\n<\/p>\n<p>\u4ee5\u4e0a\u5c31\u662f\u5fae\u4fe1\u5c0f\u7a0b\u5e8f\u5b9e\u73b0\u4e0b\u62c9\u6846\uff08\u9644\u4ee3\u7801\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>\u5fae\u4fe1\u5c0f\u7a0b\u5e8f\u91cc\u6ca1\u6709\u548cHTML\u91cc\u7684\u4e0b\u62c9\u6846\u4e00\u6837\u7684\u7ec4\u4ef6\uff0c\u60f3\u8981\u76f8\u540c\u7684\u6548\u679c\u53ea\u80fd\u81ea\u5df1\u5199\u4e00\u4e2a\uff0c\u5148\u770b\u6548\u679c &nbsp; \u4e0b\u9762\u6765\u770b\u4e00\u4e0b\u4ee3\u7801\uff1a \u9996\u5148wxml &lt;view&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;view&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;text&gt;{{selectData[index]}}&lt;\/text&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;image&gt;&lt;\/image&gt;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&lt;\/view&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;view&gt;5?300:selectData.length*60):0}}rpx;&#8217;&amp;gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;text&gt;{{item}}&lt;\/text&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;\/view&gt;&lt;\/view&gt;&lt;!&#8211; show&amp;&amp;&#8221;select_img_rotate&#8221;&#8212;&#8211;\u7ed9\u663e\u793a\u6846\u53f3\u8fb9\u7684\u4e0b\u62c9\u7bad\u5934\u6dfb\u52a0\u52a8\u753b height:{{show?(selectData.length&gt;5?300:selectData.length*60):0}}rpx;&#8212;&#8211;\u7ed9\u6539\u53d8\u4e0b\u62c9\u6846\u9ad8\u5ea6\uff0c\u5b9e\u73b0\u4e0b\u62c9\u6846\u7684\u663e\u793a\u9690\u85cf\uff0c\u6bcf\u4e2a\u4e0b\u62c9\u9009\u9879\u7684\u9ad8\u5ea6\u4e3a60\uff0c\u4e0b\u62c9\u6846\u7684\u6700\u5927\u9ad8\u5ea6\u8fd9\u91cc\u8bbe\u7f6e\u7684\u662f300\uff0c\u6240\u4ee5\u8fd9\u91cc\u5199\u6210\u5f53\u6570\u636e\u957f\u5ea6\u5927\u4e8e5\u65f6\uff0c\u4e0b\u62c9\u6846\u9ad8\u5ea6\u4e3a300\uff0c\u53cd\u4e4b\u4e0b\u62c9\u6846\u9ad8\u5ea6\u4e3a\u6570\u636e\u957f\u5ea6\u4e58\u4ee560 index==selectData.length-1&amp;&amp;&#8221;border:0;&#8221;&#8212;&#8211;\u53d6\u6d88\u4e0b\u62c9\u9009\u9879\u7684\u6700\u540e\u4e00\u4e2a\u7684\u4e0b\u8fb9\u6846 &#8211;&gt; \u767b\u5f55\u540e\u590d\u5236 \u7136\u540eWXSS\uff08\u5982\u679c\u4e0d\u60f3\u8981\u52a8\u753b\uff0c\u5220\u6389wxss\u91cc\u7684transition:transform 0.3s;\u548ctransition: height 0.3s;\u5373\u53ef\uff09 page{ &nbsp;&nbsp;background:&nbsp;#f3f7f7; } .select_box{ &nbsp;&nbsp;background:&nbsp;#fff; &nbsp;&nbsp;width:&nbsp;80%; &nbsp;&nbsp;margin:&nbsp;30rpx&nbsp;auto; &nbsp;&nbsp;position:&nbsp;relative; } .select{ &nbsp;&nbsp;box-sizing:&nbsp;border-box; &nbsp;&nbsp;width:&nbsp;100%; &nbsp;&nbsp;height:&nbsp;70rpx; &nbsp;&nbsp;border:1px&nbsp;solid&nbsp;#efefef; &nbsp;&nbsp;border-radius:&nbsp;8rpx; &nbsp;&nbsp;display:&nbsp;flex; &nbsp;&nbsp;align-items:&nbsp;center; &nbsp;&nbsp;padding:&nbsp;0&nbsp;20rpx; } .select_text{ &nbsp;&nbsp;font-size:&nbsp;30rpx; &nbsp;&nbsp;flex:&nbsp;1; } .select_img{ &nbsp;&nbsp;width:&nbsp;40rpx; &nbsp;&nbsp;height:&nbsp;40rpx; &nbsp;&nbsp;display:&nbsp;block; &nbsp;&nbsp;transition:transform&nbsp;0.3s; } .select_img_rotate{ &nbsp;&nbsp;transform:rotate(180deg);&nbsp; } .option_box{ &nbsp;&nbsp;position:&nbsp;absolute; [&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-32173","post","type-post","status-publish","format-standard","hentry","category-19"],"_links":{"self":[{"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/posts\/32173","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=32173"}],"version-history":[{"count":0,"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/posts\/32173\/revisions"}],"wp:attachment":[{"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/media?parent=32173"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/categories?post=32173"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/tags?post=32173"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}