Don't talk nonsense and go directly to the code
<template>
<view class="box">
<scroll-view scroll-y @scroll="onScroll" :style="{'height': deviceHeight + 'px'}" :scroll-into-view="intoView">
<van-sticky>
<view class="top_nav" @click="goback">
<van-icon name="arrow-left" size='20'/>
<view class="top_nav_right">
<view class="top_nav_right_left">
<!-- 未收藏 -->
<image class="img" src="../../static/detail/collect.png" mode=""></image>
<!-- 收藏 -->
<!-- <image class="img" src="../../static/detail/collect_sel.png" mode=""></image> -->
</view>
<view class="top_nav_right_right">
<image class="img" src="../../static/detail/share.png" mode=""></image>
</view>
</view>
</view>
</van-sticky>
<view class="top_swiper">
<swiper class="swiper" circular previous-margin="20px" next-margin="20px" autoplay>
<swiper-item v-for="n in 10" class="swiper_item">
<view class="swiper_item_img">
<image class="img" src="https://cdn.uviewui.com/uview/swiper/swiper2.png" mode=""></image>
</view>
</swiper-item>
</swiper>
</view>
<view class="swiper_bot_box">
<view class="swiper_bot_box_title">
庐山风景名胜区
</view>
<view class="swiper_title_bot_star_box">
<view class="star">
<view class="smal_star" v-for="n in 6">
<image src="../../static/detail/star.png" class="img" mode=""></image>
</view>
</view>
<view class="shu"></view>
<view class="fraction">
4.8分
</view>
<view class="num_comment" >
1087条点评
</view>
</view>
<view class="small_tag">
“仙人洞、锦绣谷、看野生猕猴”
</view>
<view class="location_box" id="vote">
<view class="location_box_left">
江西省 九江 庐山市秀丽路12434号
</view>
<view class="location_box_right">
<image src="../../static/detail/cb3553659bf0bef81e27f94bf6c4913.png" class="img" mode=""></image>
</view>
</view>
</view>
<view class="line"></view>
<van-sticky offset-top="44px" >
<view class="tabs_box">
<view class="tabs_item" v-for="(item,index) in tabs" :key="item.name" @click="changeTabs(index)">
<view class="tabs_item_name" :class="item.flag == true ? 'active' : ''">
{
{item.name}}
</view>
<view class="bot_line" v-show="item.flag"></view>
</view>
</view>
</van-sticky>
<view class="vote_box floorType" >
<view class="vote_title" >
<view class="vote">票</view>
<view class="vote_text">
景点门票
</view>
</view>
<view class="vote_item" v-for="item in 6" :key="item">
<view class="vote_item_top">
成人票
</view>
<view class="vote_item_bot_box">
<view class="vote_item_bot_box_left">
<view class="vote_item_bot_box_left_top">
随买随用 全程通票 这是后台配置的介绍
</view>
<view class="vote_item_bot_box_left_middle">
<view class="vote_item_bot_box_left_middle_item vote_item_bot_box_left_top">
随时退
</view>
<view class="shu"></view>
<view class="vote_item_bot_box_left_middle_item vote_item_bot_box_left_top">
无需换票
</view>
<view class="shu"></view>
<view class="vote_item_bot_box_left_middle_item vote_item_bot_box_left_top">
选择的标签
</view>
</view>
<view class="vote_item_bot_box_left_bot">
<view class="bot_tags">
已售：5.3万
</view>
<view class="bot_tags">
购买须知<van-icon name="arrow" />
</view>
</view>
</view>
<view class="vote_item_bot_box_right">
<view class="right_price">
￥158
</view>
<view class="right_price_bot_btn" >
<view class="order_btn" @click="goSubmitOrder">
预定
</view>
</view>
</view>
</view>
</view>
<!-- <view style="height: 40px;" id="comment">
</view> -->
</view>
<!-- 评论 -->
<view class="comment_box floorType" id="comment">
<view class="comment_box_top">
<view class="comment_box_top_left" >
热门评论（1887）
</view>
<view class="comment_box_top_right"><van-icon name="arrow" /></view>
</view>
<view class="comment_box_item" v-for="n in 3">
<view class="comment_item_left">
<image src="../../static/login/wx.png" class="img" mode=""></image>
</view>
<view class="comment_item_right">
<view class="comment_item_top">
<view class="comment_item_top_left">
匿名用户
</view>
<view class="comment_item_top_right">
发布于 12小时前
</view>
</view>
<view class="comment_item_right_rote">
<view class="comment_item_right_rote_left">
打分
</view>
<view class="comment_item_right_rote_right">
<view class="star">
<view class="smal_star" v-for="n in 6">
<image src="../../static/detail/star.png" class="img" mode=""></image>
</view>
</view>
</view>
</view>
<view class="comment_content">
观光车还是很划算的，一路上轻松快乐观光车
观光车还是很划算的，一路上轻松快乐观光车
观光车还是很划算的，一路上轻松快乐观光车
观光车还是很划算的，一路上轻松快乐观光车
</view>
<view class="comment_item_bot_imgs">
<view class="comment_img" v-for="n in 3">
<image src="https://cdn.uviewui.com/uview/swiper/swiper3.png" class="img" mode=""></image>
</view>
</view>
</view>
</view>
</view>
<!-- 景点 -->
<view class="attractions_box floorType" id="attractions" >
<view class="attractions_top" >
相关景点推荐
</view>
<view class="attractions_item_box">
<view class="attractions_item" v-for="n in 8" @click="goDetail">
<view class="attractions_item_top">
<image src="https://cdn.uviewui.com/uview/swiper/swiper3.png" class="img" mode=""></image>
</view>
<view class="attractions_item_bot">
<view class="attractions_item_bot_title">
庐山西海主景区
</view>
<view class="attractions_item_bot_comment">
<view class="attractions_item_bot_comment_left">
<view class="star">
<view class="smal_star smaller" v-for="n in 5">
<image src="../../static/detail/star.png" class="img" mode=""></image>
</view>
</view>
</view>
<view class="attractions_item_bot_comment_right">
1087条点评
</view>
</view>
</view>
</view>
</view>
</view>
<view style="height: 120rpx;width: 750rpx;"></view>
<view class="bot_box">
<view class="left_bot_box">
<input type="text" placeholder="请评论内容" placeholder-style="color:#CACACA;fontsize:32rpx;">
</view>
<view class="right_bot_box">
<view class="right_bot_box_top">
<image src="../../static/detail/send.png" class="img" mode=""></image>
</view>
<view class="right_bot_box_right">
发送
</view>
</view>
</view>
</scroll-view>
</view>
</template>
<script>
export default {
data() {
return {
tabs:[
{
name:'门票',
flag:true
},
{
name:'评论',
flag:false
},
{
name:'相关推荐',
flag:false
}
],
voteTop:null,
commentTop:null,
attractionsTop:null,
voteHeight:null,
commentHeight:null,
attractionsHeight:null,
allHeight:0,
intoView:'',
deviceHeight:0,
lastHeight:null,
oneHeight:null,
anchorArray:[]
}
},
mounted() {
this.getDevice()
this.getHeight()
},
methods: {
onScroll(event) {
this.getHeight()
let scrollTop = event.detail.scrollTop
let scrollArr= this.anchorArray;
if(this.lastHeight-scrollTop<this.deviceHeight){
if(this.oneHeight<this.deviceHeight&&this.tabs[2].flag==true){
return
}
}
// 之前的方法
for(let i=0;i<scrollArr.length;i++){
if(scrollTop>=0&&scrollTop<scrollArr[0]){
// selectFloorIndex控制筛选块高亮显示
for(let i = 0;i<this.tabs.length;i++) {
this.tabs[i].flag = false
}
this.tabs[0].flag = true
}else if(scrollTop>=scrollArr[i-1]&&scrollTop<scrollArr[i]) {
for(let m = 0;m<this.tabs.length;m++) {
this.tabs[m].flag = false
}
this.tabs[i].flag = true
}
}
},
getHeight() {
// 顶部tab栏用的
let query = uni.createSelectorQuery().in(this);
let heightArr =[];
let h = -100;
query.selectAll('.floorType').boundingClientRect((react)=>{
react.forEach((res)=>{
h=h+res.height;
heightArr.push(h)
// 最后一个容器的高度
if(res.id=="attractions"){
this.lastHeight =res.bottom
this.oneHeight =res.height
}
})
this.anchorArray = heightArr
}).exec();
},
changeTabs(index) {
if(index == 0) {
this.intoView = 'vote'
}else if (index == 1) {
this.intoView = 'comment'
}else if (index == 2) {
this.intoView = 'attractions'
}
for(let i = 0;i<this.tabs.length;i++) {
this.tabs[i].flag = false
}
this.tabs[index].flag = true
},
goback(){
uni.navigateBack({
delta:1
})
},
goSubmitOrder(){
uni.navigateTo({
url:'/pages/submitOrder/submitOrder'
})
},
goDetail(){
uni.navigateTo({
url:'/pages/detail/detail'
})
},
getDevice(){
uni.getSystemInfo({
success:(res) => {
// console.log(res)
let screenHeight = res.screenHeight
let deviceHeight = screenHeight
this.deviceHeight = deviceHeight
},
fail (err) {
console.log(err);
}
})
}
}
}
</script>
<style scoped>
.location_box {
display: flex;
justify-content: space-between;
align-items: center;
padding-top: 20rpx;
margin-top: 20rpx;
border-top: 2rpx solid #f8f8f8;
}
.location_box_left {
font-size: 26rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #1C1C1E;
}
.location_box_right {
width: 40rpx;
height: 38rpx;
}
.attractions_box {
padding: 20rpx 28rpx 50rpx 28rpx;
box-sizing: border-box;
}
.bot_box {
background-color: #fff;
width: 750rpx;
box-sizing: border-box;
display: flex;
justify-content: space-between;
align-items: center;
padding: 16rpx 56rpx 36rpx 28rpx;
position: fixed;
bottom: 0;
left: 0;
}
.left_bot_box {
width: 580rpx;
height: 84rpx;
background: #F2F2F2;
border-radius: 44rpx;
}
.left_bot_box input {
width: 100%;
height: 88rpx;
padding-left: 40rpx;
line-height: 88rpx;
}
.right_bot_box {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.right_bot_box_top {
width: 64rpx;
height: 53rpx;
margin-bottom: 3rpx;
}
.right_bot_box_right {
font-size: 24rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #1C1C1E;
}
.attractions_item_box {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
}
.smaller {
width: 24rpx !important;
height: 24rpx !important;
}
.attractions_item_bot_comment {
display: flex;
}
.attractions_item_bot_comment_right {
font-size: 24rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #1C1C1E;
margin-left: 16rpx;
}
.attractions_item_bot_title {
font-size: 32rpx;
font-family: PingFangSC-Semibold, PingFang SC;
font-weight: 600;
color: #1C1C1E;
margin-bottom: 14rpx;
}
.attractions_item_bot {
padding: 20rpx 16rpx;
}
.attractions_item_top {
width: 336rpx;
height: 240rpx;
}
.attractions_item {
background: #FFFFFF;
border-radius: 4rpx;
border: 2rpx solid #F8F8F8;
overflow: hidden;
width: 336rpx;
margin-top: 30rpx;
}
.attractions_top {
font-size: 28rpx;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #1C1C1E;
}
.comment_item_right_rote {
display: flex;
align-items: center;
margin: 20rpx 0;
}
.comment_img {
width: 180rpx;
height: 180rpx;
margin-left: 20rpx;
}
.comment_item_bot_imgs {
padding-bottom: 42rpx;
display: flex;
align-items: center;
margin-left: -20rpx;
}
.comment_content {
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 3; /* 控制行数 */
-webkit-box-orient: vertical;
font-size: 28rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #1C1C1E;
margin-bottom: 16rpx;
}
.comment_item_right_rote_left {
font-size: 28rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #1C1C1E;
margin-right: 20rpx;
}
.comment_box_item {
display: flex;
justify-content: space-between;
border-bottom: 2rpx solid #F8F8F8;
padding-top: 40rpx;
}
.comment_item_top_right {
font-size: 24rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #B4B4B4;
}
.comment_item_top {
display: flex;
align-items: center;
justify-content: space-between;
}
.comment_item_top_left {
font-size: 28rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #4688F6;
}
.comment_item_right {
width: 696rpx;
}
.comment_item_left {
width: 84rpx;
height: 84rpx;
border-radius: 50%;
overflow: hidden;
margin-right: 10rpx;
}
.comment_box_top{
display: flex;
justify-content: space-between;
align-items: center;
font-size: 28rpx;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #1C1C1E;
}
.comment_box{
padding: 20rpx 28rpx 50rpx 28rpx;
box-sizing: border-box;
}
.star {
display: flex;
align-items: center;
margin-left: -6rpx;
}
.smal_star {
width: 30rpx;
height: 30rpx;
margin-left: 6rpx;
}
.top_nav_right_right {
margin-left: 40rpx;
}
.top_nav_right_right,.top_nav_right_left {
width: 48rpx;
height: 48rpx;
}
.img {
width: 100%;
height: 100%;
vertical-align: top;
display: inline-block;
}
.box {
width: 750rpx;
height: 100%;
background-color: #fff;
}
.top_nav {
height: 88rpx;
/* width: 678rpx; */
line-height: 88rpx;
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 36rpx;
margin-bottom: 20rpx;
background-color: #fff;
}
.top_nav_right {
display: flex;
}
.top_nav_right_left {
margin-right: 20rpx;
}
.swiper_item {
width: 750rpx;
height: 362rpx;
}
.swiper_item_img {
/* width: 650rpx; */
padding-left:10rpx;
padding-right: 10rpx;
height: 100%;
}
.swiper_bot_box {
padding: 32rpx 28rpx 40rpx 28rpx;
/* width: 694rpx; */
}
.swiper_bot_box_title {
font-size: 36rpx;
font-family: PingFangSC-Semibold, PingFang SC;
font-weight: 600;
color: #1C1C1E;
margin-bottom: 22rpx;
}
.swiper_title_bot_star_box {
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-items: center;
font-size: 28rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #1C1C1E;
margin-bottom: 20rpx;
}
.shu {
width: 2rpx;
height: 28rpx;
background-color: #E6E6E6;
margin: 0 10rpx;
}
.fraction {
margin-right: 16rpx;
}
.small_tag {
display: inline-block;
background: #eaf2fe;
border-radius: 8rpx;
overflow: hidden;
font-size: 22rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #5a95f7;
padding: 8rpx 24rpx;
text-align: center;
}
.line {
width: 750rpx;
height: 16rpx;
background-color: #f8f8f8;
}
.tabs_box {
background-color: #FFFFFF;
padding-top: 26rpx;
padding-bottom: 20rpx;
margin-left: 50%;
transform: translateX(-50%);
width: 100%;
display: flex;
align-items: center;
justify-content: space-around;
}
.tabs_item {
display: flex;
align-items: center;
flex-direction: column;
}
.tabs_item_name {
font-size: 32rpx;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #1C1C1E;
z-index: 10;
}
.bot_line {
width: 100%;
height: 6rpx;
background: linear-gradient(128deg, #6AD8FF 0%, #5C8DFB 100%);
margin-top: -6rpx;
/* z-index: -1; */
}
.active{
font-size: 34rpx;
font-weight: 600;
}
.vote_box {
background-color: #FFFFFF;
padding: 20rpx 28rpx 50rpx 28rpx;
}
.vote_title {
display: flex;
align-items: center;
}
.vote {
background: #4688F6;
border-radius: 2rpx;
font-size: 22rpx;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #FFFFFF;
line-height: 30rpx;
text-align: center;
padding: 2rpx 4rpx;
margin-right: 20rpx;
}
.vote_text {
font-size: 28rpx;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #1C1C1E;
}
.vote_item {
padding: 40rpx 0;
border-bottom: 2rpx solid #f8f8f8;
}
.vote_item_top {
font-size: 32rpx;
font-family: PingFangSC-Semibold, PingFang SC;
font-weight: 600;
color: #1C1C1E;
margin-bottom: 16rpx;
}
.vote_item_bot_box_left_top {
font-size: 26rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #696969;
margin-bottom: 16rpx;
}
.shu {
width: 2rpx;
height: 26rpx;
background-color: #E6E6E6;
margin: 0 16rpx;
}
.vote_item_bot_box_left_middle {
display: flex;
align-items: center;
}
.vote_item_bot_box_left_bot {
display: flex;
flex-direction: row;
align-items: center;
flex-wrap: wrap;
}
.bot_tags {
padding: 4rpx 16rpx;
background: #F2F2F2;
border-radius: 4rpx;
margin-right: 20rpx;
font-size: 22rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #696969;
}
.vote_item_bot_box {
display: flex;
justify-content: space-between;
align-items: center;
}
..vote_item_bot_box_left{
width: 465rpx;
}
.vote_item_bot_box_right {
width: 229rpx;
text-align: right;
display: flex;
flex-direction: column;
}
.right_price {
font-size: 36rpx;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #E85730;
margin-bottom: 20rpx;
}
.order_btn {
display: inline-block;
width: 120rpx;
height: 56rpx;
background: linear-gradient(136deg, #FFAC70 0%, #FA4A18 100%);
border-radius: 28rpx;
text-align: center;
line-height: 56rpx;
font-size: 28rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #FFFFFF;
}
</style>
renderings
The tab bar and scrolling are corresponding, scrolling to the corresponding position will switch the tab bar, switching the tab will also scroll to the corresponding position, Baidu 800 times