125 lines
2.5 KiB
Vue
125 lines
2.5 KiB
Vue
|
<template>
|
||
|
|
<!-- 选项卡列表 swiper高度自适应 -->
|
||
|
|
<view>
|
||
|
|
<view class="posi-sticky">
|
||
|
|
<scroll-text-slide @changeEv="tabTap" :activeIndex="activeIndex"></scroll-text-slide>
|
||
|
|
</view>
|
||
|
|
<swiper :style="{ height: swiperHeight + 'rpx' }" :current="swiperCurrent" @change="swiperChange">
|
||
|
|
<swiper-item style="height: 100%" v-for="(item, index) in tabs" :key="index">
|
||
|
|
<view :class="'list' + index">
|
||
|
|
<view class="item">
|
||
|
|
<!-- 列表数据 -->
|
||
|
|
<slot :listData="item.data"></slot>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</swiper-item>
|
||
|
|
</swiper>
|
||
|
|
</view>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
import scrollTextSlide from '@/components/scroll-views/scroll-text-slide.vue';
|
||
|
|
export default {
|
||
|
|
name: "tabsSwiper",
|
||
|
|
components:{scrollTextSlide},
|
||
|
|
props: {
|
||
|
|
tabs: {
|
||
|
|
type: Array,
|
||
|
|
default: () => {
|
||
|
|
return [];
|
||
|
|
},
|
||
|
|
}
|
||
|
|
},
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
activeIndex: 0, // tabs索引
|
||
|
|
swiperCurrent: 0, // swiper索引
|
||
|
|
swiperHeight: 0, //swiper高度
|
||
|
|
};
|
||
|
|
},
|
||
|
|
mounted() {
|
||
|
|
this.initSwiperHeight(".list0");
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
// 点击tabs
|
||
|
|
tabTap(index) {
|
||
|
|
this.activeIndex = index;
|
||
|
|
this.swiperCurrent = index;
|
||
|
|
let list = ".list" + index;
|
||
|
|
this.initSwiperHeight(list);
|
||
|
|
this.$emit('currentEv',index);
|
||
|
|
},
|
||
|
|
// 手势切换
|
||
|
|
swiperChange(e) {
|
||
|
|
this.activeIndex = e.detail.current;
|
||
|
|
let list = ".list" + e.detail.current;
|
||
|
|
this.initSwiperHeight(list);
|
||
|
|
this.$emit('currentEv',e.detail.current);
|
||
|
|
},
|
||
|
|
// 计算高度
|
||
|
|
initSwiperHeight(list) {
|
||
|
|
const query = uni.createSelectorQuery().in(this);
|
||
|
|
this.$nextTick(() => {
|
||
|
|
query
|
||
|
|
.select(list)
|
||
|
|
.boundingClientRect((data) => {
|
||
|
|
this.swiperHeight = Math.ceil(data.height / (uni.upx2px(data.height) / data
|
||
|
|
.height));
|
||
|
|
})
|
||
|
|
.exec();
|
||
|
|
});
|
||
|
|
},
|
||
|
|
},
|
||
|
|
};
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang="scss">
|
||
|
|
.tabsSwiper {
|
||
|
|
padding: 40rpx;
|
||
|
|
}
|
||
|
|
|
||
|
|
.tabs {
|
||
|
|
display: flex;
|
||
|
|
justify-content: space-between;
|
||
|
|
align-items: center;
|
||
|
|
|
||
|
|
.tabs-con {
|
||
|
|
color: #333;
|
||
|
|
transition: all 0.5s;
|
||
|
|
padding: 6rpx 40rpx;
|
||
|
|
overflow: hidden;
|
||
|
|
|
||
|
|
.title {
|
||
|
|
font-size: 28rpx;
|
||
|
|
width: 100%;
|
||
|
|
}
|
||
|
|
|
||
|
|
.des {
|
||
|
|
font-size: 20rpx;
|
||
|
|
width: 100%;
|
||
|
|
}
|
||
|
|
|
||
|
|
&.active {
|
||
|
|
transition: all 0.5s;
|
||
|
|
box-shadow: 0 -2rpx 2rpx 2rpx #bcbec2;
|
||
|
|
background-color: #ffffff;
|
||
|
|
border-radius: 16rpx 16rpx 0 0;
|
||
|
|
|
||
|
|
.title {
|
||
|
|
font-size: 32rpx;
|
||
|
|
font-weight: bold;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.list {
|
||
|
|
box-shadow: 0rpx 0rpx 2rpx 2rpx #bcbec2;
|
||
|
|
background-color: #ffffff;
|
||
|
|
padding: 16rpx;
|
||
|
|
border-radius: 0 0 16rpx 16rpx;
|
||
|
|
overflow: hidden;
|
||
|
|
min-height: 100rpx;
|
||
|
|
}
|
||
|
|
</style>
|