平时在填表时,表单比较长要往下滚,校验必填项,并让该项滚动到页面中间,方便用户直接填写
1、一开始想的是使用scroll-view中设置属性scroll-into-view,来做锚点定位
但是做的过程中发现不好使,原因不明
注意:
使scroll-view组件方式,可能会有以下问题:仅记录我之前遇到的,不是绝对性的
1、纵向滚动(scroll-y)时,必须设置height值,并且不能使用css中的calc来计算,scroll-top值才会生效
2、小程序中双击顶部的textbar,无法回到顶部
3、无法触发page的上拉(ReachBottom)和下拉(PullDownRefresh)事件
4、当页面中position:fixed布局不受影响
2、然后想的是用wx.pageScrollTo()来做
但是做的过程中发现也不好使,
会出现滚着滚着top值不准确的情况
,原因不明
注意:
使wx.pageScrollTo(),可能会有以下问题:仅记录我之前遇到的,不是绝对性的
1、小程序中双击顶部的textbar,会默认回到顶部
2、能够触发page的上拉(ReachBottom)和下拉(PullDownRefresh)事件
3、当页面中有使用position:fixed布局时,弹出键盘时,fixed布局部分会闪屏
3、最终解决方案
onLoad () {
wx.getSystemInfoAsync({
success (res) {
_this.setData({
windowHeight: res.windowHeight
})
}
})
},
onSubmitEvent () {
// scrollTop 当前页面到顶部的距离
let scrollTop = 0;
// wx.createSelectorQuery() 返回一个 SelectorQuery 对象实例。在自定义组件或包含自定义组件的页面中,应使用 this.createSelectorQuery() 来代替。
const query = wx.createSelectorQuery();
// selectViewport() 选择显示区域。可用于获取显示区域的尺寸、滚动位置等信息。
// scrollOffset() 添加节点的滚动位置查询请求。以像素为单位。节点必须是 scroll-view 或者 viewport,返回 NodesRef 对应的 SelectorQuery。
query.selectViewport().scrollOffset();
// query.exec() 执行所有的请求。请求结果按请求次序构成数组,在 callback 的第一个参数中返回。
query.exec(function (res) {
scrollTop = res[0].scrollTop;
});
// boundingClientRect() 添加节点的布局位置的查询请求。相对于显示区域,以像素为单位。其功能类似于 DOM 的 getBoundingClientRect。返回 NodesRef 对应的 SelectorQuery。
query.select('#scrollView').boundingClientRect(res => {
// 距顶部的距离(scrollTop) + 距当前页面的距离(res.top) - 设备可视区域高度(this.data.windowHeight)
const top = scrollTop + res.top - this.data.windowHeight / 2
wx.pageScrollTo({
scrollTop: top,
duration: 200
})
}).exec();
}