實現(xiàn)效果如圖

要實現(xiàn)底部內(nèi)部的左右滑動切換帶動上方tab欄的切換，并且下方內(nèi)容要實現(xiàn)縱向滾動 ，所以需要swiper，swiper-item,scroll-view組合使用

tab欄部分

<view class="tabs"><view class="tab_item" v-for="(item,index) in tabList" :key="index" @click="tabSwitch(item,index)"><view class="tab_name" :class="activeTab==index?'act_name':''">{{item.name}}</view><view class="tab_cover" v-if="activeTab!=index"></view><image v-else :src="getimg('leaderboard_toggle.png')" style="width: 30rpx;height: 11rpx;"></image></view></view>

?tab欄點擊切換，需要重新調(diào)取數(shù)據(jù)

tabSwitch(item, index) {this.scrollTop = 0this.activeTab = index// this.dataList = []this.getData()},

下方內(nèi)容部分

<swiper class="data_list" @change="swipeIndex" :current="activeTab":duration="300" previous-margin="0" :style="{ height: (pageHeight-205)+'px' }" :circular="true"><swiper-item v-for="(val,idx) in tabList" :key="idx"><scroll-view v-if="dataList.length>0" scroll-y="true" :style="{ height: (pageHeight-205)+'px' }":scroll-top="scrollTop"><view style="padding-bottom: 100rpx;"><view class="data_item" :class="index*1+1<4?'act_item'+(index*1+1):''"v-for="(item,index) in dataList" :key="index" @click="goDetail(item,index)"><view class="le"><image :src="getimg('Leaderboard_'+(index*1+1)+'.png')" mode="heightFix"style="height: 112rpx;"></image><view class="item_content">{{item.idea_name}}</view></view><view class="like_num">{{item.likecount}}</view></view></view></scroll-view><view v-else class="data_none" :style="{ height: (pageHeight-205)+'px' }"><image :src="getimg('null-page.png')" style="width: 380rpx;height: 380rpx;"></image><view class="nothing">空空如也~</view></view></swiper-item></swiper>

滑動切換，改變上方tab欄狀態(tài)，并重新調(diào)取數(shù)據(jù)

swipeIndex(e){this.activeTab = e.detail.currentthis.scrollTop = 0this.getData()}

以上即可實現(xiàn)頁面左右滑動切換帶動tab欄切換

但是，上面這種方式適合tab欄目比較少，內(nèi)容列表也比較短的情況，如果tab欄項目很多，內(nèi)容數(shù)據(jù)也很多，用swiper做切換會很卡頓，這個官方地址也有介紹swiper | uni-app官網(wǎng)

我懶得去研究怎么去優(yōu)化他，不過這個博主的優(yōu)化方式很厲害，可以借鑒一下，附上地址：?

uni-app swiper數(shù)量過多時卡頓優(yōu)化方案_uniapp swiper卡頓_菜鳥驛站2020的博客-CSDN博客?

所以當數(shù)據(jù)很多時，我使用了touch事件加動畫的方式做切換

如圖，tab欄選項很多，內(nèi)容列表數(shù)據(jù)也很多

?

tabs部分

<view class="tab_box"><view style="max-width: 600rpx;height:80rpx ;"><u-tabs :list="tabsList" :current="actTab" keyName="category_name" @click="tabSwitch" lineWidth="20"lineHeight="4" lineColor="#000000":activeStyle="{color: '#000000',fontWeight: 'bold',transform: 'scale(1.4)'}":inactiveStyle="{color: '#666666',transform: 'scale(1.2)'}"></u-tabs></view><view class="more" @click="cateShow = true"><image :src="getimg('originality_label.png')" style="width: 50rpx;height: 50rpx;"></image></view></view>

列表部分

<view class="data_list" @touchstart="touchStart" @touchend="touchEnd" :animation="animationData" :style="{ height: (pageHeight-(marginTop*1+65))+'px' }"><scroll-view scroll-y="true" :style="{ height: (pageHeight-(marginTop*1+65))+'px' }"@scrolltolower="getBottom" :lower-threshold="80" :scroll-top="scrollTop"><view v-if="dataList.length>0" style="padding-bottom: 100rpx;"><view class="data_item" v-for="(item,index) in dataList" :key="index"@click="goDetail(item,index)"><view class="data_top"><image :src="getimg('originality_quote.png')" style="width: 64rpx;height: 64rpx;"></image><view class="data_content">{{item.idea_name}}</view><view class="lab_box" v-if="item.tag_list && item.tag_list.length>0"><view class="lab_item" v-for="(val,idx) in item.tag_list" :key="idx">{{val.tag_name}}</view></view><view class="times">{{item.updatetime | getDateDiff}}</view></view><view class="data_bot"><view class="share" @click.stop="goShare(item,index)"><image :src="getimg('share_gray.png')" style="width: 36rpx;height: 36rpx;"></image><view class="share_tt">分享</view></view><view class="infos"><view class="comm"><image :src="getimg('review_gray.png')" style="width: 44rpx;height: 44rpx;"></image><view class="comm_num">{{item.comment_count}}</view></view><view class="comm" @click.stop="addLike(item,index)"><image :src="item.is_like?getimg('like_red.png'):getimg('like_gray.png')"style="width: 44rpx;height: 44rpx;"></image><view class="comm_num">{{item.like_count}}</view></view></view></view></view></view><view v-else class="data_none" :style="'margin-top:'+(marginTop*1+150)+'px;'"><image :src="getimg('null-page.png')" style="width: 380rpx;height: 380rpx;"></image><view class="nothing">空空如也~</view></view></scroll-view></view>

?如代碼所以，我使用了touchstart,和touchend事件，并且加了:animation="animationData"

            data(){return{scrollTop: 0,startX: 0,startY: 0,animationData: {}, // 動畫}}

onLoad中需要先創(chuàng)建動畫實例?

onLoad() {uni.getSystemInfo({success: res => {this.pageHeight = res.windowHeight;}})// #ifdef MP-WEIXINconst systemInfo = wx.getSystemInfoSync();const res = wx.getMenuButtonBoundingClientRect();this.height = (res.top - systemInfo.statusBarHeight) * 2 + res.heightthis.marginTop = this.height + systemInfo.statusBarHeight// #endif// 創(chuàng)建動畫實例this.animation = uni.createAnimation({timingFunction: 'ease',duration: 120})},

touchend結(jié)束事件中計算手指滑動距離，判斷滑動方向并重新調(diào)用接口加載數(shù)據(jù)，并且在判斷完滑動方向之后加動效，不讓左右滑動看起來生硬

touchStart(event) {this.startX = event.touches[0].pageX;this.startY = event.touches[0].pageY;},touchEnd(event) {let deltaX = event.changedTouches[0].pageX - this.startX;  let deltaY = event.changedTouches[0].pageY - this.startY;if (Math.abs(deltaX) > Math.abs(deltaY) && Math.abs(deltaX)>60) {if (deltaX < 0) { //往左if (this.actTab == this.tabsList.length - 1) {this.actTab = 0} else {this.actTab = this.actTab * 1 + 1}this.cate_id = this.tabsList[this.actTab].id// 動畫：左出右進this.animation.translateX('-100%').step().opacity(0).step({duration: 10}).translateX('100%').step({duration: 10}).translateX(0).opacity(1).step()this.animationData = this.animation.export()setTimeout(() => {this.animationData = {}}, 250)this.dataList = []this.page = 1this.getData()this.goJust()  //scrollTop改為0} else if (deltaX > 0) { //往右if (this.actTab == 0) {this.actTab = this.tabsList.length - 1} else {this.actTab = this.actTab * 1 - 1}this.cate_id = this.tabsList[this.actTab].id// 動畫：右出左進this.animation.translateX('100%').step()  //先橫向向右移至100%，即整塊移沒.opacity(0).step({    //再使滑塊部分透明duration: 10}).translateX('-100%').step({   //然后趁透明橫向向左移至-100%duration: 10}).translateX(0).opacity(1).step() //接著橫向向右移動至初始位置并恢復(fù)透明度this.animationData = this.animation.export()// 為避免uniapp動畫只有第一次生效，必須延遲刪除動畫實例數(shù)據(jù)setTimeout(() => {this.animationData = {}}, 250)this.dataList = []this.page = 1this.getData()this.goJust()  //scrollTop改為0} else { // 挪動距離0}}else{}},

最后一步，因為內(nèi)容包裹在scroll-view里，所以觸底加載下一頁寫在scroll-view的觸底事件里@scrolltolower="getBottom"

getBottom() {if (this.page < this.last_page) {this.page += 1this.getData()}},

?