核心思想 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()
},