在微信小程序的时候有时正常弹出,有时不弹出,有时弹出后input与软键盘中间有一大块空白区域,不知道哪里出了问题,各位大佬给看看,小弟谢过!
代码片段:
<template>
<view>
<view class="bottomWrapper">
<view>
<view class="buttonWrapper" @click="commentClick">
<uniIcon type='chat' color="#333" size="24"></uniIcon>
<view>评论</view>
</view>
</view>
</view>
<uni-popup ref="popup" type="bottom" :change='handelChange'>
<view class="publishWrapper">
<input type="text" confirm-type='done' v-model="myText" placeholder='说点什么吧' :focus='setFocus' cursor-spacing='15px' />
<view :style="{color:publishColor}">发布</view>
</view>
</uni-popup>
</view>
</template>
数据:
import uniIcon from "@dcloudio/uni-ui/lib/uni-icon/uni-icon"
import uniPopup from "@dcloudio/uni-ui/lib/uni-popup/uni-popup"
export default {
data() {
return {
myText:'',
setFocus:false
};
},
computed:{
publishColor(){
if(this.myText){
return '#ff4049'
}else{
return '#999'
}
}
},
components:{uniIcon, uniPopup},
methods:{
commentClick(){
this.$refs.popup.open()
this.setFocus=true
},
handelChange(){
}
}
}
css样式:
.bottomWrapper{
position: fixed;
bottom: 0;
background-color: #fff;
width: 100%;
padding: 16rpx 10rpx;
border-top: 1px solid $uni-border-color;
}
.buttonWrapper{
text-align: center;
display: flex;
justify-content:center;
align-items:center;
font-size: $uni-font-size-base;
color: $uni-text-color;
}
.publishWrapper{
display: flex;
// padding: 6rpx;
justify-content: space-between;
input{
border: 1px solid $uni-border-color;
border-radius: 40rpx;
padding-left: 20rpx;
width: 70%;
}
view{
width: 20%;
text-align: center;
}
}
部分截图:
1***@163.com
牛皮,看了好多答案,你这个靠谱了
2021-01-01 20:39