{"id":8113,"date":"2024-06-22T14:01:01","date_gmt":"2024-06-22T06:01:01","guid":{"rendered":""},"modified":"2024-06-22T14:01:01","modified_gmt":"2024-06-22T06:01:01","slug":"\u5c0f\u7a0b\u5e8f\u5934\u90e8\u5bfc\u822a\u680f\u81ea\u5b9a\u4e49_\u5c0f\u7a0b\u5e8f\u5934\u90e8\u5bfc\u822a\u680f\u81ea\u5b9a\u4e49","status":"publish","type":"post","link":"https:\/\/mushiming.com\/8113.html","title":{"rendered":"\u5c0f\u7a0b\u5e8f\u5934\u90e8\u5bfc\u822a\u680f\u81ea\u5b9a\u4e49_\u5c0f\u7a0b\u5e8f\u5934\u90e8\u5bfc\u822a\u680f\u81ea\u5b9a\u4e49"},"content":{"rendered":"

\n <\/path> \n<\/svg> <\/p>\n

**<\/p>\n

\u81ea\u5b9a\u4e49\u9876\u90e8\u5bfc\u822a<\/h3>\n

**
\u5907\u6ce8\uff1a\u65e0\u6cd5\u5b9e\u73b0\u9876\u90e8\u5bfc\u822a\u7684\u5b89\u5353\u9760\u5de6\uff0cIOS\u5c45\u4e2d\u7684\u73b0\u8c61<\/em><\/p>\n

1. \u9690\u85cf\u5c0f\u7a0b\u5e8f\u81ea\u5e26\u7684\u9876\u90e8\u5bfc\u822a<\/strong><\/p>\n

\u5728\u9875\u9762\u7684json\u6216app.json\u4e2d\u6dfb\u52a0\uff08\u9690\u85cf\u9876\u90e8\u5bfc\u822a\uff09\uff1a <\/code><\/pre>\n
\"navigationStyle\"<\/span>:<\/span> \"custom\"<\/span> <\/code><\/pre>\n
2. \u8bbe\u7f6e\u5168\u5c40\u53d8\u91cf\uff0c\u53ef\u9002\u914d\u6240\u6709\u7684\u624b\u673a\uff0c\u5305\u62ec\u5218\u6d77\u5c4f<\/strong><\/p>\n
\u5728app.js\u4e2d\u6dfb\u52a0<\/p>\n
\/\/\u5168\u5c40\u53d8\u91cf<\/span> globalData:<\/span> { \n   <\/span> statusBarHeight:<\/span> wx.<\/span>getSystemInfoSync<\/span>(<\/span>)<\/span>[<\/span>'statusBarHeight'<\/span>]<\/span> \/\/\u9876\u90e8\u5bfc\u822a\u9002\u914d<\/span> }<\/span>,<\/span> <\/code><\/pre>\n
3. \u9875\u9762\u4e2d\u6dfb\u52a0<\/strong><\/p>\n
wxml<\/p>\n
<<\/span>view class<\/span>=<\/span>\"custom flex_between\"<\/span> style=<\/span>\"padding-top:{ \n   {statusBarHeight}}px\"<\/span>><\/span> <<\/span>text><\/span>demo<<\/span>\/<\/span>text><\/span> <<\/span>\/<\/span>view><\/span> <<\/span>view class<\/span>=<\/span>\"empty_custom\"<\/span> style=<\/span>\"padding-top:{ \n   {statusBarHeight}}px\"<\/span>><\/span><<\/span>\/<\/span>view><\/span> <\/code><\/pre>\n
js<\/p>\n
 const<\/span> App =<\/span> getApp<\/span>(<\/span>)<\/span> data:<\/span>{ \n   <\/span> statusBarHeight:<\/span> App.<\/span>globalData.<\/span>statusBarHeight,<\/span> \/\/\u6b64\u5904\u5f15\u7528\u516c\u5171\u6837\u5f0f<\/span> }<\/span> <\/code><\/pre>\n
css<\/p>\n
 .<\/span>custom{ \n   <\/span> position:<\/span> fixed;<\/span> width:<\/span> 100<\/span>%<\/span>;<\/span> top:<\/span> 0<\/span>;<\/span> left:<\/span> 0<\/span>;<\/span> height:<\/span> 45<\/span>px;<\/span> background:<\/span> #fff;<\/span> z-<\/span>index:<\/span> 999<\/span>;<\/span> border-<\/span>bottom:<\/span> 2<\/span>rpx solid #eee;<\/span> }<\/span> .<\/span>custom text{ \n   <\/span> color:<\/span> #333<\/span>;<\/span> font-<\/span>size:<\/span> 34<\/span>rpx;<\/span> font-<\/span>weight:<\/span> 700<\/span>;<\/span> max-<\/span>width:<\/span> 280<\/span>rpx;<\/span> }<\/span> .<\/span>empty_custom{ \n   <\/span> height:<\/span> 45<\/span>px;<\/span> width:<\/span> 100<\/span>%<\/span>;<\/span> }<\/span> <\/code><\/pre>\n
**<\/p>\n
iPhoneX\u7684\u5e95\u90e8\u6a2a\u6761\u906e\u6321\u95ee\u9898<\/h3>\n
**<\/p>\n
\u5728app.js\u4e2d\u6dfb\u52a0<\/strong><\/p>\n
\/\/\u5168\u5c40\u53d8\u91cf <\/span> globalData:<\/span> { \n   <\/span> isIphoneX:<\/span> (<\/span>wx.<\/span>getSystemInfoSync<\/span>(<\/span>)<\/span>.<\/span>model.<\/span>indexOf<\/span>(<\/span>\"iPhone\"<\/span>)<\/span> ==<\/span> 0<\/span>)<\/span> &&<\/span> (<\/span>wx.<\/span>getSystemInfoSync<\/span>(<\/span>)<\/span>.<\/span>model.<\/span>indexOf<\/span>(<\/span>\"X\"<\/span>)<\/span> >=<\/span> 0<\/span> ||<\/span> (<\/span>wx.<\/span>getSystemInfoSync<\/span>(<\/span>)<\/span>.<\/span>model.<\/span>match<\/span>(<\/span>\/<\/span>\\d+<\/span>\/<\/span>g)<\/span> &&<\/span> wx.<\/span>getSystemInfoSync<\/span>(<\/span>)<\/span>.<\/span>model.<\/span>match<\/span>(<\/span>\/<\/span>\\d+<\/span>\/<\/span>g)<\/span>[<\/span>0<\/span>]<\/span> ><\/span> 8<\/span>)<\/span>)<\/span> }<\/span>,<\/span> <\/code><\/pre>\n
\n
    \n
  1. \u6ce8\u91ca\uff1a\u68c0\u6d4b\u662f\u5426\u6709\u2018iPhone\u2019\u5b57\u6bb5 && \uff08\u68c0\u6d4b\u662f\u5426\u6709\u2018X\u2019\u5b57\u6bb5 || \uff08\u68c0\u6d4b\u662f\u5426\u6709\u6570\u5b57 && \u68c0\u6d4b\u7b2c\u4e00\u4f4d\u6570\u5b57\u662f\u5426\u5927\u4e8e8\uff09\uff09<\/li>\n
  2. wx.getSystemInfoSync().model\u662f\u7cfb\u7edf\u68c0\u6d4b\u7684\u624b\u673a\u578b\u53f7\uff1b<\/li>\n
  3. \u68c0\u6d4bios\u673a\u578b\u51fa\u73b0\u7684\u7b2c\u4e00\u4e2a\u6570\u5b57\u662f\u5426\u5927\u4e8e8\uff0c\u82e5\u5927\u4e8e8\uff0c\u5219\u4e3a\u5e95\u90e8\u5bfc\u822a\u6709\u6a2a\u6761\uff1b\uff08iPhone12\u76ee\u524d\u68c0\u6d4b\u6709\u95ee\u9898\uff0c\u4f46\u662f\u68c0\u6d4b\u5230\u7684\u7b2c\u4e00\u4e2a\u6570\u5b57\u4e3a\u2018iPhone13\u2019\u4e2d\u768413\uff0c\u81ea\u6d4b\u662f\u6ca1\u6709\u95ee\u9898\u7684\uff0c\u5176\u4ed6\u95ee\u9898\u5c1a\u672a\u53d1\u73b0\uff09<\/li>\n
  4. iPhoneX\u578b\u53f7\u7279\u6b8a\uff0c\u9700\u7279\u6b8a\u5224\u65ad\uff1b<\/li>\n
  5. \u9644\u52a0\uff1a\u20180\u2019\u5728\u4e09\u5143\u5224\u65ad\u4e2d\u5c5e\u4e8e\u2018false\u2019,\u6240\u4ee5\u7528\u2018&&\u2019\uff0c\u5982\u679c\u4e8c\u4e2a\u6761\u4ef6\u4e2d\u6709\u4e00\u4e2a\u4e3a\u2018false\u2019,\u5219\u8fd4\u56de\u2018false\u2019\uff1b<\/li>\n<\/ol>\n<\/blockquote>\n
    wxml\u5f15\u7528<\/strong><\/p>\n
    <<\/span>view class<\/span>=<\/span>\"footer\"<\/span> style=<\/span>\"padding-bottom:{ \n   {isIphoneX ? 68 : 0}}rpx;\"<\/span>><\/span><<\/span>\/<\/span>view><\/span> <\/code><\/pre>\n
    \n
    \u5e95\u90e8\u533a\u57df\uff0c\u4e0d\u52a0box-sizing\uff0c\u7528padding-bottom\u5c06\u5e95\u90e8\u5bfc\u822a\u81ea\u52a8\u6491\u5f00\uff0c34px\u4e3a\u6700\u4f73\u9002\u914d\u9ad8\u5ea6<\/p>\n<\/blockquote>\n
    js\u5f15\u7528<\/strong><\/p>\n
     const<\/span> App =<\/span> getApp<\/span>(<\/span>)<\/span> data:<\/span>{ \n   <\/span> isIphoneX:<\/span> App.<\/span>globalData.<\/span>isIphoneX,<\/span> }<\/span> <\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"\u5c0f\u7a0b\u5e8f\u5934\u90e8\u5bfc\u822a\u680f\u81ea\u5b9a\u4e49_\u5c0f\u7a0b\u5e8f\u5934\u90e8\u5bfc\u822a\u680f\u81ea\u5b9a\u4e49\u81ea\u5b9a\u4e49\u5bfc\u822a\u6b65\u9aa4\uff0c\u9002\u914d\u6240\u6709\u624b\u673a_\u5c0f\u7a0b\u5e8f\u82f9\u679c\u624b\u673a\u81ea\u5b9a\u4e49\u9876\u90e8\u5bfc\u822a\u95ee\u9898","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[],"tags":[],"_links":{"self":[{"href":"https:\/\/mushiming.com\/wp-json\/wp\/v2\/posts\/8113"}],"collection":[{"href":"https:\/\/mushiming.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/mushiming.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/mushiming.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/mushiming.com\/wp-json\/wp\/v2\/comments?post=8113"}],"version-history":[{"count":0,"href":"https:\/\/mushiming.com\/wp-json\/wp\/v2\/posts\/8113\/revisions"}],"wp:attachment":[{"href":"https:\/\/mushiming.com\/wp-json\/wp\/v2\/media?parent=8113"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/mushiming.com\/wp-json\/wp\/v2\/categories?post=8113"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/mushiming.com\/wp-json\/wp\/v2\/tags?post=8113"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}