微信小程序页面上推

微信小程序中的表单输入组件默认上推页面，不符合某些需求，下面是一个解决方案。

  1. 设置表单组件的默认上推页面属性adjust-position=“{{false}}”
  2. 表单组件绑定focus事件
1
<input bindfocus="focushandler"></input>
1
2
3
4
5
6
focushandler(e){
  //height为输入框距离页面底部高度
	this.setData({
    bottom:e.detail.height
  })
}

输入区域绝对定位

1
<input bindfocus="focushandler" style="{{bottom?'position:absolute;bottom:'+bottom+'px;':''}}"></input>

扫一扫，分享到微信

微信分享二维码

tag:

    缺失模块。
    1、请确保node版本大于6.2
    2、在博客根目录（注意不是yilia根目录）执行以下命令：
    npm i hexo-generator-json-content --save

    3、在根目录_config.yml里添加配置： 

      jsonContent:
    meta: false
    pages: false
    posts:
      title: true
      date: true
      path: true
      text: false
      raw: false
      content: false
      slug: false
      updated: false
      comments: false
      link: false
      permalink: false
      excerpt: false
      categories: false
      tags: true