WeChat Mini Programs iphoneX background image and button overlap problem?

the background image under the iphonex in WeChat Mini Programs has been lengthened, and the button overlaps with it. How to solve it? Normal under iphone6.

] [1]

Code

<view class="container">
    <button class="btn"></button>
    <view class="bg">
      <image src="{{image_src}}"></image>
    </view>
</view>

.bg {
  position: fixed;
  bottom: 0px;
  width: 100%;
  height: 100%;
  z-index: -10;
 }
 .bg image {
  width: 100%;
  height: 100%;
 } 
.btn{
  width:400rpx;
  margin-top:100%;
  background-color: rgb(202, 99, 99);
  border-radius:100rpx;
  color:white;
}

Mini-Program html5 javascript

Jul.14,2021

generally does not use the background and dom elements to deal with the corresponding relationship, otherwise, some positions of the background are displayed differently under different resolutions, resulting in incorrect relative positions. You can change it to pictures and buttons to deal with

if the background is always full, you need to set the bottom, of the picture dynamically. You need bottom to be suitable for every phone. You can use rem and other methods.

Previous: The Android phone Wechat browser localstorage has been removed inexplicably.

Next: Why does Mini Program's drop-down refresh written in wepy framework appear to be loaded?

What is the reason why WeChat Mini Programs directly prints this as undefined in the bindblur event function bound to the element?
I bound an out-of-focus event to an element, but the undefined, code for printing this directly in the out-of-focus event function is as follows: <input id= peopleName bindblur= VerifyName type= text placeholder= placeholder-class= pla...

Mini-Program html5 javascript

Mar.11,2021
What is the difference between Mini Program local cache and localstorage?
Mini Program uses setStorage to store data and transmit values on pages, but it s the same with localstorage storage. I Baidu has said that it can prevent users from changing devices, users can still read setStorage if they change phones? That is to say...

Mini-Program html5 javascript

Mar.12,2021
Mini Program CAPTCHA countdown function, setData asynchronous problem
to achieve the 60 seconds countdown after sending CAPTCHA, you can click again, but if you use setData to set the button button to disable, there is an asynchronous problem. When the countdown is 0, the crazy button can send several CAPTCHAs. How to sol...

Mini-Program html5 javascript

Mar.12,2021
Does WeChat Mini Programs view tag have default line height or height?
under the iphone6 standard, I wrote a text tag in the view tag and set the font for text to be relatively small. I found that the view shows that view is actually one piece higher than the text tag. I don t know whether the view tag has the default lin...

Mini-Program html5 javascript

Mar.12,2021
WeChat Mini Programs clicks on the view tag that binds the click event. Is there no prompt for click effect by default?
for example, when I bind a click event to a view tag, and then click with my finger, there is no click effect. I remember that in ordinary web development, when the element bound to the click event is clicked, there will be a light gray background prompt...

Mini-Program html5 javascript

Mar.13,2021
Why is there a gap between WeChat Mini Programs view tag and text tag?
<view style= height:24rpx; > <text style= font-size:24rpx;line-height:24rpx; >aaa< text> < view> in this way, in the simulator, the positions of the view tag and the text tag are staggered. There is a distance between the t...

Mini-Program html5 javascript

Mar.14,2021
WeChat Mini Programs dynamically loaded picture list, how to click a picture to change the style?
as shown in the figure, the whole list is looped out by wx:for. You want to click on the small picture on the right (the small picture is also looped out by wx:for) to add a border color to the picture, and the big image on the left is changed to the...

WeChat-Mini-Programs Mini-Program html5 javascript

Mar.23,2021
How to realize dirty area redrawing with canvas
problem description how to redraw (dirty rectangle) in the dirty area of canvas when the data changes the environmental background of the problems and what methods you have tried when the data changes, you want to modify it with minimum granularit...

H5-game Mini-Program html5 javascript

Apr.12,2021
WeChat Mini Programs, who is already online, retreats frequently.
problem description recently developed a WeChat Mini Programs, has been online, but the flashback situation is more serious, my own iphoneX is basically no problem, but similar to some Android phones, or older i6 will be used to flash, I would like to...

Mini-Program html5 javascript

Nov.12,2021
WeChat Mini Programs, who is already online, retreats frequently.
problem description recently developed a WeChat Mini Programs, has been online, but the flashback situation is more serious, my own iphoneX is basically no problem, but similar to some Android phones, or older i6 will be used to flash, I would like to...

Mini-Program html5 javascript

Nov.12,2021