三、在uni-app中开发一个带滑块的Tabs标签组件

最新推荐文章于 2024-06-03 13:38:13 发布
最新推荐文章于 2024-06-03 13:38:13 发布
阅读量1.5k 收藏 6
点赞数
分类专栏： 使用uni-app + Vue3 + TS开发小程序 文章标签： javascript 前端 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_39915504/article/details/125939352
版权

上一节我们为项目配置了基于 airbnb 代码风格的 Eslint，今天我们来开发一个可滑动的带动效的 Tabs 标签组件；今天的开发将继续在前两节配置的项目中进行，建议小伙伴们先看完前面两节内容，可通过合集进入查看。

1、最终效果及思路分析

在这里插入图片描述

当标签过多时，我们需要能够左右滑动，这里首先考虑使用 scroll-view，让 scroll-view 在x轴方向上允许滑动，

在 scroll-view 的内部用一个 view 作为父节点， 在这个父节点内部需要两个 view 子节点，一个用来包裹标签，

另一个使用绝对定位来做下边的红色条块，当点击某一个标签时，滑块会滑动到该标签下方，同时在合适的时机需要将前面或者后面隐藏的标签拉出来；

要使条块滑动到点击标签的下方，我们需要在点击时获取到当前标签的位置，并把它在屏幕上 left 的值赋值给条块，同时每个标签的长度可能不一致，

那么还需要将当前标签的 width 赋值给条块；scroll-view 有一个 scroll-into-view 属性，官网介绍如下：
在这里插入图片描述

我们可以使用这个属性将隐藏的标签拉出来

2、组件开发

今天我们使用 uni_modules 插件形式来开发，uni_modules 插件的创建方式参照官网文档，根据1中的布局思路先上布局

<template>
  <scroll-view scroll-x class="quick-tabs">
    <view class="quick-tabs-wrap">
      <view>
        <view class="quick-tab-item">
          <text>标签文字</text>
        </view>
      </view>
      <view class="quick-tabs-block" />
    </view>
  </scroll-view>
</template>

<script lang="ts" setup>

</script>

<style lang="scss" scoped>
.quick-tabs{
  width: 100%;
  white-space: nowrap;
  ::-webkit-scrollbar{
    width: 0;
    height: 0;
    color: transparent;
  }
  .quick-tabs-wrap{
    display: inline-block;
    position: relative;
    .quick-tab-item{
      display: inline-block;
      margin-right: 32rpx;
      padding: 16rpx 0 32rpx;
      &:last-child{
        margin-right: 0;
      }
    }
  }
  .quick-tabs-block{
    position: absolute;
    left: 0;
    bottom: 0;
    height: 16rpx;
  }
}
</style>

标签数据肯定是从外部传递进来的，同时我们点击了标签时需要让外部知道当前是哪一个标签，下面我们先定义以下参数：

<script lang="ts" setup>
type Props = {
  moduleValue: number // 外部使用v-model来绑定当前点击的标签索引
  tabs: string[] // 标签数组数据
  color: string // 标签文字的默认颜色
  activeColor: string // 标签激活时的颜色，同时也是滑动条块的颜色
  fontSize: number // 标签文字大小
}

const props = withDefaults(defineProps<Props>({
  modelValue: 0,
  color: '#606266',
  activeColor: '#DE3F3F',
  fontSize: 30,
}))
</script>

使用 uni.createSelectorQuery() 来获取 dom 信息，使用这个 api 需要先为所有标签节点指定一个id，id必须是唯一的，所以组件中父节点以及子节点的id我们都动态生成，

同时拿到的标签节点的 left 位置是基于屏幕的，我们还需要为父节点指定id，通过标签节点的 left 减去父节点的 left 值，就得到了标签节点基于父节点的 left 值，

通过下面的代码来完成这一操作：

<scroll-view
  scroll-x
  class="quick-tabs">
  <view :id="parentNodeId" class="quick-tabs-wrap">
    <view class="quick-tabs-container">
      <view
        v-for="(item, index) of tabList"
        :key="index"
        :id="item.id"
        class="quick-tab-item">
        <text>{{ item.label }}</text>
      </view>
    </view>
    <view class="quick-tabs-block" />
  </view>
</scroll-view>
<script lang="ts" setup>
type Props = {
  moduleValue: number // 外部使用v-model来绑定当前点击的标签索引
  tabs: string[] // 标签数组数据
  color: string // 标签文字的默认颜色
  activeColor: string // 标签激活时的颜色，同时也是滑动条块的颜色
  fontSize: number // 标签文字大小
}

const { proxy } = getCurrentInstance() as Record<string, any>

