textarea 聚焦事件返回的键盘高度 e.detail.height 高度返回正常，但是在自己的页面输入完后 在下面的上传图片 再点击删除一张图片 底部的定位就会跑到屏幕的中间 这个时候显示了键盘高度 明明没聚焦```javascript
<view>
<view style="height: 20rpx; background: #f6f6f6"></view>
<view class="con">
<view class="databox">
<view class="conbox">
<view class="inputclass">
<textarea
v-model="content"
placeholder="分享你的动态..."
confirm-type="发送"
placeholder-style="#A4A3AC"
type="textarea"
:border="false"
@focus="inputBindFocus"
@blur="inputBindBlur"
@input="descInput"
maxlength="-1"
style="width: 100%"
/>
</view>
</view>
<view style="height: 640rpx; padding-bottom: 180rpx">
<u-upload
:action="action"
:file-list="fileList"
:max-count="9"
:max-size="10 * 1024 * 1024"
@on-success="onsuccess"
@on-progress="onprogress"
@on-list-change="onchange"
@on-remove="onRemove"
:custom-btn="true"
:width="'200rpx'"
:height="'200rpx'"
:header="header"
>
<view slot="addBtn" class="slot-btn" hover-class="slot-btn__hover" hover-stay-time="150">
<image src="@/static/img/index/add.png" class="iconimg" />
</view>
</u-upload>
</view>
</view>
<view class="addressbox" :style="{ bottom: bottomHeight + 'px' }">
<view class="leftcon">
<image src="@/static/img/index/icon_Location.png" class="iconimg" />
<text class="name">{{ districts }}</text>
</view>
键盘高度{{ bottomHeight }}
<view class="textnum">{{ remnant }}/300</view>
</view>
<view class="footbox">
<view class="sc-primary-btn sbtn" @click="$u.throttle(btnAClick, 1500)">发布</view>
</view>
</view>
</view>
</template>
<script>
import htzImageUpload from '@/components/htz-image-upload/htz-image-upload.vue';
import { storage } from '@/utils/storage.js';
import { saveshow, getlocation } from '@/services/selfshow.js';
export default {
data() {
return {
content: '', // 发布内容
active: 1, // 1图0视频
fileList: [],
imgArr: [],
// 演示地址，请勿直接使用
action: this.$uploadUrl,
videoData: [],
header: {
Authorization: `Bearer ${storage.get('token')}`,
},
isflag: false,
bottomHeight: 81.5,
remnant: 0,
longitude: '',
latitude: '',
districts: '',
parm: {},
maxStr: 300, // 最大字数
};
},
components: {
htzImageUpload,
},
watch: {},
onShow() {
this.getlocationFun();
},
methods: {
tab(index) {
this.active = index;
},
// 图片上传成功
onsuccess(res) {
if (res.code === 0) {
uni.hideLoading();
this.loading = false;
this.imgArr.push(res.data.filePath);
} else if (res.code === 10004) {
uni.showToast({
title: res.message,
icon: 'none',
duration: 5000,
});
storage.remove('token');
// eslint-disable-next-line no-undef
const pages = getCurrentPages();
const currentPageRoute = pages[pages.length - 1].route;
uni.$u.debounce(() => {
if (currentPageRoute !== 'pages/login/auth') {
uni.navigateTo({
url: '/pages/login/auth',
});
}
}, 1500);
} else {
uni.showToast({
title: res.message,
icon: 'none',
duration: 5000,
});
uni.hideLoading();
this.fileList = [];
}
},
onchange(lists, name) {
// console.log('45465465', lists, name);
// this.isflag = true;
},
// 上传进度
onprogress(res, index, lists, name) {
uni.showLoading({
title: '上传中',
mask: true,
});
},
onRemove(index, lists, name) {
this.imgArr = lists.map((item) => {
return item.response.data.filePath;
});
},
async btnAClick() {
// if (this.imgArr.length === 0) {
// uni.showToast({
// title: '请上传图片',
// icon: 'none',
// duration: 2000,
// });
// return false;
// }
if (!this.content) {
uni.showToast({
title: '请输入要分享的动态',
icon: 'none',
duration: 2000,
});
return false;
}
if (this.content.length > this.maxStr) {
uni.showToast({
title: `内容不可超过${this.maxStr}个字`,
icon: 'none',
duration: 2000,
});
return false;
}
if (!this.districts) {
this.getlocationFun();
return false;
}
let parm = {
content: this.content,
imgUrl: this.imgArr.length === 0 ? '' : this.imgArr.toString(),
longitude: this.parm.longitude,
latitude: this.parm.latitude,
};
const res = await saveshow(parm);
if (res.code === 0) {
uni.showToast({
title: res.message,
icon: 'none',
duration: 2000,
});
uni.reLaunch({
url: '/pages/index/index',
success: function (e) {
// eslint-disable-next-line no-undef
var page = getCurrentPages()[0];
if (page === undefined || page == null) return;
page.onLoad();
},
});
}
},
inputBindFocus(e) {
// eslint-disable-next-line no-console
console.log('键盘高度', e);
this.bottomHeight = e.detail.height + 5;
},
inputBindBlur() {
// input 失去焦点，键盘隐藏，设置 input 所在盒子的 bottom 值为0
this.$emit('changeBottomVal', 0);
this.bottomHeight = 81.5;
},
descInput(e) {
this.remnant = e.detail.cursor;
},
// 获取位置
getlocationFun() {
let that = this;
uni.getLocation({
type: 'wgs84',
success: (res) => {
console.log('当前位置的经度：' + res.longitude);
console.log('当前位置的纬度：' + res.latitude);
that.parm = {
longitude: res.longitude,
latitude: res.latitude,
};
getlocation(that.parm).then((data) => {
console.log('data', that.parm, data);
this.districts = data.districts;
});
},
fail(res) {
// 用户拒绝后引导用户开启定位
that.getSetting();
},
});
},
/// /用户拒绝开启定位后-引导用户手动开启定位
getSetting(item) {
uni.getSetting({
success: (res) => {
// console.log('用户权限列表:', res.authSetting);
if (res.authSetting['scope.userLocation']) {
// console.log('已授权userLocation');
// 选择位置信息
this.getlocationFun(); // 重新调取uni.getLocation
} else {
// console.log('用户未授权userLocation');
// 2.用户第一次进来发起授权
uni.showModal({
title: '提示',
content: '当前定位未开启，请点击确定手动开启定位',
duration: 3000,
success: (res) => {
if (res.confirm) {
this.openSetting(); // 点击确定引导客户开启定位
} else if (res.cancel) {
uni.showToast({
title: '你拒绝了授权，无法获取定位信息',
duration: 2000,
icon: 'none',
});
}
},
});
}
},
});
},
// 4.打开设置
openSetting() {
uni.openSetting({
success: (res) => {
if (res.authSetting['scope.userLocation']) {
// 5.用户在设置中点击了允许，调用选择位置信息函数
this.getlocationFun(); // 重新调取uni.getLocation
} else {
// 5.用户在设置中点击了不允许，展示拒绝授权信息
uni.showToast({
title: '你拒绝了授权，无法操作内容',
icon: 'none',
duration: 3000,
});
}
},
fail: (err) => {
// eslint-disable-next-line no-console
console.log('打开设置失败', err);
},
});
},
},
};
</script>
<style lang="scss" scoped>
.con {
padding: 40rpx 32rpx;
flex-grow: 1;
overflow-y: auto;
}
.conbox {
// margin-top: 60rpx;
// padding-top: 40rpx;
.inputclass {
// min-height: 380rpx;
margin-bottom: 20rpx;
}
}
/deep/ .uni-textarea-textarea {
color: #ffffff !important;
}
.footbox {
width: 100%;
height: 133rpx;
// background: #1c1c1e;
padding: 15rpx 40rpx;
box-sizing: border-box;
position: fixed;
left: 0;
bottom: 0;
}
.slot-btn {
width: 200rpx;
height: 200rpx;
background: #f4f4f4;
border: 1px solid #f4f4f4;
display: flex;
justify-content: center;
align-items: center;
.iconimg {
width: 88rpx;
height: 88rpx;
}
}
.slot-btn__hover {
background-color: none;
}
.addressbox {
display: flex;
justify-content: space-between;
margin-top: 40rpx;
position: absolute;
width: 100%;
padding: 0 40rpx;
bottom: 163rpx;
left: 0;
background: #ffffff;
z-index: 2;
.leftcon {
display: flex;
align-items: center;
.iconimg {
width: 40rpx;
height: 40rpx;
}
.name {
font-size: 26rpx;
font-family: PingFang SC-Medium, PingFang SC;
font-weight: 500;
color: #333333;
}
}
.textnum {
font-size: 30rpx;
font-family: PingFang SC-Medium, PingFang SC;
font-weight: 500;
color: #aaaaaa;
}
}
</style> 
0 个回复