<!--顶部标签,点击这里的每一个标签,内容部分自动滑动到对应的地方-->
<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>
uniapp-小程序锚点定位
最新推荐文章于 2024-07-14 18:54:15 发布