搜索
您的当前位置:首页正文

解决微信小程序input textarea输入框内容以及palceholder随页面滚动式跟着滚动,飘起来了。

来源:易榕旅网

bug 类型效果:

解决办法:

测试了网上的监听滚动事件,手动调用wx.hideKeyboard等方式,都不好使。

大概原因: 在页面出现滚动时,输入框跑了。 如果不是滚动页面,不能滚动,就不会出现。

刚开始整个外层标签是<view></view>, 换成<scroll-view></scroll-view> 再加个样式min-height:100vh; 就完美解决了。

原因可能和小程序原生对scroll-view内的input等滚动做了更好的优化,滚动式input及时失去焦点。

查询文档,另外看到两种解决办法:记录一下

这三种方法,未亲测。

https://developers.weixin.qq.com/community/develop/article/doc/000a00e1fd0790488e6a034f156813

1 页面可通过样式的滚动(overflow-y: auto)来写,但是不要用 -webkit-overflow-scrolling: touch;

2、页面用scroll-view,通过变量{sysScroll}来控制

view: 
<scroll-view scroll-y="{{sysScroll}}"  scroll-top="{{scrollTop}}" class="scroll-hei-2 bg-def">
    <form >
      <input bindfocus="onfocus" bindblur="onblur" />
    </form>
</scroll-view>

js: 
  onfocus: function() {
    this.setData({sysScroll: false})
  },
  onblur: function (e, param, inst) {
    this.setData({sysScroll: true})
  }

3、试一下这个属性 always-embed = true

因篇幅问题不能全部显示,请点此查看更多更全内容

Top