本文例項為大家分享了uniapp實現可滑動選項卡的具體程式碼，供大家參考，具體內容如下

tabControl-tag.vue

<template name="tabControl">
 <scroll-view scroll-x="true" :style="'background-color:'+bgc+';top:'+top+'px;'" :class="fixed?'fxied':''" :scroll-left='scrollLeft' scroll-with-animation id="tabcard">
 <view class="tabList" :style="isEqually?'display: flex;justify-content: space-between;padding-left:0;':''">
 <view
  :class="'tabItem'+(currentIndex==index?' thisOpenSelect':'')"
  :style="isEqually? 'width:'+windowWidth/values.length+'px;margin-right:0;':''"
  v-for="(item,index) in values" 
  :id="'item'+index"
  :key='index' 
  @click="_onClick(index)">
  <text :style="(currentIndex==index?'font-size:'+activeSize+'rpx;color:'+activeColor:'font-size:'+itemSize+'rpx')">{{item}}</text>
  <view class="activeLine" :style="{width: lineWidth+'rpx'}"></view>
 </view>
 </view>
 </scroll-view>
</template>

<script>
 export default {
 name:'tabControl',props:{
 current: {
 type: Number,default: 0
 },values: {
 type: Array,default () {
  return []
 }
 },bgc:{
 type:String,default:''
 },fixed:{
 type:Boolean,default:false
 },scrollFlag:{
 type:Boolean,lineWidth:{
 type:Number,default: 100
 },itemSize:{
 type:Number,default: 30
 },activeSize:{
 type:Number,default: 32
 },activeColor:{
 type:String,top:{
 type:Number,isEqually:{
 type:Boolean,default:false
 }
 },data() {
 return {
 currentIndex: 0,windowWidth:0,//裝置寬度
 leftList:[],//選項距離左邊的距離
 widthList:[],//選項寬度
 scrollLeft:0,//移動距離
 newScroll:0,//上一次移動距離(用來判斷是左滑還是右滑)
 wornScroll:0,//上一次移動距離(用來判斷是左滑還是右滑)
 };
 },created(){
 
 },mounted(){
 setTimeout(()=>{
 uni.createSelectorQuery().in(this).select("#tabcard").boundingClientRect((res)=>{
  this.$emit('getTabCardHeight',{height:res.height})
 }).exec()
 uni.getSystemInfo({
  success: (res)=> {
  this.windowWidth = res.windowWidth;
   // console.log(this.windowWidth);
  this.values.forEach((i,v)=>{
  let info = uni.createSelectorQuery().in(this);
  info.select("#item"+v).boundingClientRect((res)=>{
  // 獲取第一個元素到左邊的距離
  // if(v==0){
  // this.startLenght = res.left
  // }
   this.widthList.push(res.width)
  this.leftList.push(res.left)
  
  }).exec()
  
  })
  // console.log(this.leftList)
  // console.log(this.widthList)
  }
 });
 })
 },created() {
 this.currentIndex = this.current
 if(this.scrollFlag){
 setTimeout(()=>{
  this.tabListScroll(this.current)
 },300)
 }
 },watch: {
 current(val) {
 if (val !== this.currentIndex) {
  this.currentIndex = val
  if(this.scrollFlag){
  this.tabListScroll(val)
  }
 }
 },},methods: {
 _onClick(index) {
 if (this.currentIndex !== index) {
  this.currentIndex = index
  this.$emit('clickItem',{currentIndex:index})
  // 開啟滾動
  if(this.scrollFlag){
  this.tabListScroll(index)
  }
 }
 },// 選項移動
 tabListScroll(index){
 let scoll = 0;
 this.wornScroll = index;
 // this.wornScroll-this.newScroll>0 在向左滑 ←←←←←
 if(this.wornScroll-this.newScroll>0){
  for(let i = 0;i<this.leftList.length;i++){
  if(i>1&&i==this.currentIndex){
  scoll = this.leftList[i-1]
  }
  }
  // console.log('在向左滑',scoll)
 }else{
  if(index>1){
  for(let i = 0;i<this.leftList.length;i++){
  if(i<index-1){
  scoll = this.leftList[i]
  }
  }
  }else{
  scoll = 0
  }
  // console.log('在向右滑')
 }
 this.newScroll = this.wornScroll;
 this.scrollLeft = scoll;
 }
 }
 }
</script>

<style lang="less" scoped>
 .fxied{
 position: fixed;
 z-index: 2;
 }
 .tabList{
 padding-top: 24rpx;
 padding-left: 24rpx;
 padding-bottom: 8rpx;
 white-space: nowrap;
 text-align: center;
 .tabItem{
 margin-right: 60rpx;
 display: inline-block;
 position: relative;
 text{
 // font-size: 30rpx;
 line-height: 44rpx;
 color: #666;
 transition: all 0.3s ease 0s;
 }
 .activeLine{
 // width: 48rpx;
 height: 8rpx;
 border-radius: 4rpx;
 background-color: #F57341;
 margin-top: 8rpx;
 margin-left: 50%;
 transform: translateX(-50%);
 opacity: 0;
 transition: all 0.3s ease 0s;
 }
 }
 .tabItem:first-child{
 // margin-left: 22rpx;
 }
 .tabItem:last-child{
 margin-right: 24rpx;
 }
 .thisOpenSelect{
 text{
 color: #333;
 font-weight:600;
 // font-size: 32rpx;
 }
 .activeLine{
 opacity: 1;
 }
 }
 }
 
</style>

頁面引用

<template>
 <view class="page">
 <tabControl :current="current" :values="items" bgc="#fff" :fixed="true" :scrollFlag="true" :isEqually="false" @clickItem="onClickItem"></tabControl>
 <!-- 使用 swiper 配合 滑動切換 -->
 <swiper class="swiper" style="height: 100%;" @change="scollSwiper" :current="current">
 <swiper-item v-for="(item,index) in items" :key="index">
 <!-- 使用 scroll-view 來滾動內容區域 -->
 <scroll-view scroll-y="true" style="height: 100%;">{{ item }}</scroll-view>
 </swiper-item>
 </swiper>
 </view>
</template>

<script>
import tabControl from '@/components/tabControl-tag/tabControl-tag.vue';
export default {
 components: { tabControl },data() {
 return {
 items: ['業績統計','選項卡2','選項卡3','選項卡4','選項卡5'],current: 0
 };
 },onLoad() {},methods: {
 onClickItem(val) {
 this.current = val.currentIndex;
 },scollSwiper(e) {
 this.current = e.target.current;
 }
 }
};
</script>

<style>
page {
 height: 100%;
}
.page {
 padding-top: 98rpx;
 height: 100%;
}
</style>

1.使用方式：

scrollFlag --是否開啟選項滾動(true -開啟 false -關閉) 根據自己需求如果選項長度超出螢幕長度 建議開啟
fixed --固定定位
bgc --背景色
values --選項陣列
current --當前選中選項索引
isEqually --是否開啟選項平分寬度(true,false)
lineWidth --下劃線長度（在非平分選項狀態下 可能會影響選項盒子的寬度-自行除錯想要的效果，預設為48rpx）
itemSize --未選中選項字型大小(預設為30rpx)
activeSize --選中選項字型大小(預設為32rpx)
activeColor --選中選項字型顏色(預設#333)

注意：

使用fixed固定頭部的時候 要將頁面整體padding-top：98rpx;不然會蓋住內容區域。
使用swiper實現滑動切換時 要將page 高度設定100% swiper高度100% 才可以全屏滑動切換

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援我們。