InfoQ geek media's 15th anniversary solicitation |position:fixed virtual button cannot take effect after being triggered. Problem analysis and Solution Exploration

One 、 Preface

uni-app

Project development process , It is found that the button is jacked up after the virtual button is triggered , Does not meet business needs .

Checked style , It is found that the positioning mode of the button setting is fixed positioning . Is the fixed position not effective here ？

.footer {
 position: fixed;
 width: 100%;
 bottom: 0;
 height: 120rpx;
 justify-content: center;
 align-items: center;
 border-top: 1rpx solid #F0F0F0;
 background: #ffffff;
}


Two 、 Cause analysis and solutions

The reason for the above problem is that when the virtual key pops up ,

CSS

The set style is not effective , You need to dynamically set the button style when detecting the virtual key pop-up .

The solution is as follows ： By monitoring the display of the virtual keyboard , Dynamic control button layout .

First , The initialization data information is as follows ：

hideFlag: true,
hideClass: 'hide'


View rendering section , Apply dynamic styling to button layout ：

<view class=&quot;footer&quot; :class=&quot;hideFlag ? hideClass : ''&quot;>
 <view @click=&quot;btnClick&quot; class=&quot;btn&quot; :class=&quot;{'btn-disable': btnDisabled}&quot;> Submit </view>
</view>


The virtual key monitoring logic is as follows ：

onLoad() {
 uni.onKeyboardHeightChange(res => {
 //  Virtual key hidden
 if (res.height === 0) {
 this.hideFlag = true;
 } else {
 //  The virtual key pops up
 this.hideFlag = false;
 }
 })
},


CSS

The style is as follows ：

.hide {
 position: fixed;
 bottom: 0;
}


3、 ... and 、 Extended reading  uni-app Version check pop-up removal

Reasons for appearance

： Mobile terminal

SDK

Version and

HBuilderX

Version inconsistency .

terms of settlement

• Find... In the project  
  manifest.json
    The configuration file ;

• Click the source view ;

• find  
  app-plus
  Configuration node ;

• Find the following
  compatible
  Field （ Add if not ）, Add a code that ignores the prompt

 "ignoreVersion": true //true Indicates that the version check prompt box is ignored ,HBuilderX1.9.0 And above support  


The full configuration is as follows ：

"compatible" : {
 "ignoreVersion": true //true Indicates that the version check prompt box is ignored ,HBuilderX1.9.0 And above support  
},


Four 、 Expanding reading

• 《
  Vue Advanced （ Yaowujiu ）： Dynamic styling
  》