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>

效果