uniapp如何实现tab切换线条跟随效果

小半 • 2023年8月11日下午3:55 • 微信精选 • 阅读 617

❝

tab切换我们经常使用，那如何去实现一个上面的效果呢，本文将解释一下在uniapp中如何实现

❞

原理解析

如上图
红色框框代表盒子,总宽度记作W
绿色框框代表每一项,宽度记作I
深蓝色框框代表的是线,宽度记作C

那么我们可以得到线的左边距是每一项的左边距加上一个值
这个值是每一项的宽度减去线的宽度的结果再除以二
即I.left + (I.width – C.width) / 2

获取每一项的信息

这里我们就要用到uni查询节点的api，可以拿到节点的信息

const query = uni.createSelectorQuery()
// name 是class 或者 ID
query.select(name).boundingClientRect(data => {
  // data就是节点信息
}).exec();

实操

这里使用的Vue3语法，前面重要的两个知识已经知道了，下面就可以你直接实现了

<template>
 <view class="tabs_wrap">
  <view :class="['item','item' + (index + 1)]" @tap="changeIndex(index)" v-for="(item,index) in tabsList"
   :key="index">
   {{ item.name  || ""}}
  </view>
  <view class="active" :style="{left:left + 'px'}"></view>
 </view>
</template>

<script setup>
 import {
  onMounted,
  getCurrentInstance,
  ref
 } from "vue"

 const query = ref(null)
 const left = ref(0)
  const current = ref(0)
  const tabsList = [{
   name: "热榜",
   value: ""
  },
  {
   name: "热点",
   value: ""
  },
  {
   name: "热门收藏夹",
   value: ""
  }
 ]

 onMounted(() => {
  query.value = uni.createSelectorQuery().in(getCurrentInstance());
  initPostion(1)
 })

 const initPostion = (index) => {
  query.value.select('.item' + index).boundingClientRect(data => {
   left.value = data.left + ((data.width - 50) / 2)
  }).exec();
 }

 const changeIndex = (index) => {
    if(index === current.value) return
    current.value = index
    initPostion(index + 1)
 }
</script>

<style scoped>
.tabs_wrap{
    position: relative;
    display:flex;
    align-items: center;
    justify-content: space-around;
    font-size: 32rpx;
    color: #333;
    font-weight: bold;
    height: 88rpx;
}

.active {
   position: absolute;
   left: 0;
   bottom: 0;
   width: 50px;
   height: 8rpx;
   background-color: #2979ff;
   border-radius: 50px;
   transition: left 0.3s ease;
  }
</style>