揭秘UniApp微信小程序iOS端键盘弹起滚动难题！

Android

2024-01-21 12:28:10

iOS 端 UniApp 微信小程序键盘弹起后页面无法滚动问题详解

问题概述

当我们在 iOS 端使用 UniApp 开发的微信小程序时，如果页面中有输入框，当用户点击输入框时，键盘会弹起。但是，当键盘弹起后，页面就会无法滚动。这是因为键盘弹起后，会遮挡住页面的部分内容，导致用户无法滚动页面。

解决方案

为了解决这个问题，我们可以使用以下几种方法：

使用原生组件
使用 CSS

具体步骤

使用原生组件

manifest.json 文件添加以下代码：

"pages": {
  "pages/index/index": {
    "style": {
      "navigationBarTitleText": "UniApp",
      "enablePullDownRefresh": true
    },
    "component": {}
  }
}

pages/index/index.js 文件添加以下代码：

import { ref } from 'uni-composition-api'

export default {
  setup() {
    const scrollTop = ref(0)

    return {
      scrollTop
    }
  },
  methods: {
    onScroll(e) {
      this.scrollTop = e.detail.scrollTop
    }
  }
}

使用 CSS

pages/index/index.css 文件添加以下代码：

.page {
  height: 100vh;
  overflow: auto;
}

.input-container {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 10px;
  background-color: #f5f5f5;
}

.input {
  width: 100%;
  padding: 10px;
  font-size: 16px;
}

manifest.json 文件添加以下代码：

"pages": {
  "pages/index/index": {
    "style": {
      "navigationBarTitleText": "UniApp",
      "enablePullDownRefresh": true
    },
    "component": {}
  }
}