uniapp 实现tab切换(可滑动,可点击)

核心思想  tab通过 scroll-view实现 列表内容通过swiper组件包裹scroll-view组件实现

tab头部 HTML:

<scroll-view scroll-x="true" :scroll-left="scrollLeft" scroll-with-animation="true" class="date-list">
	<view class="tab-box">
		<view class="tab-list" :class="currentTab==index?'tab-current':'tab-item'"
			v-for="item,index in tabList" @click="changeTab(item.value)" :key="index">
			<view class="tab-text">{{item.text}}</view>
			<image v-if="currentTab==index" class="current-tip"
				src="https://mall.jima666.com/image/Oneiromancy/Version2yuan/newhome/index-tab-current.png"
				mode="">
			</image>
		</view>
	</view>
</scroll-view>

tab头部 js:

getScrollLeft() {
	let query = uni.createSelectorQuery().in(this)
	query.selectAll('.tab-list').boundingClientRect(data => {
		this.scrollLeft = data[this.currentTab].left - 100
	}).exec()
},
changeTab(val) {
	this.currentTab = val
	this.getScrollLeft()
},

列表部分HTML

<swiper :current="currentTab" style="height: 100%;" @change="swiperChange" :duration="300">
	<swiper-item>
		<scroll-view scroll-y style="height: 100%; width: 100%; background-color: #f5f5f5;"
			@scrolltolower="addList" refresher-enabled :refresher-triggered="wantTriggered"
			@refresherrefresh="onWantRefresh" refresher-background="#f5f5f5">
                                <!-- 列表内容 -->
        </scroll-view>
    </swiper-item>
</swiper>


current // 当前swiper索引
addList // 上拉添加列表
wantTriggered // 刷新时的状态
onWantRefresh // 下拉刷新

列表js

//swiper切换事件
swiperChange(e) {
	this.currentTab = e.detail.current
	this.getScrollLeft()
    //第一页自动请求  后续页面第一次进入时在主动请求
	if (this.currentTab == 1) this.$refs.gfmh.getListStatus()
	if (this.currentTab == 2) this.$refs.gdsm.getListStatus()
	if (this.currentTab == 3) this.$refs.crzb.getListStatus()
	if (this.currentTab == 4) this.$refs.zghf.getListStatus()
	if (this.currentTab == 5) this.$refs.pzjj.getListStatus()
	if (this.currentTab == 6) this.$refs.czpx.this.getListStatus()
},