uniapp获取节点滚动位置

uniapp获取节点滚动位置

<view class="ratio">
	<view v-for="(item , index) in commonList" :key="index" class="select_node">
		//内容随意	
	</view>
</view>
data() {
	return {
		commonList:[{
			commonRatio:'0',      
			referrer:'' ,           
		    person:'',             
		}], 
		
	}
},
methods(){
	createScrollTo(){
		uni.createSelectorQuery()
		.in(this)
		    .select(".ratio")//  外层节点
		    .boundingClientRect((data) => {
		    
				uni.createSelectorQuery()
				.in(this)
				.selectAll('.select_node') //所有目标节点  select只能获取一个,selectAll可以获取所有
				.boundingClientRect((res) => {
					const resLength = res.length - 1  //最后一个
				    uni.pageScrollTo({
						scrollTop: res[resLength].top - data.top,//元素距离顶部的距离减去最外层盒子的滚动距离
				    });
				}).exec();
				
		}).exec();
	}
}

动态点击实现滚动效果, 也可实现多个节点点击

.selectAll(‘.select_node’) 动态传入即可 ,必须是节点名
例如createScrollTo(name){
.selectAll(name)
}

附官方文档

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值