本文实例为大家分享了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, default:false }, lineWidth:{ type:Number, default: 100 }, itemSize:{ type:Number, default: 30 }, activeSize:{ type:Number, default: 32 }, activeColor:{ type:String, default:'' }, top:{ type:Number, default: 0 }, 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)
top --选项卡固定定位 自定义top距离

注意：

使用fixed固定头部的时候 要将页面整体padding-top：98rpx;不然会盖住内容区域。
使用swiper实现滑动切换时 要将page 高度设置100% swiper高度100% 才可以全屏滑动切换

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。