{"id":31901,"date":"2024-11-25T11:06:26","date_gmt":"2024-11-25T03:06:26","guid":{"rendered":"https:\/\/fwq.ai\/blog\/31901\/"},"modified":"2024-11-25T11:06:26","modified_gmt":"2024-11-25T03:06:26","slug":"%e5%be%ae%e4%bf%a1%e5%b0%8f%e7%a8%8b%e5%ba%8f%e7%9a%84%e8%87%aa%e5%ae%9a%e4%b9%89%e6%a8%a1%e6%80%81%e5%bc%b9%e7%aa%97%e7%9a%84%e4%bb%8b%e7%bb%8d","status":"publish","type":"post","link":"https:\/\/fwq.ai\/blog\/31901\/","title":{"rendered":"\u5fae\u4fe1\u5c0f\u7a0b\u5e8f\u7684\u81ea\u5b9a\u4e49\u6a21\u6001\u5f39\u7a97\u7684\u4ecb\u7ecd"},"content":{"rendered":"

\u8fd9\u7bc7\u6587\u7ae0\u4e3b\u8981\u4e3a\u5927\u5bb6\u8be6\u7ec6\u4ecb\u7ecd\u4e86\u5fae\u4fe1\u5c0f\u7a0b\u5e8f\u5b9e\u6218\u4e4b\u81ea\u5b9a\u4e49\u6a21\u6001\u5f39\u7a97\uff0c\u5177\u6709\u4e00\u5b9a\u7684\u53c2\u8003\u4ef7\u503c\uff0c\u611f\u5174\u8da3\u7684\u5c0f\u4f19\u4f34\u4eec\u53ef\u4ee5\u53c2\u8003\u4e00\u4e0b<\/p>\n

\u9996\u5148\u770b\u770b\u5b98\u65b9\u63d0\u4f9b\u7684\u6a21\u6001\u5f39\u7a97\uff0c\u4f9b\u5927\u5bb6\u53c2\u8003\uff0c\u5177\u4f53\u5185\u5bb9\u5982\u4e0b<\/p>\n

\"\u5fae\u4fe1\u5c0f\u7a0b\u5e8f\u7684\u81ea\u5b9a\u4e49\u6a21\u6001\u5f39\u7a97\u7684\u4ecb\u7ecd\u63d2\u56fe\"<\/p>\n

api\u5982\u4e0b\uff1a<\/strong><\/p>\n

\"\u5fae\u4fe1\u5c0f\u7a0b\u5e8f\u7684\u81ea\u5b9a\u4e49\u6a21\u6001\u5f39\u7a97\u7684\u4ecb\u7ecd\u63d2\u56fe1\"<\/p>\n

\u793a\u4f8b\uff1a<\/strong><\/p>\n

\"\u5fae\u4fe1\u5c0f\u7a0b\u5e8f\u7684\u81ea\u5b9a\u4e49\u6a21\u6001\u5f39\u7a97\u7684\u4ecb\u7ecd\u63d2\u56fe2\"<\/p>\n

\u8fd9\u6837\u7684\u6a21\u6001\u5f39\u7a97\uff0c\u5145\u5176\u91cf\u53ea\u80fd\u505a\u4e2aalert\uff0c\u63d0\u793a\u4e00\u4e0b\u4fe1\u606f\u3002
\u4f46\u662f\u5e76\u4e0d\u80fd\u4f7f\u7528\u5b83\u6765\u5904\u7406\u590d\u6742\u6027\u7684\u5f39\u7a97\u4e1a\u52a1\uff0c\u56e0\u6b64\u5199\u4e86Michael\u4ece\u65b0\u81ea\u5b9a\u4e49\u4e86\u4e00\u4e2a\uff0c\u91c7\u7528\u4e86\u4eff\u539f\u751f\u7684\u6837\u5f0f\u5199\u6cd5<\/p>\n

wxml\uff1a<\/p>\n<\/p>\n

<!--button--> \n<view>button<\/view> \n \n<!--mask--> \n<view><\/view> \n<!--content--> \n<!--\u4f7f\u7528animation\u5c5e\u6027\u6307\u5b9a\u9700\u8981\u6267\u884c\u7684\u52a8\u753b--> \n<view> \n \n <!--drawer content--> \n <view>\u5f39\u7a97\u6807\u9898<\/view> \n <view> \n <view> \n <label>\u6807\u9898<\/label> \n <input> \n <\/view> \n <view> \n <label>\u6807\u9898<\/label> \n <input> \n <\/view> \n <view> \n <label>\u6807\u9898<\/label> \n <input> \n <\/view> \n <view> \n <label>\u6807\u9898<\/label> \n <input> \n <\/view> \n <view> \n <label>\u5907\u6ce8<\/label> \n <input> \n <\/view> \n <\/view> \n <view>\u786e\u5b9a<\/view> \n<\/view><\/pre>\n
 \u767b\u5f55\u540e\u590d\u5236 <\/p>\n
wxss\uff1a<\/p>\n<\/p>\n
\/*button*\/ \n.btn { \n width: 80%; \n padding: 20rpx 0; \n border-radius: 10rpx; \n text-align: center; \n margin: 40rpx 10%; \n background: #000; \n color: #fff; \n} \n \n\/*mask*\/ \n.drawer_screen { \n width: 100%; \n height: 100%; \n position: fixed; \n top: 0; \n left: 0; \n z-index: 1000; \n background: #000; \n opacity: 0.5; \n overflow: hidden; \n} \n \n\/*content*\/ \n.drawer_box { \n width: 650rpx; \n overflow: hidden; \n position: fixed; \n top: 50%; \n left: 0; \n z-index: 1001; \n background: #FAFAFA; \n margin: -150px 50rpx 0 50rpx; \n border-radius: 3px; \n} \n \n.drawer_title{ \n padding:15px; \n font: 20px \"microsoft yahei\"; \n text-align: center; \n} \n.drawer_content { \n height: 210px; \n overflow-y: scroll; \/*\u8d85\u51fa\u7236\u76d2\u5b50\u9ad8\u5ea6\u53ef\u6eda\u52a8*\/ \n} \n \n.btn_ok{ \n padding: 10px; \n font: 20px \"microsoft yahei\"; \n text-align: center; \n border-top: 1px solid #E8E8EA; \n color: #3CC51F; \n} \n \n.top{ \n padding-top:8px; \n} \n.bottom { \n padding-bottom:8px; \n} \n.title { \n height: 30px; \n line-height: 30px; \n width: 160rpx; \n text-align: center; \n display: inline-block; \n font: 300 28rpx\/30px \"microsoft yahei\"; \n} \n \n.input_base { \n border: 2rpx solid #ccc; \n padding-left: 10rpx; \n margin-right: 50rpx; \n} \n.input_h30{ \n height: 30px; \n line-height: 30px; \n} \n.input_h60{ \n height: 60px; \n} \n.input_view{ \n font: 12px \"microsoft yahei\"; \n background: #fff; \n color:#000; \n line-height: 30px; \n} \n \ninput { \n font: 12px \"microsoft yahei\"; \n background: #fff; \n color:#000 ; \n} \nradio{ \n margin-right: 20px; \n} \n.grid { display: -webkit-box; display: box; } \n.col-0 {-webkit-box-flex:0;box-flex:0;} \n.col-1 {-webkit-box-flex:1;box-flex:1;} \n.fl { float: left;} \n.fr { float: right;}<\/pre>\n
 \u767b\u5f55\u540e\u590d\u5236 <\/p>\n
js\uff1a<\/p>\n<\/p>\n
Page({ \n data: { \n showModalStatus: false \n }, \n powerDrawer: function (e) { \n var currentStatu = e.currentTarget.dataset.statu; \n this.util(currentStatu) \n }, \n util: function(currentStatu){ \n \/* \u52a8\u753b\u90e8\u5206 *\/ \n \/\/ \u7b2c1\u6b65\uff1a\u521b\u5efa\u52a8\u753b\u5b9e\u4f8b \n var animation = wx.createAnimation({ \n duration: 200, \/\/\u52a8\u753b\u65f6\u957f \n timingFunction: \"linear\", \/\/\u7ebf\u6027 \n delay: 0 \/\/0\u5219\u4e0d\u5ef6\u8fdf \n }); \n \n \/\/ \u7b2c2\u6b65\uff1a\u8fd9\u4e2a\u52a8\u753b\u5b9e\u4f8b\u8d4b\u7ed9\u5f53\u524d\u7684\u52a8\u753b\u5b9e\u4f8b \n this.animation = animation; \n \n \/\/ \u7b2c3\u6b65\uff1a\u6267\u884c\u7b2c\u4e00\u7ec4\u52a8\u753b \n animation.opacity(0).rotateX(-100).step(); \n \n \/\/ \u7b2c4\u6b65\uff1a\u5bfc\u51fa\u52a8\u753b\u5bf9\u8c61\u8d4b\u7ed9\u6570\u636e\u5bf9\u8c61\u50a8\u5b58 \n this.setData({ \n animationData: animation.export() \n }) \n \n \/\/ \u7b2c5\u6b65\uff1a\u8bbe\u7f6e\u5b9a\u65f6\u5668\u5230\u6307\u5b9a\u65f6\u5019\u540e\uff0c\u6267\u884c\u7b2c\u4e8c\u7ec4\u52a8\u753b \n setTimeout(function () { \n \/\/ \u6267\u884c\u7b2c\u4e8c\u7ec4\u52a8\u753b \n animation.opacity(1).rotateX(0).step(); \n \/\/ \u7ed9\u6570\u636e\u5bf9\u8c61\u50a8\u5b58\u7684\u7b2c\u4e00\u7ec4\u52a8\u753b\uff0c\u66f4\u66ff\u4e3a\u6267\u884c\u5b8c\u7b2c\u4e8c\u7ec4\u52a8\u753b\u7684\u52a8\u753b\u5bf9\u8c61 \n this.setData({ \n animationData: animation \n }) \n \n \/\/\u5173\u95ed \n if (currentStatu == \"close\") { \n this.setData( \n  { \n  showModalStatus: false \n  } \n ); \n } \n }.bind(this), 200) \n \n \/\/ \u663e\u793a \n if (currentStatu == \"open\") { \n this.setData( \n { \n  showModalStatus: true \n } \n ); \n } \n } \n \n})<\/pre>\n
 \u767b\u5f55\u540e\u590d\u5236 <\/p>\n
\u8fd0\u884c\uff1a<\/p>\n
\"\u5fae\u4fe1\u5c0f\u7a0b\u5e8f\u7684\u81ea\u5b9a\u4e49\u6a21\u6001\u5f39\u7a97\u7684\u4ecb\u7ecd\u63d2\u56fe3\"<\/p>\n
\u4ee5\u4e0a\u5c31\u662f\u672c\u6587\u7684\u5168\u90e8\u5185\u5bb9\uff0c\u5e0c\u671b\u5bf9\u5927\u5bb6\u7684\u5b66\u4e60\u6709\u6240\u5e2e\u52a9\uff0c\u66f4\u591a\u76f8\u5173\u5185\u5bb9\u8bf7\u5173\u6ce8PHP\u4e2d\u6587\u7f51\uff01<\/p>\n
\u76f8\u5173\u63a8\u8350\uff1a<\/p>\n
<\/p>\n
<\/p>\n<\/p>\n
<\/span><\/p>\n
\u4ee5\u4e0a\u5c31\u662f\u5fae\u4fe1\u5c0f\u7a0b\u5e8f\u7684\u81ea\u5b9a\u4e49\u6a21\u6001\u5f39\u7a97\u7684\u4ecb\u7ecd\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":"
\u8fd9\u7bc7\u6587\u7ae0\u4e3b\u8981\u4e3a\u5927\u5bb6\u8be6\u7ec6\u4ecb\u7ecd\u4e86\u5fae\u4fe1\u5c0f\u7a0b\u5e8f\u5b9e\u6218\u4e4b\u81ea\u5b9a\u4e49\u6a21\u6001\u5f39\u7a97\uff0c\u5177\u6709\u4e00\u5b9a\u7684\u53c2\u8003\u4ef7\u503c\uff0c\u611f\u5174\u8da3\u7684\u5c0f\u4f19\u4f34\u4eec\u53ef\u4ee5\u53c2\u8003\u4e00\u4e0b \u9996\u5148\u770b\u770b\u5b98\u65b9\u63d0\u4f9b\u7684\u6a21\u6001\u5f39\u7a97\uff0c\u4f9b\u5927\u5bb6\u53c2\u8003\uff0c\u5177\u4f53\u5185\u5bb9\u5982\u4e0b api\u5982\u4e0b\uff1a \u793a\u4f8b\uff1a \u8fd9\u6837\u7684\u6a21\u6001\u5f39\u7a97\uff0c\u5145\u5176\u91cf\u53ea\u80fd\u505a\u4e2aalert\uff0c\u63d0\u793a\u4e00\u4e0b\u4fe1\u606f\u3002\u4f46\u662f\u5e76\u4e0d\u80fd\u4f7f\u7528\u5b83\u6765\u5904\u7406\u590d\u6742\u6027\u7684\u5f39\u7a97\u4e1a\u52a1\uff0c\u56e0\u6b64\u5199\u4e86Michael\u4ece\u65b0\u81ea\u5b9a\u4e49\u4e86\u4e00\u4e2a\uff0c\u91c7\u7528\u4e86\u4eff\u539f\u751f\u7684\u6837\u5f0f\u5199\u6cd5 wxml\uff1a <!–button–>  <view>button<\/view>    <!–mask–>  <view><\/view>  <!–content–>  <!–\u4f7f\u7528animation\u5c5e\u6027\u6307\u5b9a\u9700\u8981\u6267\u884c\u7684\u52a8\u753b–>  <view>     <!–drawer content–>   <view>\u5f39\u7a97\u6807\u9898<\/view>   <view>   <view>   <label>\u6807\u9898<\/label>   <input>   <\/view>   <view>   <label>\u6807\u9898<\/label>   <input>   <\/view>   <view>   <label>\u6807\u9898<\/label>   <input>   <\/view>   <view>   <label>\u6807\u9898<\/label>   <input>   <\/view>   <view>   <label>\u5907\u6ce8<\/label>   <input>   <\/view>   <\/view>   <view>\u786e\u5b9a<\/view>  <\/view> \u767b\u5f55\u540e\u590d\u5236 wxss\uff1a \/*button*\/  .btn {   width: 80%;   padding: 20rpx 0;   border-radius: 10rpx;   text-align: center;   margin: 40rpx 10%;   background: #000;   color: #fff;  }    […]<\/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-31901","post","type-post","status-publish","format-standard","hentry","category-19"],"_links":{"self":[{"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/posts\/31901","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=31901"}],"version-history":[{"count":0,"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/posts\/31901\/revisions"}],"wp:attachment":[{"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/media?parent=31901"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/categories?post=31901"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/tags?post=31901"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}