uniapp-小程序锚点定位

<view class="performance-type-lists">
	<view :class="type_id==1?'active':''" data-type_id=1  @tap="togglePosition" data-classname="performance-important-tips">
		<view>简介view>
		<view>view>
	view>
	<view @tap="togglePosition" :class="type_id==2?'active':''" data-type_id=2 data-classname="performance-attention">
		<view>须知view>
		<view>view>
	view>
	<view @tap="togglePosition" :class="type_id==4?'active':''" data-type_id=4 data-classname="recomment-part">
		<view>推荐view>
		<view>view>
	view>
view>

<view class="performance-desc">
	<view class="performance-introduction">
		<view class="performance-introduction-title">节目介绍view>
		<view class="performance-introduction-content">

			剧目简介:
			张继钢老师倾尽全部心血，为实现艺术理想，献礼新中国成立70周年，创作出这一部前所未见的舞蹈史诗《黄河》。演出开始，未见其人、先闻其声，黄河潺潺的水流声，将人们带回到黄河岸边，“一个漂泊在河上近万年的老船”，以内心独白的方式，缓缓讲述着这条河的故事，黄河人的故事，中国的故事。以诗句命名的《九曲黄河万里沙》《黄河之水天上来》《黄河入海流》三大乐章以精彩的艺术呈现，吸引观众跟随着这条河从遥
			大乐章以精彩的艺术呈现，吸引观众跟随着这条河从遥新中国成立70周年，创作出这一部前所未见的舞蹈史诗《黄河》。演出开始，未见其人、先闻其声，黄河潺潺的水流声，将人们带回到黄河岸边，“一个漂泊在河上近万年的老船”，以内心独白的方式，缓缓讲述着这条河的故事，黄河人的故事，中国的故事。以诗句命名的《九曲黄河万里沙》《黄河之水天上来》《黄河入海流》三大乐章以精彩的艺术呈现，吸引观众跟随着这条河从遥
			大乐章以精彩的艺术呈现，吸引观众跟随着这条河从遥
		view>
		<view class="performance-introduction-more">展开更多view>
	view>
	
	<view class="performance-attention">
		<view class="big-title performance-big-title">须知事项view>
		<view class="sub-title performance-sub-title">购票须知:view>
		<view class="performance-attention-lists">
			<view class="performance-attention-item">
				<view class="performance-attention-item-icon icon iconfont icon-duigou1">view>
				<view class="performance-attention-item-content">
					<view class="small-title performance-attention-item-title">关于票面价view>
					<view class="performance-attention-item-desc">
						个别节目票纸上体现的价格与详情页选择的「票面价」可能存在差别(通常会低于票面价)，但该票对应的实际价格档位、座位均不受影响。如介意请慎购。
					view>
				view>
			view>
			<view class="performance-attention-item">
				<view class="performance-attention-item-icon icon iconfont icon-duigou1">view>
				<view class="performance-attention-item-content">
					<view class="small-title performance-attention-item-title">限购说明view>
					<view class="performance-attention-item-desc">
						该节目设置了单次购买数量限制，每笔订单最多购买6张
					view>
				view>
			view>
			<view class="performance-attention-item">
				<view class="performance-attention-item-icon icon iconfont icon-duigou1">view>
				<view class="performance-attention-item-content">
					<view class="small-title performance-attention-item-title">儿童购票说明view>
					<view class="performance-attention-item-desc">
						儿童一律凭票入场
					view>
				view>
			view>
		view>
		<view class="sub-title performance-sub-title">观看提示:view>
		<view class="performance-attention-lists">
			<view class="performance-attention-item">
				<view class="performance-attention-item-icon icon iconfont icon-duigou1">view>
				<view class="performance-attention-item-content">
					<view class="small-title performance-attention-item-title">关于票面价view>
					<view class="performance-attention-item-desc">
						个别节目票纸上体现的价格与详情页选择的「票面价」可能存在差别(通常会低于票面价)，但该票对应的实际价格档位、座位均不受影响。如介意请慎购。
					view>
				view>
			view>
			<view class="performance-attention-item">
				<view class="performance-attention-item-icon icon iconfont icon-duigou1">view>
				<view class="performance-attention-item-content">
					<view class="small-title performance-attention-item-title">限购说明view>
					<view class="performance-attention-item-desc">
						该节目设置了单次购买数量限制，每笔订单最多购买6张
					view>
				view>
			view>
			<view class="performance-attention-item">
				<view class="performance-attention-item-icon icon iconfont icon-duigou1">view>
				<view class="performance-attention-item-content">
					<view class="small-title performance-attention-item-title">儿童购票说明view>
					<view class="performance-attention-item-desc">
						儿童一律凭票入场
					view>
				view>
			view>
		view>
	view>
	
	<view class="recomment-part">
		<view class="recomment-title big-title">剧目推荐view>
		<performanceLists :performerlists="performerlists">performanceLists>
	view>
view>

<script>
export default {
	methods:{
		togglePosition(e){
				let classname = e.currentTarget.dataset.classname;
				this.type_id = e.currentTarget.dataset.type_id;
				 //从当前位置到达评论区域
				uni.createSelectorQuery().select('.'+classname).boundingClientRect(data=>{//目标位置的节点：类或者id
					  uni.createSelectorQuery().select("#container").boundingClientRect(res=>{//最外层盒子的节点：类或者id
							console.log(data.top)
							console.log(res.top)
							uni.pageScrollTo({
								  duration: 100,//过渡时间
								  scrollTop:data.top - res.top -200,//到达距离顶部的top值
							})
					  }).exec()
				}).exec();
			},
			
	}
}
script>

效果