const props = withDefaults(defineProps<Props>({
  modelValue: 0,
  color: '#606266',
  activeColor: '#DE3F3F',
  fontSize: 30,
}))
const { modelValue, tabs } = toRefs(props)

const tabList = computed(() => {
  return tabs.value.map((item) => ({
    label: item,
    id: `quick-tab-${Math.ceil(Math.random() * 10e5).toString(36)}`
  }))
})

const domQuery = uni.createSelectorQuery().in(proxy)

const parentNode = ref<Record<string, any>>({})
const currentTabNode = ref<Record<string, any>>({})

const parentNodeId = `quick-${Math.ceil(Math.random() * 10e5).toString(36)}`
const currentTabNodeId = ref(tabList.value[modelValue.value].id)
</script>

上面的代码中我们声明了两个变量 parentNode 和 currentTabNode，分别用于存放父节点信息和当前的子节点信息（点击的那一个），下面我们实现一个获取节点数据的方法，

并实现标签节点的点击事件：

<template>
  <scroll-view
    scroll-x
    class="quick-tabs">
    <view :id="parentNodeId" class="quick-tabs-wrap">
      <view class="quick-tabs-container">
        <view
          v-for="(item, index) of tabList"
          :key="index"
          :id="item.id"
          class="quick-tab-item"
          @click="click(index, item.id)">
          <text>{{ item.label }}</text>
        </view>
      </view>
      <view class="quick-tabs-block" :style="tabBlockStyle" />
    </view>
  </scroll-view>
</template>

<script lang="ts" setup>
type Props = {
  modelValue: number // 外部使用v-model来绑定当前点击的标签索引
  tabs: string[] // 标签数组数据
  color: string // 标签文字的默认颜色
  activeColor: string // 标签激活时的颜色，同时也是滑动条块的颜色
  fontSize: number // 标签文字大小
}

const { proxy } = getCurrentInstance() as Record<string, any>
const emits = defineEmits(['update:modelValue', 'change'])

const props = withDefaults(defineProps<Props>({
  modelValue: 0,
  color: '#606266',
  activeColor: '#DE3F3F',
  fontSize: 30,
}))
const { modelValue, tabs, activeColor } = toRefs(props)

const tabList = computed(() => {
  return tabs.value.map((item) => ({
    label: item,
    id: `quick-tab-${Math.ceil(Math.random() * 10e5).toString(36)}`
  }))
})

const domQuery = uni.createSelectorQuery().in(proxy)

const parentNode = ref<Record<string, any>>({})
const currentTabNode = ref<Record<string, any>>({})

const parentNodeId = `quick-${Math.ceil(Math.random() * 10e5).toString(36)}`
const currentTabNodeId = ref(tabList.value[modelValue.value].id) // 默认为第一个子节点的id

const tabBlockStyle = computed(() => {
  const { left: parentNodeLeft } = parentNode.value
  const { left: currentTabLeft, width } = currentTabNode.value
  return {
    left: currentTabLeft ? `${currentTabLeft - parentNodeLeft}px` : 0,
    width: `${width}px`,
    backgroundColor: activeColor.value,
  }
})

const getDomNodeInfo = (domId: string, callback: (data: Record<string, any>) => void) => {
  domQuery.select(`#${domId}`).boundingClientRect(callback).exec()
}

const click = (index: number, domId: string) => {
  getDomNodeInfo(domId, (data) => currentTabNode.value = data)
  emits('update:modelValue', index)
  emits('change', index)
}

onLoad(() => {
  getDomNodeInfo(parentNodeId, (data) => parentNode.value = data)
  getDomNodeInfo(tabList.value[modelValue.value].id, (data) => currentTabNode.value = data)
})
</script>

上面的代码中我们实现了：当页面加载的时候获取父节点信息，以及当前的标签节点信息，现在，当点击标签的时候，条块就会移动到标签下方，但是还没有滑动效果，

我们在 css 中为它添加 transition 属性就可以了：

<style lang="scss" scoped>
.quick-tabs{
  width: 100%;
  white-space: nowrap;
  ::-webkit-scrollbar{
    width: 0;
    height: 0;
    color: transparent;
  }
  .quick-tabs-wrap{
    display: inline-block;
    position: relative;
    .quick-tab-item{
      display: inline-block;
      margin-right: 32rpx;
      padding: 16rpx 0 32rpx;
      &:last-child{
        margin-right: 0;
      }
    }
  }
  .quick-tabs-block{
    position: absolute;
    left: 0;
    bottom: 0;
    height: 16rpx;
    transition: all 200ms; // 加上它
  }
}
</style>

