image.png
左右滑动切换Tab
一、文件组成：
- BgTitleTouchGroup.vue
- BgTitleTouchGroup.less
- BgTitleTouchItem.vue
- BgTitleTouchItem.less
- announcement.vue
1、BgTitleTouchGroup.vue
<template>
<!-- 可以滑屏切换的 tabGroup -->
<view class="tab-group">
<!-- 标题列表 -->
<scroll-view
id="bgTitleTouchGroup"
:scroll-x="true"
:scroll-into-view="`bgg${activeIndex}`"
:scroll-with-animation="true"
class="bg-title-list flex f-ai-c"
:class="[align]"
>
<view
v-for="(item, index) in newTabList"
:id="`bgg${index}`"
:key="index"
class="tab-item-box"
>
<BgTitle
v-if="item.active"
:title="item.title"
:fontSize="30"
/>
<text
v-else
class="normal"
:style="{
minWidth: normalMinWidth
}"
@tap="clickHandle(index)"
>
{{ item.title }}
</text>
</view>
</scroll-view>
<!-- </view> -->
<!-- 内容容器 -->
<view
class="content"
:style="{'transition-duration': `${duration}s`, transform: `translateX(${xPositon}%)`}"
@touchstart="onTouchStart"
@touchmove="onTouchMove"
@touchend="onTouchEnd"
>
<view class="tabs__track flex">
<slot />
</view>
</view>
</view>
</template>
<script>
import './BgTitleTouchGroup.less';
import BgTitle from '../BgTitle/index.vue';
import { getDirection, resetTouchStatus } from '@/combination';
export default {
name: 'BgTitleTouchGroup',
components: { BgTitle },
inject: {
normalMinWidth: {
from: 'normalMinWidth',
// default: '110rpx'
default: 'auto'
}
},
props: {
// 过度动画的时间
duration: {
type: Number,
default: 0.2
},
align: {
type: String,
default: 'f-jc-sb'
}
},
data () {
return {
activeIndex: 0, // 当前查看的tab的索引
newTabList: [],
xPositon: 0, // 容器在X轴移动的距离
swipeable: true,
swiping: false,
direction: '',
deltaX: 0,
deltaY: 0,
offsetX: 0,
offsetY: 0,
startX: 0,
startY: 0
};
},
created () {
this.initTabList();
},
methods: {
setActiveIndex (index) {
this.activeIndex = index;
for (let i = 0; i < this.newTabList.length; i++) {
if (i === index) {
this.newTabList[i].active = true;
} else this.newTabList[i].active = false;
}
},
initTabList () {
let slots = this.$slots.default();
// for循环方式添加的 tabItem, 反之则为逐个写入的tabItem
if (slots.length === 1 && typeof slots[0].type === 'symbol') {
slots = slots[0].children;
}
for (let i = 0; i < slots.length; i++) {
this.newTabList.push({
title: slots[i].props.title,
active: !i
});
}
},
clickHandle (index) {
for (let i = 0; i < this.newTabList.length; i++) {
if (i === index) this.newTabList[i].active = true;
else this.newTabList[i].active = false;
}
this.xPositon = -100 * index;
this.activeIndex = index;
this.$emit('bgTitleClick', index);
},
touchStart (event) {
resetTouchStatus(this);
var touch = event.touches[0];
this.startX = touch.clientX;
this.startY = touch.clientY;
},
touchMove (event) {
var touch = event.touches[0];
this.deltaX = touch.clientX - this.startX;
this.deltaY = touch.clientY - this.startY;
this.offsetX = Math.abs(this.deltaX);
this.offsetY = Math.abs(this.deltaY);
this.direction = this.direction || getDirection(this.offsetX, this.offsetY);
},
onTouchStart (event) {
if (!this.swipeable) { return; }
this.swiping = true;
this.touchStart(event);
},
onTouchMove (event) {
if (!this.swipeable || !this.swiping) { return; }
this.touchMove(event);
},
// watch swipe touch end
onTouchEnd () {
if (!this.swipeable || !this.swiping) { return; }
var _a = this; var direction = _a.direction; var deltaX = _a.deltaX; var offsetX = _a.offsetX;
var minSwipeDistance = 50;
if (direction === 'horizontal' && offsetX >= minSwipeDistance) {
this.activeIndex = this.getAvaiableTab(deltaX);
const list = this.newTabList.map((l, ind) => {
l.active = ind === this.activeIndex;
return l;
});
this.newTabList = list;
this.xPositon = -100 * this.activeIndex;
this.$emit('bgTitleClick', this.activeIndex);
}
this.swiping = false;
},
getAvaiableTab (direction) {
var _a = this;
var tabs = _a.newTabList;
var currentIndex = _a.activeIndex;
var step = direction > 0 ? -1 : 1;
for (var i = step; currentIndex + i < tabs.length && currentIndex + i >= 0; i += step) {
var index = currentIndex + i;
if (index >= 0 && index < tabs.length && tabs[index] && !tabs[index].active) {
return index;
}
}
return 0;
}
}
};
</script>
2、BgTitleTouchGroup.less
.tab-group {
width: 100%;
overflow: hidden;
.bg-title-list {
white-space: nowrap;
.normal {
display: inline-block;
font-size: 26rpx;
}
.tab-item-box {
display: inline-block;
margin-right: 61rpx;
}
.tab-item-box:last-child {
margin-right:0;
}
}
.content {
.tabs__track {
position: relative;
width: 100%;
height: 100%;
will-change: left;
}
}
}
3、BgTitleTouchItem.vue
<template>
<!-- 可以滑屏切换的 tabItem -->
<view class="tab-item">
<slot />
</view>
</template>
<script>
import './index.less';
export default {
name: 'BgTitleTouchItem',
props: {
title: {
type: String,
default: '标题1'
}
}
};
</script>
4、BgTitleTouchItem.less
.tab-item {
width: 100%;
flex-shrink: 0;
box-sizing: border-box;
}
.tab-item_inactive {
height: 0;
overflow: visible;
}
5、announcement.vue
<template>
<view>
<BgTitleTouchGroup
v-if="tabList.length"
:align="'f-jc-fs'"
@bgTitleClick="bgTitleClickHandle"
>
<BgTitleTouchItem
v-for="(ite, ind) in tabList"
:key="ite.id"
:title="ite.typeName"
>
<view v-if="activeTypeIndex === ind">
<scroll-view
v-if="recodes.length"
:scroll-y="true"
class="announs"
@scrolltolower="onTolowerMixin(getRecodeList)"
>
<CommonListItem
v-for="item in recodes"
:key="item.id"
:record="item"
style="margin-bottom: 30rpx;"
@equiClick="clickHandle(item.id)"
/>
</scroll-view>
<NoData
v-else
style="margin-top: 20rpx;"
/>
</view>
</BgTitleTouchItem>
</BgTitleTouchGroup>
<NoData
v-else
style="margin-top: 20rpx;"
/>
</view>
</template>
<script>
import {
BgTitleTouchGroup,
BgTitleTouchItem,
CommonListItem,
NoData
} from '@/components';
export default {
name: 'Announcement',
components: {
BgTitleTouchGroup,
BgTitleTouchItem,
CommonListItem,
NoData
},
data () {
return {
tabList: [],
recodes: [],
activeTypeId: '',
activeTypeIndex: 0
};
},
methods: {
// 某个类型title点击
bgTitleClickHandle (index) {
this.activeTypeId = this.tabList[index].id;
this.activeTypeIndex = index;
this.initRecords();
this.getRecodeList();
},
}
};
</script>
