uniapp 实现点击、滑动切换tab导航内容

<template>
<view class="prod_detail_container">
<view class="proImg_caro" id="box_caro" >
<view class="swiper_b1" v-if="imgUrls.length" >
<swiper circular="true" @change="changeMultipleItems">
<block v-for="(item,index) in imgUrls" :key="index" >
<swiper-item >
<image :src="item.pic" class="slide-image" @tap="previewImg(imgUrls,index)"></image>
</swiper-item>
</block>
</swiper>
</view>
<text class="imgPage">{{current}}/{{currentLength}}</text>
</view>
<view class="istab" id="istab1" v-show="isShowTile==true"> <!-- 这里用来 position: sticky 来达到吸顶效果， -->
<!-- 这里是头部tab -->
<view class="return_superior icon iconfont icon-xiangzuo"></view>
<view class="item1" :class="index==1?'somitem':''" @click="Change(1)">商品</view>
<view class="item2" :class="index==2?'somitem':''" @click="Change(2)">详情</view>
<view class="item3" :class="index==3?'somitem':''" @click="Change(3)">须知</view>
<view class="item4" :class="index==4?'somitem':''" @click="Change(4)">推荐</view>
<view class="last-option icon iconfont icon-gengduo"></view>
</view>
<view class="son1" id="son01">
<!-- 根据id 选择dom 获取其位置信息 -->
珠海布谷鸟生态乐园甜橙采摘节2大2小套票
</view>
<view class="son2" id="son02">
详情内容
</view>
<view class="son3" id="son03">
须知内容
</view>
<view class="son4" id="son04">
推荐内容
</view>

<!-- 底部导航 -->
<view class='footer acea-row row-between-wrapper'>
<view class="item" @click="couponTap2">
<view class="iconfont icon-kefu"></view>
<view>咨询客服</view>
</view>

<view @click="setCollect" class='item'>
<view class='iconfont icon-shoucang1' v-if="storeInfo.isRelation"></view>
<view class='iconfont icon-shoucang' v-else></view>
<view>收藏</view>
</view>
<!-- <navigator open-type='switchTab' class="animated item" :class="animated==true?'bounceIn':''" url='/pages/order_addcart/order_addcart'
hover-class="none">
<view class='iconfont icon-gouwuche1'>
<text class='num bg-color'>{{CartCount || 0}}</text>
</view>
<view>购物车</view>
</navigator> -->
<view class='bnt acea-row'>
<!-- <form @submit="joinCart" report-submit='true'>
<button class='joinCart bnts' form-type="submit">加入购物车</button>
</form> -->
<form @submit="goBuy" class="goBuy_form" report-submit='true' v-if="attr.productSelect">
<button class='buy bnts' form-type="submit" :disabled="attr.productSelect.stock == 0">立即抢购</button>
</form>
</view>
</view>
</view>
</template>

<script>
import {
getIndexData
} from '@/api/api.js';
import {
toLogin
} from '@/libs/login.js';
import {
mapGetters
} from "vuex";

export default {
computed: mapGetters(['isLogin','uid']),
data() {
return {
index: 0,
index1: 0, //tab的高度
index2: 0, //第二个子元素的top
index3: 0, //第二个子元素的top
index4: 0, //第二个子元素的top
IsShow: true, //用来阻止滚动产生的bug
boxCaro:0,
istab:0,
son01:0,
son02:0,
son03:0,
son04:0,
statusFixed:false,
oldHeight:uni.upx2px(550),
isShowTile:false,
imgUrls: [],
current:1, //当前所在滑块的 index+1(当前图片序号)
currentLength:0,
storeInfo: {merchant:{}}, //商品详情
animated: false, //购物车动画
CartCount: 0,
attr: {
cartAttr: false,
productAttr: [],
productSelect: {}
},
isAuto: false, //没有授权的不会自动授权
isShowAuth: false //是否隐藏授权
}
},
methods: {
Change(index) {
// 获取容器高度
const query = uni.createSelectorQuery().in(this);
query.select('#box_caro').boundingClientRect(data => {
// console.log(data.height)
this.boxCaro=data.height;
}).exec();
query.select('.istab').boundingClientRect(data => {
// console.log(data.height)
this.istab=data.height;
}).exec();
query.select('#son01').boundingClientRect(data => {
this.son01=data.height;
}).exec();
query.select('#son02').boundingClientRect(data => {
this.son02=data.height;
}).exec();
query.select('#son03').boundingClientRect(data => {
this.son03=data.height;
}).exec();

this.index = index
this.IsShow = false //在点击事件中 页面滚动依然会触发滚动事件 因而用这个值进行限制
if (index == 1) {
uni.pageScrollTo({ //页面滚动行为
scrollTop: 0,
duration: 300
});
setTimeout(() => {
this.IsShow = true
}, 300) //时间同页面滚动行为时间一样
} else if (index == 2) {
uni.pageScrollTo({
scrollTop: this.boxCaro+this.son01-33,//再减掉间距
duration: 300
});
setTimeout(() => {
this.IsShow = true
}, 300)
} else if (index == 3) {
uni.pageScrollTo({
scrollTop: this.boxCaro+this.son01+this.son02-22,
duration: 300
});
setTimeout(() => {
this.IsShow = true
}, 300)
} else if (index == 4) {
uni.pageScrollTo({
scrollTop: this.boxCaro+this.son01+this.son02+this.son03-11,
duration: 300
});
setTimeout(() => {
this.IsShow = true
}, 300)
} else {
let top = res[0].height
uni.pageScrollTo({
scrollTop: top,
duration: 300
});
setTimeout(() => {
this.IsShow = true
}, 300)
}
},
getTop(index) {
const query = uni.createSelectorQuery()
query.select('#istab1').boundingClientRect()
query.select('#son01').boundingClientRect()
query.select('#son02').boundingClientRect()
query.select('#son03').boundingClientRect()
query.select('#son04').boundingClientRect()
query.exec((res) => {
if (res[0].top == 0 && res[1].top <= res[0].height && res[1].bottom >= res[0].height) { //判断
this.index = 1
} else if (res[0].top == 0 && res[1].bottom <= res[0].height && res[2].bottom >= res[0].height) {
this.index = 2
} else if (res[0].top == 0 && res[2].bottom <= res[0].height && res[3].bottom >= res[0].height) {
this.index = 3
//如果您需要更多的页面 则这样添加即可 记得在上面获取 以及在初始化时也获取
}else if (res[0].top == 0 && res[3].bottom <= res[0].height && res[4].bottom >= res[0].height) {
this.index = 4
} else {
this.index = 0
}
})
},
getIndexConfig() {
let that = this;
getIndexData().then(res => {
// 輪播圖數據
that.$set(that, "imgUrls", res.data.banner);
this.currentLength=res.data.banner.length;
})
},
changeMultipleItems(e){
// console.log(e.target.current+1)
this.current=e.target.current+1;
},
//点击轮播图片预览
previewImg:function(image,index){
var arr = [];
for (let i = 0; i < image.length; i++) {
// console.log(image[i].pic)
//此方法传图片地址要数组的形式，所以定义一个数组，然后将内容push进去，再去做图片预览
arr.push(image[i].pic);
}

//uniapp预览轮播图方法
uni.previewImage({
current:index, //预览图片的下标
urls:arr //预览图片的地址，必须要数组形式
})
},
//立即购买
goBuy(){
if (this.isLogin === false) {
// #ifdef H5 || APP-PLUS
toLogin();
// #endif
// #ifdef MP
this.$set(this, 'isAuto', true);
this.$set(this, 'isShowAuth', true);
// #endif
} else {
uni.navigateTo({
url: '/pages/travel_block/ticketReserve/index'
});
}
}
},
onPageScroll(e) {
this.IsShow ? this.getTop() : ''
//判断是否已经到了顶部
if (this.oldHeight < e.scrollTop) {
console.log("已到顶部了")
// this.statusFixed = true
this.isShowTile=true
} else {
// this.statusFixed = false
this.isShowTile=false
}
},
onLoad() {
this.getIndexConfig();
}
};
</script>

