uniapp实现可滑动选项卡

本文实例为大家分享了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% 才可以全屏滑动切换

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