你的位置:首页 > 信息动态 > 新闻中心
信息动态
联系我们

解决 微信小程序 input错位

2021/12/16 23:49:56

微信小程序input标签,如果是通过view包裹并使用了定位进行动态渲染,在input获取焦点时,会出现内容错位的问题。

解决:

最外层标签使用scroll-view包裹,当input获取到焦点时,scroll-view的属性scroll-y设置为false,当input失去焦点时,scroll-y设置为true

示例代码

<scroll-view scroll-y="{{isScroll}}">
	//页面内容
	<view>
		// input
		<input bindfocus="onfocus" bindblur="onblur" type="text" placeholder="placeholder" />
	</view>
</scroll-view>
    onfocus: function() {
      this.setData({isScroll: false})
    },
    onblur: function () {
      this.setData({isScroll: true})
    },