到这里，组件已经完成了大半部分了，接下来我们为标签添加选中样式，以及实现将隐藏的标签拉出来的功能：

定义一个 computed 属性，并将其添加到滑动条块上

<template>
  <scroll-view
    scroll-x
    :scroll-into-view="currentTabNodeId"
    :show-scrollbar="false"
    scroll-with-animation
    class="quick-tabs">
    <view :id="parentNodeId" class="quick-tabs-wrap">
      <view class="quick-tabs-container">
        <view
          v-for="(item, index) of tabList"
          :key="index"
          :id="item.id"
          class="quick-tab-item"
          @click="click(index, item.id)">
          <text :style="tabTextStyle(index)">{{ item.label }}</text>
        </view>
      </view>
      <view class="quick-tabs-block" :style="tabBlockStyle" />
    </view>
  </scroll-view>
</template>

<script lang="ts" setup>
const tabTextStyle = computed(() => (index: number) => (
  {
    fontSize: `${fontSize.value}rpx`,
    color: index === modelValue.value ? activeColor.value : color.value,
    fontWeight: index === modelValue.value ? 'bold' : '',
  }
))
</script>

监听 modelValue 变化，设置 currentTabNodeId 的值，这样在点击标签的时候就可以实现将隐藏的标签拉出来了，同时给 scroll-view 加上 scroll-with-animation 属性，

标签拉出来的过程中就有了一些过度动画，不会显得那么生硬。

<script lang="ts" setup>
const setScrollViewId = (newValue: number) => {
  const maxIndex = tabList.value.length - 1
  if (newValue <= maxIndex && newValue >= 1) {
    currentTabNodeId.value = tabList.value[newValue - 1].id
  }
}

watch(() => modelValue.value, setScrollViewId)
</script>

在页面中使用

<!-- pages/index/index -->
<template>
  <quick-tabs v-model="current" :tabs="tabs" />
</template>

<script lang="ts" setup>
const current = ref(0)
const tabs = [
  '点赞关注',
  '评论分享',
  '新闻资讯',
  '影音视听',
  '人文地理',
  '社会百科',
]
</script>

<style>

</style>
```typescript
下面是完整代码：
```typescript
<template>
  <scroll-view
    scroll-x
    :scroll-into-view="currentTabNodeId"
    :show-scrollbar="false"
    scroll-with-animation
    class="quick-tabs">
    <view :id="parentNodeId" class="quick-tabs-wrap">
      <view class="quick-tabs-container">
        <view
          v-for="(item, index) of tabList"
          :key="index"
          :id="item.id"
          class="quick-tab-item"
          @click="click(index, item.id)">
          <text :style="tabTextStyle(index)">{{ item.label }}</text>
        </view>
      </view>
      <view class="quick-tabs-block" :style="tabBlockStyle" />
    </view>
  </scroll-view>
</template>

<script lang="ts" setup>
type Props = {
  modelValue?: number
  tabs: string[]
  fontSize?: number
  color?: string
  activeColor?: string
}

const { proxy } = getCurrentInstance() as Record<string, any>
const emits = defineEmits(['update:modelValue', 'change'])

const props = withDefaults(defineProps<Props>(), {
  modelValue: 0,
  color: '#606266',
  activeColor: '#DE3F3F',
  fontSize: 30,
})
const { modelValue, tabs, color, activeColor, fontSize } = toRefs(props)

const domQuery = uni.createSelectorQuery().in(proxy)
const parentNodeId = `quick-${Math.ceil(Math.random() * 10e5).toString(36)}`
const parentNode = ref<Record<string, any>>({})
const currentTabNode = ref<Record<string, any>>({})

const tabList = computed(() => {
  return tabs.value.map((item) => ({
    label: item,
    id: `quick-tab-${Math.ceil(Math.random() * 10e5).toString(36)}`
  }))
})

const currentTabNodeId = ref(tabList.value[modelValue.value].id)

const tabTextStyle = computed(() => (index: number) => (
  {
    fontSize: `${fontSize.value}rpx`,
    color: index === modelValue.value ? activeColor.value : color.value,
    fontWeight: index === modelValue.value ? 'bold' : '',
  }
))

const tabBlockStyle = computed(() => {
  const { left: parentNodeLeft } = parentNode.value
  const { left: currentTabLeft, width } = currentTabNode.value
  return {
    left: currentTabLeft ? `${currentTabLeft - parentNodeLeft}px` : 0,
    width: `${width}px`,
    backgroundColor: activeColor.value,
  }
})

