解决uni-app微信小程序底部输入框,键盘弹起时页面整体上移 问题

3 篇文章 0 订阅
1 篇文章 0 订阅

解决uni-app微信小程序底部输入框,键盘弹起时页面整体上移 问题

转发自https://www.cnblogs.com/XHappyness/p/13528236.html#4703250

存在问题
做了一个记录页面(类似单方聊天页),输入框在底部;当弹出键盘时,页面整体上移,页面头信息会消失不见

需要实现效果:
比如一个记录页面,需要在键盘弹出时:

  • 底部的输入框跟随键盘上弹
  • 页面头固定在顶部不动
  • 聊天信息区域(即内容区)调整高度,该区域局部滚动

在这里插入图片描述

解决方法

  • 底部输入框fixed定位在底部,使用输入框的@focus获取键盘高度,更改输入框bottom;@blur时恢复bottom=0;
  • 使用包含页面头和内容区
  1. container的padding-bottom设置为输入框高度+输入框bottom,避免被输入框和键盘遮挡;并设置为flex column布局
  2. 头部定高(如果不定高可以不设置);
  3. 内容区设flex-grow:1,overflow-y:auto; 使其自适应高度并实现滚动;

实现代码

<template>
  <view>
    <view class="container" :style="{'padding-bottom': `${52+inputBottom}px`}">
      <view class="header">我是头部</view>
      <scroll-view class="content" :scroll-y="true" :scroll-top="scrollTop">
        <view>
          <view class="message" v-for="(item,index) in records" :key="index">
            <view class="message-content" v-html="item.content"></view>
            <view class="message-time">{{item.updateTime}}</view>
          </view>
        </view>
      </scroll-view>
    </view>
    <view class="bottom-textarea" :style="{bottom: inputBottom+'px'}">
      <view class="textarea-container">
        <textarea
          v-model="recordInput"
          :maxlength="-1"
          :auto-height="true"
          :show-confirm-bar="false"
          :cursor-spacing="10"
          :fixed="true"
          :adjust-position="false"
          @focus="focusTextarea"
          @blur="blurTextarea"
        />
      </view>
      <button @click="addRecord" class="primary-btn">记录</button>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      records: [],
      recordInput: "",
      itemAverageHeight: 500, //每条数据平均高度,为确保能滚到底部,可以设置大一些
      scrollTop: 1000,
      inputBottom: 0,
    };
  },
  methods: {
    getList() {
      uni.showNavigationBarLoading();
      //   获取记录信息
      this.$api
        .getRecords()
        .then((res) => {
          this.records = res.reverse().map((item) => ({
            ...item,
            content: item.content.replace(/\n/g, "<br/>"),
          }));
          if (this.records.length > 0)
            this.scrollTop = this.itemAverageHeight * this.records.length;
        })
        .finally(() => {
          uni.hideNavigationBarLoading();
        });
    },
    addRecord() {
      const trueValue = this.recordInput.trim();
      this.$api.addRecord(trueValue).then(() => {
        this.records.push({
          content: trueValue.replace(/\n/g, "<br/>"),
          updateTime: new Date(),
        });
        this.recordInput = "";
        this.scrollTop = this.scrollTop + this.itemAverageHeight; //滚到底部
      });
    },
    focusTextarea(e) {
      this.inputBottom = e.detail.height;
      this.scrollTop += 1; //滚到底部
    },
    blurTextarea(e) {
      this.inputBottom = 0;
      this.scrollTop += 1; //滚到底部
    },
  },
  onLoad(options) {
    this.getList();
  },
};
</script>

<style lang="less">
@left-right-margin: 40rpx;
.container {
  width: 100vw;
  height: 100vh;
  box-sizing: border-box;
  padding-bottom: 52px;
  display: flex;
  flex-direction: column;
  .header {
    flex-shrink: 0;
    padding: 0px @left-right-margin 32rpx @left-right-margin;
  }
  .content {
    flex-grow: 1;
    overflow: auto;
    .message {
      margin: 0px @left-right-margin 32rpx;
      display: flex;
      flex-direction: column;
      align-items: flex-end;
      .message-content {
        width: auto;
        max-width: calc(100vw - 80rpx);
        word-wrap: break-word;
        box-sizing: border-box;
        padding: 32rpx;
        line-height: 48rpx;
        background: pink;
        border-radius: 16rpx 0px 16rpx 16rpx;
      }
      .message-time {
        line-height: 32rpx;
        margin-top: 16rpx;
      }
    }
  }
}
.bottom-textarea {
  position: fixed;
  bottom: 0px;
  left: 0px;
  right: 0px;
  background-color: #f2f2f2;
  border-top: 2rpx solid rgba(226, 226, 226, 1);
  padding: 6px 20px;
  display: flex;
  align-items: flex-end;
  .textarea-container {
    flex: 1;
    min-height: 80rpx;
    background: rgba(255, 255, 255, 1);
    border-radius: 8rpx;
    box-sizing: border-box;
    padding: 20rpx 16rpx;
    > textarea {
      max-height: 250rpx;
      font-size: 36rpx;
      color: rgba(8, 8, 8, 1);
      width: auto;
    }
  }

  > button {
    flex-shrink: 0;
    height: 80rpx;
    margin: 0;
    margin-left: 16rpx;
  }
}
</style>
在 uView-UI 中,uni-app 小程序中的表单输入框是不支持直接进行语音录入的。不过,你可以通过一些额外的操作来实现语音录入的功能。以下是一种可能的实现方式: 1. 在输入框旁边添加一个按钮或图标,用来触发语音录入功能。 2. 绑定按钮的点击事件,当用户点击按钮,调用微信小程序的语音录入接口或其他语音识别相关的 API。 3. 在语音录入接口的回调函数中,将语音转换为文本,并将文本填充到输入框中。 具体实现步骤如下: 1. 在你的表单输入框组件中,添加一个按钮或图标,用来触发语音录入功能,代码类似下面这样: ```vue <template> <view> <input v-model="inputValue" placeholder="请输入文本" /> <button @click="startVoiceInput">语音输入</button> </view> </template> <script> export default { data() { return { inputValue: '' }; }, methods: { startVoiceInput() { // 调用微信小程序的语音录入接口或其他语音识别相关的 API // 在回调函数中将语音转换为文本,并填充到输入框中 } } }; </script> ``` 2. 在 `startVoiceInput` 方法中,调用微信小程序的语音录入接口或其他语音识别相关的 API。具体的调用方式和参数配置可以参考相关文档或 API 文档。 3. 在语音录入接口的回调函数中,将语音转换为文本,并将文本填充到输入框中。具体的语音转文本操作可能会因使用的语音识别服务而有所不同。你可以根据所选的语音识别服务的文档,了解如何将语音转换为文本,并将其填充到表单输入框中。 请注意,以上步骤仅为一种实现语音录入功能的示例,具体的实现方式可能会根据你使用的语音识别服务和相关 API 的不同而有所差异。你需要根据自己的项目需求和使用的语音识别服务进行相应的操作和调整。
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值