手指滑动横向切换tabar功能实现

<div>
				<div>
					<!-- <u-sticky bgColor="#fff"> -->
					<u-tabs :list="videoList" ref="uTabs" :current="currentNum" lineHeight="6" @change="tabsChange"></u-tabs>
					<!-- </u-sticky> -->
				</div>
				<div>
					<swiper :current="swiperCurrent" @change="transition" class="vie" :style="{'height':`${anchor.deviceHeight}px`}">
						<swiper-item class="swiper-item vie_item" v-for="(item, index) in tabs" :key="index">
							<div class="anchor-top"></div>
							<!-- <scroll-view scroll-y style="height: 100%;width: 100%;" @scrolltolower="onreachBottom"> -->
							<div class="listItemContent" :style="{'padding-bottom': `${safeAreaBottom*2+100}rpx`}" @click="goDetail">
								<div class="listItem margin-bottom-sm" v-for="(itemmm, indexxx) in item" :key="indexxx">
									{
   
   {itemmm.value}}
								</div>
							</div>
							<!-- </scroll-view> -->
							<div class="anchor-bottom"></div>
						</swiper-item>
					</swiper>
					<view class="anchor-screen-bottom"></view>
				</div>
			</div>
		</div>

<script>
	import { mapState } from 'vuex';

	export default {
		data() {
			return {
				swiperCurrent: 0,
				currentNum: 0,
				tabs: [
					[
						{ value: '111111111111' }, { value: '2222222222' }, { value: '33333333' }, { value: '4444444' },
						{ value: '5555' }, { value: '6666' }, { value: '77777' }, { value: '77777' }, { value: '77777' },
						{ value: '77777' }, { value: '77777' }, { value: '77777' }, { value: '77777' }, { value: '000' },
					],
					[
						{ value: 'aaaaaaa' }, { value: 'bbbbbbbbbbb' },
					],
				],
				videoList: [
					{ name: '臻选视频' },
					{ name: '精选文章' },
				],
				
				anchor: { //处理swiper高度问题
					deviceHeight: 0,
					anchorTop: 0,
					anchorBottom: 0,
					anchorScreenBottom: 0
				}
			}
		},
		onPageScroll(e) {
			// console.log(e.scrollTop);
			this.scrollTop = e.scrollTop;
		},
		components: {},
		computed: {
			...mapState(["hasLogin", "safeAreaBottom"])
		},
		onLoad() {
			this.computeSwiperHeight(0)
		},
		onShow() {},
		methods: {
			// tabs通知swiper切换
			tabsChange(e) {
				this.swiperCurrent = e.index;
			},
			// swiper-item左右移动，通知tabs的滑块跟随移动
			transition(e) {
				this.currentNum = e.detail.current
				console.log(e.detail.current, '-------')
				this.computeSwiperHeight(e.detail.current)
			},
			// scroll-view到底部加载更多
			onreachBottom() {
				console.log(11111111111)
			},
			computeSwiperHeight(pageIndex) {
				let getSwiperHeight = () => {
					let min = this.anchor.anchorScreenBottom - this.anchor.anchorTop;
					let value = this.anchor.anchorBottom - this.anchor.anchorTop
					return Math.max(min, value)
				}
				wx.createSelectorQuery()
					.select('.anchor-screen-bottom')
					.boundingClientRect()
					.selectViewport()
					.scrollOffset()
					.exec(res => {
						this.anchor.anchorScreenBottom = res[0]?.bottom
					})
				wx.createSelectorQuery()
					.selectAll('.anchor-top')
					.boundingClientRect()
					.selectViewport()
					.scrollOffset()
					.exec(res => {
						this.anchor.anchorTop = res[0][pageIndex]?.top
						this.anchor.deviceHeight = getSwiperHeight()
					})
				wx.createSelectorQuery()
					.selectAll('.anchor-bottom')
					.boundingClientRect()
					.selectViewport()
					.scrollOffset()
					.exec(res => {
						this.anchor.anchorBottom = res[0][pageIndex]?.bottom
						this.anchor.deviceHeight = getSwiperHeight()
					})
			},
			goDetail() {
				this.$jumpTo('/pages-home/articleDetail/index')
			},
			goPage(routeUrl) {
				// console.log(routeUrl);
				// jumpTo(routeUrl)
				this.$jumpTo(routeUrl)
			}
		}
	}
</script>