const getDomNodeInfo = (domId: string, callback: (data: Record<string, any>) => void) => {
  domQuery.select(`#${domId}`).boundingClientRect(callback).exec()
}

const click = (index: number, domId: string) => {
  getDomNodeInfo(domId, (data) => currentTabNode.value = data)
  emits('update:modelValue', index)
  emits('change', index)
}

const setScrollViewId = (newValue: number) => {
  const maxIndex = tabList.value.length - 1
  if (newValue <= maxIndex && newValue >= 1) {
    currentTabNodeId.value = tabList.value[newValue - 1].id
  }
}

watch(() => modelValue.value, setScrollViewId)

onLoad(() => {
  getDomNodeInfo(parentNodeId, (data) => parentNode.value = data)
  getDomNodeInfo(tabList.value[modelValue.value].id, (data) => currentTabNode.value = data)
})
</script>

<style lang="scss">
.quick-tabs{
  width: 100%;
  white-space: nowrap;
  ::-webkit-scrollbar{
    width: 0;
    height: 0;
    color: transparent;
  }
  .quick-tabs-wrap{
    display: inline-block;
    position: relative;
    .quick-tab-item{
      display: inline-block;
      margin-right: 32rpx;
      padding: 16rpx 0 32rpx;
      &:last-child{
        margin-right: 0;
      }
    }
  }
  .quick-tabs-block{
    position: absolute;
    left: 0;
    bottom: 0;
    height: 16rpx;
    transition: all 200ms;
  }
}
</style>
热爱生活的正道的光
关注
  • 0
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
Uniapp实现滑动页面tab的切换
qq_44127479的博客
11-16 995
Uniapp实现滑动页面tab的切换。
uni-app实现可以滑动的tab标签
肖肖肖丽珠的博客
04-15 1391
这个超简单的就是把tab标签的view写在scroll-view就可以啦 <scroll-view scroll-x="true" scroll-with-animation class="scroll-tab" > <block v-for="(item,index) in tabBars" :key="index"> <view class="scroll-ta...
uniapp实现可滑动选项卡
01-18
本文实例为大家分享了uniapp实现可滑动选项卡的具体代码，供大家参考，具体内容如下 tabControl-tag.vue <view class=tabList :style=isEquall
【uniapp tabs标签组件】移动端tabs标签组件，点击标签滚动到中间位置，点击标签横向滚动显示完全【复制即用】
seeeeeeeeeee的博客
03-20 3150
这个tabs功能是很多移动端项目都要用的最近我刚好遇到了这个功能因为我们项目不让用uview等组件。所以只能用uniapp自带的组件uni-ui但是问题就是这里没有这种滚动的tabs标签组件用啊。所以万不得已之下，我cv工程师只好动动小手写一个组件了。刚好这里也发出来保存一下，以后在用到可以直接复制了。
uniapp组件之tab选项卡滑动切换功能实现 vue2版本+vue3版本
最新发布
weixin_42220130的博客
06-03 951
uniapp组件之tab选项卡滑动切换功能实现，本文结合实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友参考下吧。
uni-app 之组件 入门教程 uniapp在线教程 uni app视频教程
04-22
讲解uni-app中如何使用组件，主要讲解了基础组件，表单组件等常用的组件，课程主要是针对uni app组件入门学习者。
uniapp实现tabs切换（可滑动）
不会写代码的前端
08-14 9743
uniapp 实现tabs切换
uniapp创建tabs组件
qq_39274996的博客
10-14 3582
效果如图，点击时切换页面内容 代码实现： 1、创建公共tabs模板 <template> <view class="uni-tab-bar"> <view class="scrollClass" v-for="(tab,index) in tabBars" :key="tab.id" :style="scrollStyle"> <view class="swiper-tab-list" :...
UniApp 组件 u-tabs 详细讲解
zzx262625的博客
11-25 7259
该属性设置选项卡切换动画的缓动函数，可选的值包括 "linear"、"ease"、"ease-in"、"ease-out"、"ease-in-out" 等。可以设置为 "slide"（左右滑动切换）、"fade"（淡入淡出切换）或自定义动画名称（需要在全局样式中定义）。通过使用 u-tabs 组件，您可以轻松地创建具有选项卡切换功能的界面。该属性指定当前选中的选项卡的索引值，可以使用 v-model 进行双向绑定。通过回调函数的参数可以获取当前选中的选项卡索引值。标签来实现多个选项卡之间的切换。
uni-app实现tabs与内容的上下滚动相联动
qq_38118138的博客
09-23 2845
uni-app实现tabs与内容的上下滚动相联动
只是使用React构建的一个简单的tabs组件-React开发
05-27
React SimpleTabs这是使用ReactJS构建的一个简单的<Tabs>组件。 参见演示。 安装安装此组件非常容易，并且只有一个依赖项：React。 所以，您有很多React SimpleTab。这很简单 用ReactJS构建的组件。 参见演示。 安装...
joplin-note-tabs:允许一次在标签中打开多个便笺并将其固定
05-15
它允许一次在标签中打开多个便笺并将其固定以保持打开状态。 :warning: 注意-需要Joplin v1.6.7或更高版本 目录 执照 特征 将选定的笔记显示为选项卡 标签下方的其他显示选项 所选笔记的完整面包屑 导航按钮（ ...
vue-tabs-chrome-用于类似Chrome的标签的Vue组件。-Vue.js开发
05-27
vue-tabs-chrome一个类似于Chrome的标签的Vue组件。 Draggabilly由@desandro提供的拖放支持。 现场演示https：//viewweiwu.github.i vue-tabs-chrome一个类似于Chrome的标签的Vue组件。 Draggabilly由@desandro提供...
React-reactsimpletabs采用React构建的一个简单的标签组件
08-14
`react-simpletabs`是基于React的一个轻量级且易于使用的标签组件库，适用于快速开发需要标签功能的应用。 在React中，组件是可重用的代码块，它们可以独立处理自己的状态和UI渲染。`react-simpletabs`正是利用了这...
hugo-dynamic-tabs:Hugo主题组件，可让您在markdown文件中添加动态标签
04-29
雨果动态标签此短代码使您可以轻松地将标签添加到降价文件中。 您可以拥有的选项卡组数量或选项卡组中的选项卡数量没有硬编码限制。 请注意，两个短代码都使用但可以根据需要进行更改。如何安装主题组件首先克隆这个...
【uniapp】uniapp制作滑动选项卡
weixin_72709530的博客
09-08 1336
uniapp制作滑动选项卡
uniapp 微信小程序 tabs选项卡组件,可以设置固定顶部-吸顶（fixed）,随页面滚动自动切换选项（仿淘宝详情）,附带选项切换动画
thj13896076523的博客
07-05 8326
可以设置tabs贴顶，（固定在顶部） 点击选项，页面滚动到指定类型位置 页面滚动，typeTabs滚动到指定的类型 this.$refs.tabs.clickType：调用子组件的方法，第三个值传true,防止页面点击回调多次出发，导致滚动错乱 onReady：页面加载完成后根据ID获取对应选项在页面中的top值，用于页面滚动时的判断依据 onPageScroll：使用timer节流，防止计算..................
uni tabs组件，tab选项卡滑动切换
在职可交流前端开发，包括：web端、uniapp等，欢迎指教。
12-19 809
tabs点击和左右切换滑动，uni框架，基于vue2语法。"uni组件库没有tabs选项卡组件，只有自己封装，实现的思路： 考虑分为上下两块，上部是类型切换绑定点击事件，下部之前用动态组件，下部改为swiper组件，并绑定change事件。 swiper组件的属性current绑定第几个swiper-item子项，并且watch监听绑定值，对这个绑定值处理和上部的类型对应上(也可不处理)。"
uniapp：实现tabs（scroll-view）点击左右滑动
qq_34720531的博客
02-22 2000
uniapp：实现tabs（scroll-view）点击左右滑动
uni-app tabs
08-22
uni-app是一款跨平台的开发框架，而tabs则是uni-app中的一种界面布局组件。tabs可以实现在底部或顶部导航栏的位置上显示多个选项卡，方便用户在不同页面之间进行切换。 使用uni-app的tabs组件可以方便地创建一个具有选项卡切换功能的界面。开发者只需要在页面的template中添加tabs组件，然后设置不同选项卡的标题和对应的页面路径，即可实现选项卡的展示和切换。 tabs的使用方式简单灵活，可以根据需要设置底部或顶部导航栏的位置，并且可以自定义选项卡的样式和布局。同时，tabs还提供了一些事件回调函数，如点击选项卡、切换选项卡等，开发者可以根据需求自定义处理逻辑。 uni-app的tabs在跨平台开发中非常实用，可以快速搭建具有选项卡切换功能的界面。无论是开发微信小程序、H5网页还是App，都可以使用tabs组件轻松实现界面的切换，提升用户体验。 总之，uni-app的tabs是一个功能强大、简单易用的组件，可以帮助开发者快速构建跨平台的界面，实现选项卡切换的功能。无论是个人开发者还是企业团队，都可以利用tabs来开发出优秀的uni-app应用。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

热爱生活的正道的光

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值