ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

#uni-app#元素节点操作-uni.createSelectorQuery(),实现页面定位

2021-12-12 17:31:27  阅读:224  来源: 互联网

标签:app 版块 createSelectorQuery 跳转 uni 定制 id 页面


1、需求:

使用uni-app,实现点击页面里面的某一个版块,(滚动到)跳转到当前同一个页面的指定位置

2、代码示例:

//定制目标按钮
<button class="custom-btn" @click="totarget">定制目标</button>

//12月挑战版块,设置id类名
<view id="chanllge-month">
	<swiper class="challenge-list" :interval="50" >
		<swiper-item v-for="(item ,index) in listChallenge">	
		</swiper-item>			
	</swiper>
</view>
//定制目标按钮的方法里,select()里面加上想要跳转的版块的类名(id:# class:.)
totarget() {
			uni.createSelectorQuery().select('#chanllge-month').boundingClientRect(data=>{//目标位置的节点:类或者id
				uni.pageScrollTo({ duration: 100,scrollTop:data.top, })
				}).exec()
			}

3、效果:

标签:app,版块,createSelectorQuery,跳转,uni,定制,id,页面
来源: https://blog.csdn.net/ZHENGCHUNJUN/article/details/121889169

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有