uniapp小程序,部分 ios 真机测试出现 input 输入框内容 跳动 问题

前言:最近在写uniapp小程序,遇到一个问题,在此记录一下,也希望能帮助到一些小伙伴。
问题:表单输入的时候,在个别 ios 真机上面测试时,快速输入和快速删除,会发现输入的文字或者数字,有自动删除、闪动、来回跳动等现象,经过查询各种资料,以及咨询官方得知,是 v-model 惹的祸, input(uni-easyinput同理)标签身上使用 v-model 会在部分真机上面出现以上现象,所以这里可以使用以下方法来代替 v-model。

1、只拿到输入的value值,不需要数据回显

(1)如果需要边输入边拿到数据,使用 @input(输入框内容发生变化时触发)
我这里使用的是uniapp自带的 uni-easyinput 表单(input同理)

<uni-easyinput type="number" placeholder="请输入卡号" @input="settleCardChange"/>
methods: {
	settleCardChange(value){
		console.log(value);
	}
}

结果图:
在这里插入图片描述
在这里插入图片描述
(2)如果是输入完之后点击某个按钮提交的时候才需要用到value值,可以使用 @blur (输入框失去焦点时触发)来拿到 input 表单的值 (限制:不需要边输入边拿到数据)

<uni-easyinput type="number" placeholder="请输入卡号"  @blur="getCardValue" />
methods:{
	getCardValue(e){
		console.log(e.detail.value);
	},
}

结果图:
在这里插入图片描述
在这里插入图片描述

2、需要拿到value的值,并且需要数据回显

如果既需要拿到value值,又需要数据回显,就需要用到 :value 来使数据回显到输入框内,这里只能使用 @blur + :value 来实现,类似 v-model 双向绑定。(这里本人试过 @input + :value 来实现,依然有上述问题)

// 标签
<uni-easyinput type="number" :value="settleCardValue" placeholder="请输入卡号" :inputBorder="false" @blur="getCardValue"/>
// js
data() {
	return {
		settleCardValue:''
	}
}
methods:{
	getCardValue(e){
		console.log(e.detail.value);
		// 拿到value值后,赋值给 settleCardValue,以便后续使用
		this.settleCardValue = e.detail.value
	}
}

回显数据,我这边是后端返回的数据,我需要回显到 页面上,前端拿到值之后,直接赋值给 settleCardValue 即可。

methods:{
	// 商户信息回显
	dispMerchantInfoApi(){
		let obj = {
			customerId: uni.getStorageSync('customerId')
		}
		getMySettleCard(obj).then(res => {
			if (res.data.HEAD.CODE == '000') {
				// res.data.BODY.account 后端返回的数据
				// 直接赋值给 settleCardValue 即可
				this.settleCardValue = res.data.BODY.account
			}
		})
	}
}

结果图:
在这里插入图片描述

  • 3
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
在微信小程序开发中,如果在iOS手机上遇到了键盘弹起时遮挡上面内容问题,可以通过以下方法解决。 首先,我们需要获取键盘的高度。在小程序中,可以使用wx.getSystemInfoSync()方法来获取系统信息,其中包括键盘的高度。 接下来,我们需要监听键盘的弹起和隐藏事件。可以通过监听页面的focus和blur事件来实现。当input框被选中时(focus事件),我们可以将页面整体上移一个键盘高度的距离,以保证输入框不被键盘遮挡。当input框失去焦点时(blur事件),我们将页面恢复到原始位置。 具体实现时,可以在页面的onLoad生命周期函数中调用wx.getSystemInfoSync()方法获取系统信息,并存储键盘的高度。然后在页面的focus和blur事件中分别设置页面的上下边距,以达到上移和恢复的效果。 示例代码如下: ``` // 在页面的onLoad生命周期函数中获取系统信息 onLoad: function() { var that = this; wx.getSystemInfoSync({ success: function(res) { that.setData({ keyboardHeight: res.windowHeight * 0.75 // 假设键盘高度占屏幕高度的3/4 }); } }); }, // input框获取焦点时的事件处理函数 onFocus: function() { this.setData({ marginTop: -this.data.keyboardHeight }); }, // input框失去焦点时的事件处理函数 onBlur: function() { this.setData({ marginTop: 0 }); } ``` 需要注意的是,根据不同手机型号和键盘设置的不同,键盘的高度可能有所差异,因此上述代码中获取到的键盘高度是一个近似值,可以根据实际情况进行调整。 以上是解决微信小程序开发中iOS手机键盘弹起时遮挡上面内容的一种方法,希望能对你有所帮助。
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值