|
@@ -11,15 +11,18 @@ export const useKeyboard = (scrollViewRef: React.MutableRefObject<any>, contentI
|
|
|
|
|
|
// 计算 marginTopOffset 偏移的距离
|
|
// 计算 marginTopOffset 偏移的距离
|
|
const marginTopOffset = (() => {
|
|
const marginTopOffset = (() => {
|
|
|
|
+ // console.log(contentHeight, keyboardHeight,scrollViewHeight, 9999)
|
|
|
|
+ // 如果内容高度为 0 则将内容高度视频为 容器高度,用于显示最底部的欢迎消息
|
|
|
|
+ const _cotentHeight = contentHeight === 0 ? scrollViewHeight : contentHeight
|
|
if (keyboardHeight <= 0) return 0;
|
|
if (keyboardHeight <= 0) return 0;
|
|
// 如果内容超过滚动容器,取键盘弹起高度
|
|
// 如果内容超过滚动容器,取键盘弹起高度
|
|
- if (contentHeight >= scrollViewHeight) {
|
|
|
|
|
|
+ if (_cotentHeight >= scrollViewHeight) {
|
|
return -keyboardHeight;
|
|
return -keyboardHeight;
|
|
}
|
|
}
|
|
// 如果内容+键盘弹起高度超过滚动容器, 则取其差值
|
|
// 如果内容+键盘弹起高度超过滚动容器, 则取其差值
|
|
- if (contentHeight + keyboardHeight > scrollViewHeight) {
|
|
|
|
|
|
+ if (_cotentHeight + keyboardHeight > scrollViewHeight) {
|
|
// 内容+键盘弹起高度 - 滚动容器高度
|
|
// 内容+键盘弹起高度 - 滚动容器高度
|
|
- return -(contentHeight + keyboardHeight - scrollViewHeight);
|
|
|
|
|
|
+ return -(_cotentHeight + keyboardHeight - scrollViewHeight);
|
|
}
|
|
}
|
|
return 0
|
|
return 0
|
|
})();
|
|
})();
|
|
@@ -30,6 +33,7 @@ export const useKeyboard = (scrollViewRef: React.MutableRefObject<any>, contentI
|
|
|
|
|
|
useEffect(() => {
|
|
useEffect(() => {
|
|
// 监听键盘高度变化
|
|
// 监听键盘高度变化
|
|
|
|
+ // todo: 需要测试是否在键盘弹起时检测内容与容器高度
|
|
Taro.onKeyboardHeightChange((res) => {
|
|
Taro.onKeyboardHeightChange((res) => {
|
|
if (res.height <= 0) {
|
|
if (res.height <= 0) {
|
|
return setKeyboardHeight(0);
|
|
return setKeyboardHeight(0);
|
|
@@ -51,26 +55,23 @@ export const useKeyboard = (scrollViewRef: React.MutableRefObject<any>, contentI
|
|
useEffect(() => {
|
|
useEffect(() => {
|
|
if (scrollViewRef.current) {
|
|
if (scrollViewRef.current) {
|
|
const query = Taro.createSelectorQuery();
|
|
const query = Taro.createSelectorQuery();
|
|
- // 获取聊天内容高度
|
|
|
|
|
|
+ // 获取滚动容器高度
|
|
query
|
|
query
|
|
- .select(contentId)
|
|
|
|
|
|
+ .select(scrollViewId)
|
|
.boundingClientRect((rect: any) => {
|
|
.boundingClientRect((rect: any) => {
|
|
if (rect) {
|
|
if (rect) {
|
|
- // console.log('Content height:', rect.height)
|
|
|
|
- setContentHeight(rect.height);
|
|
|
|
|
|
+ // console.log('ScrollView height:', rect.height)
|
|
|
|
+ setScrollViewHeight(rect.height);
|
|
}
|
|
}
|
|
})
|
|
})
|
|
.exec();
|
|
.exec();
|
|
- // 获取滚动容器高度
|
|
|
|
|
|
+ // 获取聊天内容高度
|
|
query
|
|
query
|
|
- .select(scrollViewId)
|
|
|
|
|
|
+ .select(contentId)
|
|
.boundingClientRect((rect: any) => {
|
|
.boundingClientRect((rect: any) => {
|
|
if (rect) {
|
|
if (rect) {
|
|
- // console.log('ScrollView height:', rect.height)
|
|
|
|
- setScrollViewHeight(rect.height);
|
|
|
|
- if(contentHeight <= 0){
|
|
|
|
- setContentHeight(rect.height);
|
|
|
|
- }
|
|
|
|
|
|
+ // console.log('Content height:', rect.height, scrollViewHeight)
|
|
|
|
+ setContentHeight(rect.height);
|
|
}
|
|
}
|
|
})
|
|
})
|
|
.exec();
|
|
.exec();
|