说明：

微信小程序对于我来说一直是个小白，以前没接触了解过，这上周给到一个需求就是一个之前的小程序要在旧的详情页基础上改造，只能闭着眼过河，边做边查小程序api了。

问题：

今天在使用van-field输入框时遇到一个问题，在点击输入框准备输入数据时，页面会滚动到上面，导致看不到输入框(真机上才会有这个问题，输入框被软键盘遮住了)

找问题思路：

一开始以为是手机对van-field的兼容性问题，后面发现其它页面也有用到van-field但是却没有这个问题，于是想到是不是scroll-view(旧代码，用于给页面顶部的tab切换时滚动到相应位置)的问题呢，于是把scroll-view注释掉后，发现输入框就正常了；那怎么即能保证tab正常切换，输入框也正常输入呢？于是就想到，看能不能scroll-view在某个操作时禁止页面滚动呢？
看了微信小程序官方的说明点这里，没找到能在某个操作下禁止滚动的方法或属性；
后面就干脆不用这个scroll-view组件了，用其它方式也可以实现滚动呀(比如window就有自带的滚动方法window.scrollTo(xpos,ypos))

scroll-view用于页面顶部的tab切换，如下图：
image.png

问题解决：

先在页面初使化时，获取评价、详情模块到页面顶部的高度；
再使用微信小程序自带的：wx.pageScrollTo方法实现滚动

  1. //获取评价、详情模块的高度
  2. let query = wx.createSelectorQuery();
  3. query.select('.EvaluateListBox-box').boundingClientRect(res => { //获取评论距离页面顶部高度
  4.   that.setData({
  5.     commentBoxTop: res.top
  6.   })
  7. }).exec()
  8. query.select('.infoBox').boundingClientRect(res => { //获取详情部分距离页面顶部高度
  9.   that.setData({
  10.     infoBoxTop: res.top
  11.   })
  12. }).exec()
  1. //滚动实现
  2. wx.pageScrollTo({
  3.   scrollTop:this.data.infoBoxTop,
  4.   duration: 300,
  5. });