废话不多说直接上代码
<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>
效果图
tab拦和滚动是相应的，滚动到相应的位置会切换tab拦，切换tab也会滚动到相应的位置，百度了八百遍
扫一扫
6202
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
