{"id":29700,"date":"2024-11-25T09:21:51","date_gmt":"2024-11-25T01:21:51","guid":{"rendered":"https:\/\/fwq.ai\/blog\/29700\/"},"modified":"2024-11-25T09:21:51","modified_gmt":"2024-11-25T01:21:51","slug":"%e5%be%ae%e4%bf%a1%e5%b0%8f%e7%a8%8b%e5%ba%8f%e4%b9%8b%e8%87%aa%e5%ae%9a%e4%b9%89%e6%8a%bd%e5%b1%89%e8%8f%9c%e5%8d%95%e5%ae%9e%e4%be%8b%e8%af%a6%e8%a7%a3","status":"publish","type":"post","link":"https:\/\/fwq.ai\/blog\/29700\/","title":{"rendered":"\u5fae\u4fe1\u5c0f\u7a0b\u5e8f\u4e4b\u81ea\u5b9a\u4e49\u62bd\u5c49\u83dc\u5355\u5b9e\u4f8b\u8be6\u89e3"},"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\u62bd\u5c49\u83dc\u5355\u6548\u679c\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

\u5fae\u4fe1\u63d0\u4f9b\u4e86\u52a8\u753bapi\uff0c\u5c31\u662f\u4e0b\u9762\u8fd9\u4e2a<\/p>\n

\"\u5fae\u4fe1\u5c0f\u7a0b\u5e8f\u4e4b\u81ea\u5b9a\u4e49\u62bd\u5c49\u83dc\u5355\u5b9e\u4f8b\u8be6\u89e3\u63d2\u56fe\"<\/p>\n

\u901a\u8fc7\u4f7f\u7528\u8fd9\u4e2a\u521b\u5efa\u52a8\u753b\u7684api\uff0c\u53ef\u4ee5\u505a\u51fa\u5f88\u591a\u7279\u6548\u51fa\u6765<\/p>\n

\u4e0b\u9762\u4ecb\u7ecd\u4e00\u4e2a\u62bd\u5c49\u83dc\u5355\u7684\u6848\u4f8b<\/p>\n

\u5b9e\u73b0\u4ee3\u7801\uff1a
wxml\uff1a<\/p>\n

<\/p>\n

<!--button--> \r\n<view>button<\/view> \r\n<!--mask--> \r\n<view><\/view> \r\n<!--content--> \r\n<!--\u4f7f\u7528animation\u5c5e\u6027\u6307\u5b9a\u9700\u8981\u6267\u884c\u7684\u52a8\u753b--> \r\n<view> \r\n <!--drawer content--> \r\n <view> \r\n <view>\u83dc\u53551<\/view> \r\n <view>\u83dc\u53552<\/view> \r\n <view>\u83dc\u53553<\/view> \r\n <view>\u83dc\u53554<\/view> \r\n <view>\u83dc\u53555<\/view> \r\n <\/view> \r\n<\/view><\/pre>\n
  \u767b\u5f55\u540e\u590d\u5236   <\/p>\n
wxss\uff1a<\/p>\n
<\/p>\n
\/*button*\/ \r\n.btn { \r\n width: 80%; \r\n padding: 20rpx 0; \r\n border-radius: 10rpx; \r\n text-align: center; \r\n margin: 40rpx 10%; \r\n background: #0C1939; \r\n color: #fff; \r\n} \r\n\/*mask*\/ \r\n.drawer_screen { \r\n width: 100%; \r\n height: 100%; \r\n position: fixed; \r\n top: 0; \r\n left: 0; \r\n z-index: 1000; \r\n background: #000; \r\n opacity: 0.2; \r\n overflow: hidden; \r\n} \r\n\/*content*\/ \r\n.drawer_attr_box { \r\n width: 100%; \r\n overflow: hidden; \r\n position: fixed; \r\n bottom: 0; \r\n left: 0; \r\n z-index: 1001; \r\n background: #fff; \r\n} \r\n.drawer_content { \r\n padding: 20rpx 40rpx; \r\n height: 470rpx; \r\n overflow-y: scroll; \r\n} \r\n.drawer_title{ \r\n padding:20rpx; \r\n font:42rpx \"microsoft yahei\"; \r\n text-align: center; \r\n} \r\n.line{ \r\n border-bottom: 1px solid #f8f8f8; \r\n}<\/pre>\n
  \u767b\u5f55\u540e\u590d\u5236   <\/p>\n
js\uff1a<\/p>\n
<\/p>\n
Page({ \r\n data: { \r\n showModalStatus: false \r\n }, \r\n powerDrawer: function (e) { \r\n var currentStatu = e.currentTarget.dataset.statu; \r\n this.util(currentStatu) \r\n }, \r\n util: function(currentStatu){ \r\n \/* \u52a8\u753b\u90e8\u5206 *\/ \r\n \/\/ \u7b2c1\u6b65\uff1a\u521b\u5efa\u52a8\u753b\u5b9e\u4f8b \r\n var animation = wx.createAnimation({ \r\n  duration: 200, \/\/\u52a8\u753b\u65f6\u957f \r\n  timingFunction: \"linear\", \/\/\u7ebf\u6027 \r\n  delay: 0 \/\/0\u5219\u4e0d\u5ef6\u8fdf \r\n }); \r\n  \r\n \/\/ \u7b2c2\u6b65\uff1a\u8fd9\u4e2a\u52a8\u753b\u5b9e\u4f8b\u8d4b\u7ed9\u5f53\u524d\u7684\u52a8\u753b\u5b9e\u4f8b \r\n this.animation = animation; \r\n \r\n \/\/ \u7b2c3\u6b65\uff1a\u6267\u884c\u7b2c\u4e00\u7ec4\u52a8\u753b\uff1aY\u8f74\u504f\u79fb240px\u540e(\u76d2\u5b50\u9ad8\u5ea6\u662f240px)\uff0c\u505c \r\n animation.translateY(240).step(); \r\n \r\n \/\/ \u7b2c4\u6b65\uff1a\u5bfc\u51fa\u52a8\u753b\u5bf9\u8c61\u8d4b\u7ed9\u6570\u636e\u5bf9\u8c61\u50a8\u5b58 \r\n this.setData({ \r\n  animationData: animation.export() \r\n }) \r\n  \r\n \/\/ \u7b2c5\u6b65\uff1a\u8bbe\u7f6e\u5b9a\u65f6\u5668\u5230\u6307\u5b9a\u65f6\u5019\u540e\uff0c\u6267\u884c\u7b2c\u4e8c\u7ec4\u52a8\u753b \r\n setTimeout(function () { \r\n  \/\/ \u6267\u884c\u7b2c\u4e8c\u7ec4\u52a8\u753b\uff1aY\u8f74\u4e0d\u504f\u79fb\uff0c\u505c \r\n  animation.translateY(0).step() \r\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 \r\n  this.setData({ \r\n  animationData: animation \r\n  }) \r\n  \r\n  \/\/\u5173\u95ed\u62bd\u5c49 \r\n  if (currentStatu == \"close\") { \r\n  this.setData( \r\n   { \r\n   showModalStatus: false \r\n   } \r\n  ); \r\n  } \r\n }.bind(this), 200) \r\n \r\n \/\/ \u663e\u793a\u62bd\u5c49 \r\n if (currentStatu == \"open\") { \r\n  this.setData( \r\n  { \r\n   showModalStatus: true \r\n  } \r\n  ); \r\n } \r\n } \r\n})<\/pre>\n
  \u767b\u5f55\u540e\u590d\u5236   <\/p>\n
\"\u5fae\u4fe1\u5c0f\u7a0b\u5e8f\u4e4b\u81ea\u5b9a\u4e49\u62bd\u5c49\u83dc\u5355\u5b9e\u4f8b\u8be6\u89e3\u63d2\u56fe1\"<\/p>\n
\u4ee5\u4e0a\u5c31\u662f\u5fae\u4fe1\u5c0f\u7a0b\u5e8f\u4e4b\u81ea\u5b9a\u4e49\u62bd\u5c49\u83dc\u5355\u5b9e\u4f8b\u8be6\u89e3\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\u62bd\u5c49\u83dc\u5355\u6548\u679c\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 \u5fae\u4fe1\u63d0\u4f9b\u4e86\u52a8\u753bapi\uff0c\u5c31\u662f\u4e0b\u9762\u8fd9\u4e2a \u901a\u8fc7\u4f7f\u7528\u8fd9\u4e2a\u521b\u5efa\u52a8\u753b\u7684api\uff0c\u53ef\u4ee5\u505a\u51fa\u5f88\u591a\u7279\u6548\u51fa\u6765 \u4e0b\u9762\u4ecb\u7ecd\u4e00\u4e2a\u62bd\u5c49\u83dc\u5355\u7684\u6848\u4f8b \u5b9e\u73b0\u4ee3\u7801\uff1awxml\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>   <view>\u83dc\u53551<\/view>   <view>\u83dc\u53552<\/view>   <view>\u83dc\u53553<\/view>   <view>\u83dc\u53554<\/view>   <view>\u83dc\u53555<\/view>   <\/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: #0C1939;   color: #fff;  }  \/*mask*\/  .drawer_screen {   width: 100%;   height: 100%;   position: fixed;   top: 0;   left: 0;   z-index: 1000;   background: #000;   opacity: 0.2;   overflow: hidden;  }  \/*content*\/  .drawer_attr_box {   width: 100%;   overflow: hidden;   position: fixed;   bottom: 0;   left: 0;   z-index: 1001;   background: #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-29700","post","type-post","status-publish","format-standard","hentry","category-19"],"_links":{"self":[{"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/posts\/29700","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=29700"}],"version-history":[{"count":0,"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/posts\/29700\/revisions"}],"wp:attachment":[{"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/media?parent=29700"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/categories?post=29700"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/tags?post=29700"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}