小程序使用wx.pageScrollTo()做锚点定位的问题记录

平时在填表时,表单比较长要往下滚,校验必填项,并让该项滚动到页面中间,方便用户直接填写

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();
      }

猜你喜欢

转载自blog.csdn.net/weixin_43106777/article/details/128285607