• 微信公众号系列 --- ionic在IOS的键盘弹出问题


      在使用ionic开发IOS系统微信的时候会有一个苦恼的问题,填写表单的时候键盘会挡住输入框,其实并不算什么大问题,只要用户输入一个字就可以立刻看见输入框了。

      可惜的是,有些客户是不讲理的,他才不管这个问题,反正就是不行,所以在一天睡觉的时候突然惊醒,想出来这个方案。

      我就不仔细讲代码了,直接上图  

    angular.module('MyApp')
        .directive('focusInput', ['$ionicScrollDelegate', '$window', '$timeout', '$ionicPosition', function ($ionicScrollDelegate, $window, $timeout, $ionicPosition) {
            return {
                restrict: 'A',
                scope: false,
                link: function ($scope, iElm, iAttrs, controller) {
                    if (ionic.Platform.isIOS()) {
                        iElm.on('focus', function () {
                            var top = $ionicScrollDelegate.getScrollPosition().top;
                            var eleTop = ($ionicPosition.offset(iElm).top) / 2
                            var realTop = eleTop + top;
                            $timeout(function () {
                                if (!$scope.$last) {
                                    $ionicScrollDelegate.scrollTo(0,realTop);
                                } else {
                                    try {
                                        var aim = angular.element(document).find('.scroll')
                                        aim.css('transform', 'translate3d(0px,' + '-' + realTop + 'px, 0px) scale(1)');
                                        $timeout(function () {
                                            iElm[0].focus();
                                            console.log(2);
                                        }, 100)
                                    } catch (e) {
                                    }
    
                                }
                            }, 500)
                        })
                    }
    
                }
            }
        }])
  • 相关阅读:
    【LeetCode-位运算】位1的个数
    【LeetCode-数组】调整数组顺序使奇数位于偶数前面
    mySQL数据库中.frm和.myi和.myd和.ibd文件是什么文件?
    安装docker-compose的两种方式
    将第三方jar包 安装到 maven仓库
    limit分页查询
    pom.xml配置指定仓库
    linux常用命令
    正则笔记
    使用conda创建虚拟环境
  • 原文地址:https://www.cnblogs.com/HeJason/p/5611989.html
Copyright © 2020-2023  润新知