<style lang="scss" scoped>
.prod_detail_container {
height: auto;
position: relative;
.proImg_caro {
height: 550rpx;
box-sizing: border-box;
text-align: center;
line-height: 200rpx;
.swiper_b1{
height: 100%;
width: 100%;
swiper{
height: 100%;
width: 100%;
image{
height: 100%;
width: 100%;
}
}
}
}
.imgPage{
position: relative;
bottom: 23%;
right: 3%;
color: #fff;
display: flex;
justify-content: flex-end;
}
.istab {
background: #fff;
height: 90rpx;
width: 100%;
// position: sticky !important; //滚动页面时（导航栏）会抖动
position: fixed;
text-align: center;
line-height: 90rpx;
z-index: 999;
top: 0;
display: flex;
justify-content: space-between;
padding: 0 40rpx;
box-shadow: 0 2px 6px -2px rgba(0, 0, 0, 0.06);
.icon-xiangzuo,.icon-gengduo{
font-weight: bold;
font-size: 20px;
}
.icon-xiangzuo{
font-weight: bold;
font-size: 20px;
}
.item {
width: 25%;
}
.somitem {
color:#ff7124;
}
}
.son1 {
height: 500rpx;
margin: 20rpx 0;
padding: 20rpx;
background: #fff;
}
.son2 {
height: 500rpx;
margin-bottom: 20rpx;
padding: 20rpx;
background: #fff;
}
.son3 {
height: 500rpx;
margin-bottom: 20rpx;
padding: 20rpx;
background: #fff;
}
.son4 {
height: 1500rpx;
margin-bottom: 20rpx;
padding: 20rpx;
background: #fff;
}

.footer {
padding: 0 20rpx 0 30rpx;
position: fixed;
left: 0;
bottom: 0;
width: 100%;
box-sizing: border-box;
height: 100rpx;
background-color: #fff;
z-index: 277;
border-top: 1rpx solid #f0f0f0;
}
.footer .item {
font-size: 18rpx;
color: #666;
}
.footer .item .iconfont {
text-align: center;
font-size: 40rpx;
}
.footer .item .iconfont.icon-shoucang1 {
color: #f00;
}
.footer .item .iconfont.icon-gouwuche1 {
font-size: 40rpx;
position: relative;
}
.footer .item .iconfont.icon-gouwuche1 .num {
color: #fff;
position: absolute;
font-size: 18rpx;
padding: 2rpx 8rpx 3rpx;
border-radius: 200rpx;
top: -10rpx;
right: -10rpx;
}
.footer .bnt {
width: 444rpx;
height: 76rpx;
}
.footer .bnt .bnts {
// width: 222rpx;
text-align: center;
line-height: 76rpx;
color: #fff;
font-size: 30rpx;
font-weight: bold;
}
.footer .bnt .joinCart {
border-radius: 50rpx 0 0 50rpx;
background-image: linear-gradient(to right, #fea10f 0%, #fa8013 100%);
}
.goBuy_form{
width: 100%;
}
.footer .bnt .buy {
border-radius: 50rpx;
background-image: linear-gradient(133deg,#ff872e,#ff672e);
}
.footer .bnt .buy[disabled]{
background: #bbb;
}
}

</style>