• 解决uniapp,textarea拉起页面被顶起和键盘被输入框遮挡的问题。


    1:Android、ios 同时解决;

    2:我们在开发的时候会发现textarea或者input拉起键盘的时候整个页面被顶起了,header也被顶没了;官方给了:adjustPosition='false'属性,设置完之后页面就不会被顶起,但是键盘把输入框挡住了,就很恶心;

    3:我的实现思路是,adjustPosition='false' ;用@keyboardheightchange监听键盘的高度;在textarea下面给一个view标签并且加高度;再通过uni.pageScrollTo 在键盘拉起的时候上滑页面;

    上代码
    1. <view>
    2. <textarea border='none' :adjustPosition='false' placeholder="请输入200字以内的申请人意见" count maxlength='500' @keyboardheightchange='keyboardheightchange' style="width: 100%;" @blur="hideBorad">textarea>
    3. <view :style="{'height':(showKeyNum==1?400:keyboardHeight)+'rpx'}"> view>
    4. view>
    1. export default{
    2. data() {
    3. return {
    4. keyboardHeight: 0, // 键盘高度
    5. showKeyNum: 0,//键盘打开的次数
    6. }
    7. },
    8. methods: {
    9. keyboardheightchange(e) {
    10. this.keyboardHeight = e.detail.height;
    11. this.showKeyNum++;
    12. setTimeout(() => {
    13. uni.pageScrollTo({
    14. scrollTop: 2000
    15. });
    16. }, 200)
    17. },
    18. hideBorad() {
    19. this.showKeyNum = 2;
    20. this.keyboardHeight = 0;
    21. }
    22. }
    23. }

    1:解释一下为什么要设置键盘打开的次数:是因为keyboardheightchange第一次拉起的时候键盘的高度监听不到,所以当等于1 的时候给了一个默认的高度;

    2; @blur="hideBorad" 为什么要设置这个事件,是因为Android系统下keyboardheightchange关闭的时候不触发;

    3:真的是各种坑等着你跳,大家有好的方法也可以提供过来;谢谢参考!

  • 相关阅读:
    IPKISS Tutorials 2------导入IPKISS模块
    【华为机试真题 JAVA】火星文计算-100
    一个app的流程分析
    方形平板振动克拉尼图形可视化计算MATLAB程序(Chladni Patterns)
    Maven(8) 实战总结
    ElasticSearch(八)【过滤查询】
    大语言模型(LLM)综述(三):大语言模型预训练的进展
    # STM32定时器
    开源的正反面
    python分支结构的花样玩法(一)
  • 原文地址:https://blog.csdn.net/qq_41851047/article/details/139959653