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

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、效果:

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

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

上一篇:uniapp选择所有城市通过索引方式(源码自带所有城市json格式数据)


下一篇:如何创建uni-app项目