记录 UniApp开发中遇到的坑

1.使用自带picker下拉选数据时,但选择太快时,点击确定后无法选择数据

原因:picker带有动画,在滑动选择时,当动画结束后才会真正选中值

方案:使用其它插件,推荐:uni-data-picker 

2.input框被输入键盘覆盖

记录 UniApp开发中遇到的坑_第1张图片 

inpu的cursor-spacing属性,可以设置键盘到输入框的距离

 

 3:输入框输入完毕收缩后,页面底部保留空白区域(大小跟键盘尺寸一直)

 解决:使用scrollIntoView

//common/js/adjust
/**
 * [$_blurAdjust 解决微信6.7.4版本在输入框弹出键盘后,页面没恢复]
 * @param  {[type]} e [description]
 * @return {[type]}   [description]
 */
function blurAdjust( e ){
	// #ifdef H5
	setTimeout(()=>{
		if(document.activeElement.tagName == 'INPUT' || document.activeElement.tagName == 'TEXTAREA'){
			return
		}

		let result = 'pc';
	    if(/(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent)) { //判断iPhone|iPad|iPod|iOS
	        result = 'ios'
	    }else if(/(Android)/i.test(navigator.userAgent)) {  //判断Android
	        result = 'android'
	    }

	    if( result = 'ios' ){
			// document.activeElement.scrollIntoViewIfNeeded(true);
			document.activeElement.scrollIntoView(true);
	    }
	},500)
	// #endif
}

export default blurAdjust


//./main.js
import adjustView from 'common/js/adjust'
Vue.prototype.$blurAdjust= blurAdjust


//./src/pages/index.vue

你可能感兴趣的:(面试,uni-app)