{"id":29702,"date":"2024-11-25T11:25:26","date_gmt":"2024-11-25T03:25:26","guid":{"rendered":"https:\/\/fwq.ai\/blog\/29702\/"},"modified":"2024-11-25T11:25:26","modified_gmt":"2024-11-25T03:25:26","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%89toast%e5%ae%9e%e4%be%8b%e8%af%a6%e8%a7%a3","status":"publish","type":"post","link":"https:\/\/fwq.ai\/blog\/29702\/","title":{"rendered":"\u5fae\u4fe1\u5c0f\u7a0b\u5e8f\u4e4b\u81ea\u5b9a\u4e49toast\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\u4e49toast\u7684\u76f8\u5173\u65b9\u6cd5\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\u4e00\u4e2atoast\u7684api  wx.showToast()\u672c\u6765\u662f\u6bd4\u8f83\u597d\u7684\uff0c\u65b9\u4fbf\u4f7f\u7528\uff0c\u4f46\u662f\u8fd9\u4e2atoast\u4f1a\u663e\u793a\u51fa\u56fe\u6807\uff0c\u800c\u4e14\u4e0d\u80fd\u53bb\u9664\u3002<\/p>\n

\u5047\u8bbe\uff1a\u6211\u4eec\u6267\u884c\u5b8c\u4e1a\u52a1\u7684\u65f6\u5019\uff0ctoast\u4e00\u4e0b\uff0c\u5f53\u6267\u884c\u6210\u529f\u7684\u65f6\u5019\uff0c\u6548\u679c\u8fd8\u53ef\u4ee5\u63a5\u53d7\uff0c\u5982\u4e0b\u56fe\uff1a<\/p>\n

 \"\u5fae\u4fe1\u5c0f\u7a0b\u5e8f\u4e4b\u81ea\u5b9a\u4e49toast\u5b9e\u4f8b\u8be6\u89e3\u63d2\u56fe\"<\/p>\n

\u4f46\u662f\uff0c\u5f53\u6267\u884c\u5931\u8d25\u7684\u65f6\u5019\uff0c\u5982\u4e0b\u56fe\uff1a<\/p>\n

\u5931\u8d25\u4e86\uff0c\u4f60\u8fd8\u663e\u793a\u4e2a\u6263\u6263\u56fe\u6848\uff0c\u90a3\u5230\u5e95\u662f\u6210\u529f\u8fd8\u662f\u5931\u8d25\uff1f\uff1f\u8fd9\u80af\u5b9a\u662f\u4e0d\u80fd\u63a5\u53d7\u7684\u3002<\/p>\n

\u82e5\u662f\u7ed9\u8001\u677f\u770b\u5230\u8fd9\u79cd\u6548\u679c\uff0c\u53c8\u662f\u4e00\u987f\u81ed\u9a82\uff0c\u7a0b\u5e8f\u733f\u7684\u59d4\u5c48<\/p>\n

\"\u5fae\u4fe1\u5c0f\u7a0b\u5e8f\u4e4b\u81ea\u5b9a\u4e49toast\u5b9e\u4f8b\u8be6\u89e3\u63d2\u56fe1\"<\/p>\n

\u4e0b\u9762\u4ecb\u7ecd\u4e00\u4e2a\u81ea\u5b9a\u4e49\u7684toast<\/p>\n

\u6548\u679c\uff1a<\/p>\n

\"\u5fae\u4fe1\u5c0f\u7a0b\u5e8f\u4e4b\u81ea\u5b9a\u4e49toast\u5b9e\u4f8b\u8be6\u89e3\u63d2\u56fe2\" <\/p>\n

\u5177\u4f53\u5b9e\u73b0\uff1a
wxml\uff1a<\/p>\n

<\/p>\n

<!--\u6309\u94ae--> \r\n<view> \r\n <view>button<\/view> \r\n<\/view> \r\n \r\n<!--mask--> \r\n<view><\/view> \r\n<!--\u4ee5\u4e0b\u4e3atoast\u663e\u793a\u7684\u5185\u5bb9--> \r\n<view> \r\n <view> \r\n <view> \r\n  {{toastText}} \r\n <\/view> \r\n <\/view> \r\n<\/view><\/pre>\n
  \u767b\u5f55\u540e\u590d\u5236   <\/p>\n
wxss\uff1a<\/p>\n
<\/p>\n
Page { \r\n background: #fff; \r\n} \r\n\/*\u6309\u94ae*\/ \r\n.btn { \r\n font-size: 28rpx; \r\n padding: 15rpx 30rpx; \r\n width: 100rpx; \r\n margin: 20rpx; \r\n text-align: center; \r\n border-radius: 10rpx; \r\n border: 1px solid #000; \r\n} \r\n\/*mask*\/ \r\n.toast_mask { \r\n opacity: 0; \r\n width: 100%; \r\n height: 100%; \r\n overflow: hidden; \r\n position: fixed; \r\n top: 0; \r\n left: 0; \r\n z-index: 888; \r\n} \r\n\/*toast*\/ \r\n.toast_content_box { \r\n display: flex; \r\n width: 100%; \r\n height: 100%; \r\n justify-content: center; \r\n align-items: center; \r\n position: fixed; \r\n z-index: 999; \r\n} \r\n.toast_content { \r\n width: 50%; \r\n padding: 20rpx; \r\n background: rgba(0, 0, 0, 0.5); \r\n border-radius: 20rpx; \r\n} \r\n.toast_content_text { \r\n height: 100%; \r\n width: 100%; \r\n color: #fff; \r\n font-size: 28rpx; \r\n text-align: center; \r\n}<\/pre>\n
  \u767b\u5f55\u540e\u590d\u5236   <\/p>\n
js\uff1a<\/p>\n
<\/p>\n
Page({ \r\n data: { \r\n \/\/toast\u9ed8\u8ba4\u4e0d\u663e\u793a \r\n isShowToast: false \r\n }, \r\n showToast: function () { \r\n var _this = this; \r\n \/\/ toast\u65f6\u95f4 \r\n _this.data.count = parseInt(_this.data.count) ? parseInt(_this.data.count) : 3000; \r\n \/\/ \u663e\u793atoast \r\n _this.setData({ \r\n  isShowToast: true, \r\n }); \r\n \/\/ \u5b9a\u65f6\u5668\u5173\u95ed \r\n setTimeout(function () { \r\n  _this.setData({ \r\n  isShowToast: false \r\n  }); \r\n }, _this.data.count); \r\n }, \r\n \/* \u70b9\u51fb\u6309\u94ae *\/ \r\n clickBtn: function () { \r\n console.log(\"\u4f60\u70b9\u51fb\u4e86\u6309\u94ae\") \r\n \/\/\u8bbe\u7f6etoast\u65f6\u95f4\uff0ctoast\u5185\u5bb9 \r\n this.setData({ \r\n  count: 1500, \r\n  toastText: 'Michael's\u3000Toast' \r\n }); \r\n this.showToast(); \r\n } \r\n})<\/pre>\n
  \u767b\u5f55\u540e\u590d\u5236   <\/p>\n
\u4ee5\u4e0a\u5c31\u662f\u5fae\u4fe1\u5c0f\u7a0b\u5e8f\u4e4b\u81ea\u5b9a\u4e49toast\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\u4e49toast\u7684\u76f8\u5173\u65b9\u6cd5\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\u4e00\u4e2atoast\u7684api  wx.showToast()\u672c\u6765\u662f\u6bd4\u8f83\u597d\u7684\uff0c\u65b9\u4fbf\u4f7f\u7528\uff0c\u4f46\u662f\u8fd9\u4e2atoast\u4f1a\u663e\u793a\u51fa\u56fe\u6807\uff0c\u800c\u4e14\u4e0d\u80fd\u53bb\u9664\u3002 \u5047\u8bbe\uff1a\u6211\u4eec\u6267\u884c\u5b8c\u4e1a\u52a1\u7684\u65f6\u5019\uff0ctoast\u4e00\u4e0b\uff0c\u5f53\u6267\u884c\u6210\u529f\u7684\u65f6\u5019\uff0c\u6548\u679c\u8fd8\u53ef\u4ee5\u63a5\u53d7\uff0c\u5982\u4e0b\u56fe\uff1a   \u4f46\u662f\uff0c\u5f53\u6267\u884c\u5931\u8d25\u7684\u65f6\u5019\uff0c\u5982\u4e0b\u56fe\uff1a \u5931\u8d25\u4e86\uff0c\u4f60\u8fd8\u663e\u793a\u4e2a\u6263\u6263\u56fe\u6848\uff0c\u90a3\u5230\u5e95\u662f\u6210\u529f\u8fd8\u662f\u5931\u8d25\uff1f\uff1f\u8fd9\u80af\u5b9a\u662f\u4e0d\u80fd\u63a5\u53d7\u7684\u3002 \u82e5\u662f\u7ed9\u8001\u677f\u770b\u5230\u8fd9\u79cd\u6548\u679c\uff0c\u53c8\u662f\u4e00\u987f\u81ed\u9a82\uff0c\u7a0b\u5e8f\u733f\u7684\u59d4\u5c48 \u4e0b\u9762\u4ecb\u7ecd\u4e00\u4e2a\u81ea\u5b9a\u4e49\u7684toast \u6548\u679c\uff1a   \u5177\u4f53\u5b9e\u73b0\uff1awxml\uff1a <!–\u6309\u94ae–>  <view>   <view>button<\/view>  <\/view>    <!–mask–>  <view><\/view>  <!–\u4ee5\u4e0b\u4e3atoast\u663e\u793a\u7684\u5185\u5bb9–>  <view>   <view>   <view>    {{toastText}}   <\/view>   <\/view>  <\/view> \u767b\u5f55\u540e\u590d\u5236 wxss\uff1a Page {   background: #fff;  }  \/*\u6309\u94ae*\/  .btn {   font-size: 28rpx;   padding: 15rpx 30rpx;   width: 100rpx;   margin: 20rpx;   text-align: center;   border-radius: 10rpx;   border: 1px solid #000;  }  \/*mask*\/  .toast_mask {   opacity: 0;   width: 100%;   height: 100%;   overflow: hidden;   position: fixed;   top: 0;   left: 0;   z-index: 888;  }  \/*toast*\/  .toast_content_box {  […]<\/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-29702","post","type-post","status-publish","format-standard","hentry","category-19"],"_links":{"self":[{"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/posts\/29702","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=29702"}],"version-history":[{"count":0,"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/posts\/29702\/revisions"}],"wp:attachment":[{"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/media?parent=29702"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/categories?post=29702"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/tags?post=29702"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}