uni-app 滚动到指定位置

在这里插入图片描述
方法1:使用标签,可以将页面横向(或纵向)滚动到指定位置
无法滚动 将代码放在setTimeout,nextTick里执行

<!-- 左边 -->
			<scroll-view show-scrollbar="false" scroll-y="true" class="left-box"
				:scroll-top="scrollLeftTop" scroll-with-animation="true">
				<view class="scroll-view-item" v-for="(item,index) in servicesLeftList" :key="item.id"
					:id="'scroll' + activeLeftTab" :class="{'active':activeLeftTab==item.id}">
					{{item.name}}
				</view>
			</scroll-view>
data(){
return {
servicesLeftList:[],
scrollLeftTop:0,//滚动位置
activeLeftTab:"" //选中的样式
}
}

getData() {
	//接口
	getServicesTree().then(res => {
		this.servicesLeftList= res.data
		res.data.forEach((item, ind) => {
				setTimeout(()=>{
					uni.createSelectorQuery().in(this).select('#scroll' + item.id)
						.boundingClientRect(res => {
							scrollLeftTop.value = 65 * ind; // 设置滚动条距离左侧的距离    				        
						}).exec()
				},100)
		})
	})
}

方法二 使用uni.pageScrollTo 使页面纵向滚到到指定位置
建议设置height为auto :height:auto

<view class="left-box" >
				<view class="scroll-view-item" v-for="(item,index) in servicesLeftList" :key="item.id"
					 :class="{'active':activeLeftTab==item.id}">
					{{item.name}}
				</view>
			</view>
//方法
uni.pageScrollTo({
	scrollTop: 0,
	duration: 500
});

方法三 用scroll-view描点

 //左边 :scroll-top="scrollLeftTop"
<scroll-view scroll-y="true" class="left-box" scroll-with-animation="true"
	:scroll-into-view="tracingLeftPoint">
	<view class="scroll-view-item" v-for="(item,index) in servicesLeftList" :key="item.id"
		:id="'scroll' + item.id" :class="{'active':activeLeftTab==item.id}">
		{{item.name}}
	</view>
</scroll-view>

//方法

data(){
	retrun {
		tracingLeftPoint:"",//描点id
	}
}


	getData() {
	//接口
		getServicesTree().then(res => {
			this.servicesLeftList= res.data
			res.data.forEach((item, ind) => {
					setTimeout(()=>{
						this.tracingLeftPoint= 'scroll' + item.id
					},200)
			})
		})
	}

相关推荐

  1. uniapp 页面滚动指定位置的方法

    2024-05-11 09:04:06       28 阅读
  2. uniapp vu3 scroll-view 滚动指定位置

    2024-05-11 09:04:06       39 阅读
  3. uni-app 如何返回指定的页面

    2024-05-11 09:04:06       46 阅读
  4. uni-app中实现弹幕的滚动效果

    2024-05-11 09:04:06       58 阅读

最近更新

  1. docker php8.1+nginx base 镜像 dockerfile 配置

    2024-05-11 09:04:06       94 阅读
  2. Could not load dynamic library ‘cudart64_100.dll‘

    2024-05-11 09:04:06       100 阅读
  3. 在Django里面运行非项目文件

    2024-05-11 09:04:06       82 阅读
  4. Python语言-面向对象

    2024-05-11 09:04:06       91 阅读

热门阅读

  1. BS架构和CS架构的区别

    2024-05-11 09:04:06       32 阅读
  2. uni-app小知识点记录

    2024-05-11 09:04:06       31 阅读
  3. 【DL】FocalLoss的PyTorch实现

    2024-05-11 09:04:06       32 阅读
  4. IPsec协议:保障网络通信的安全利器

    2024-05-11 09:04:06       32 阅读
  5. [力扣题解]455. 分发饼干

    2024-05-11 09:04:06       27 阅读
  6. 每天一个数据分析题(三百一十七)-AB测试

    2024-05-11 09:04:06       35 阅读
  7. Mysql修改表结构、添加索引会锁表吗?

    2024-05-11 09:04:06       32 阅读
  8. 相机购买指南

    2024-05-11 09:04:06       28 阅读
  9. Scrum敏捷项目管理转型有哪些工具可以使用?

    2024-05-11 09:04:06       32 阅读