在uniapp/微信小程序设置scrollTop初始值

一、概述

使用HTML5在浏览器设置scrollTop初始值初始值，由于可以通过dom树定位、操作元素，实现相对比较简单。

而在vue等框架中，由于对dom树的淡化，导致通过dom树设置scrollTop等属性值难度较大、且不易成功！

二、浏览器设置scrollTop初始值

在浏览器设置scrollTop初始值可以通过以下两种方式实现

（1）scrollTo()方法

window.scrollTo(0,0)

（2）scrollTo对象

window.scrollTo({
	left:0,
	top:0
})

三、uniapp/微信小程序设置scrollTop初始值

在uniapp/微信小程序中，可以利用scroll-into-view属性，通过自己构造定位器，间接设置scrollTop初始值。  

1、实现流程如下

/*<template>*/

<scroll-view :scroll-into-view="'tab'+testId" scroll-y>
    
<!--代码段-->
    
<!-- 定位器 -->
<view id="tabtestsw" style="height: 1rpx;position: absolute;top:260rpx;"></view>
    
<!--代码段-->
    
</scroll-view>

/*js*/

data(){
    return{
        testId:null,
    }
},
//生命函数
mounted(){
    this.testId="testsw"
}

2、注意

（1）scroll-into-view的值必须为动态赋值，即在js中通过setData或其他方法给其赋值才能生效！

（2）定位器position必须为absolute，才不会影响<scroll-view></scroll-view>中布局，top属性值可根据想设置的scrollTop自行调节。

（3）mounted可换为其他生命函数或者触发函数，但不可为页面渲染完成前的生命函数（如：beforeCreate、create等）

3、附上：uniapp的scroll-view属性值

属性名	类型	默认值	说明	平台差异说明
scroll-x	Boolean	false	允许横向滚动
scroll-y	Boolean	false	允许纵向滚动
upper-threshold	Number/String	50	距顶部/左边多远时（单位px），触发 scrolltoupper 事件
lower-threshold	Number/String	50	距底部/右边多远时（单位px），触发 scrolltolower 事件
scroll-top	Number/String		设置竖向滚动条位置
scroll-left	Number/String		设置横向滚动条位置
scroll-into-view	String		值应为某子元素id（id不能以数字开头）。设置哪个方向可滚动，则在哪个方向滚动到该元素
scroll-with-animation	Boolean	false	在设置滚动条位置时使用动画过渡
enable-back-to-top	Boolean	false	iOS点击顶部状态栏、安卓双击标题栏时，滚动条返回顶部，只支持竖向	app-nvue，微信小程序
show-scrollbar	Boolean	false	控制是否出现滚动条	App-nvue 2.1.5+
refresher-enabled	Boolean	false	开启自定义下拉刷新	H5、app-vue 2.5.12+,微信小程序基础库2.10.1+
refresher-threshold	Number	45	设置自定义下拉刷新阈值	H5、app-vue 2.5.12+,微信小程序基础库2.10.1+
refresher-default-style	String	"black"	设置自定义下拉刷新默认样式，支持设置 black，white，none，none 表示不使用默认样式	H5、app-vue 2.5.12+,微信小程序基础库2.10.1+
refresher-background	String	"#FFF"	设置自定义下拉刷新区域背景颜色	H5、app-vue 2.5.12+,微信小程序基础库2.10.1+
refresher-triggered	Boolean	false	设置当前下拉刷新状态，true 表示下拉刷新已经被触发，false 表示下拉刷新未被触发	H5、app-vue 2.5.12+,微信小程序基础库2.10.1+
enable-flex	Boolean	false	启用 flexbox 布局。开启后，当前节点声明了 display: flex 就会成为 flex container，并作用于其孩子节点。	微信小程序 2.7.3
scroll-anchoring	Boolean	false	开启 scroll anchoring 特性，即控制滚动位置不随内容变化而抖动，仅在 iOS 下生效，安卓下可参考 CSS overflow-anchor 属性。	微信小程序 2.8.2
@scrolltoupper	EventHandle		滚动到顶部/左边，会触发 scrolltoupper 事件
@scrolltolower	EventHandle		滚动到底部/右边，会触发 scrolltolower 事件
@scroll	EventHandle		滚动时触发，event.detail = {scrollLeft, scrollTop, scrollHeight, scrollWidth, deltaX, deltaY}
@refresherpulling	EventHandle		自定义下拉刷新控件被下拉	H5、app-vue 2.5.12+,微信小程序基础库2.10.1+
@refresherrefresh	EventHandle		自定义下拉刷新被触发	H5、app-vue 2.5.12+,微信小程序基础库2.10.1+
@refresherrestore	EventHandle		自定义下拉刷新被复位	H5、app-vue 2.5.12+,微信小程序基础库2.10.1+
@refresherabort	EventHandle		自定义下拉刷新被中止	H5、app-vue 2.5.12+,微信小程序基础库2.10.1+

四、结语

其中，使用@scroll触发方法，可以在返回值的detail中查询到scroll-top，scroll-left等值，但是笔者给其赋值的几次尝试，都失败了！

如果可以通过直接赋值scroll-top实现上述业务需求，无疑是一种更加优化的方法，若有朋友成功实现了，欢迎一起讨论交流。