如何实现一个带图片的tabs导航栏

最新推荐文章于 2024-06-27 22:26:27 发布

lifire_H

最新推荐文章于 2024-06-27 22:26:27 发布

阅读量1.1k

点赞数

文章标签： javascript vue.js html

本文链接：https://blog.csdn.net/weixin_49707375/article/details/128011228

版权

最近接到一个需求，要实现一个带图片的导航栏效果：

具体的需求有：

1，导航数据中如果选项图片不为空，则显示图片不显示文字；

2，选中项文字凸显，是图片的情况，图片尺寸变大；

3，指示器跟随移动；

接到需求翻了下资料，没找到有现成的框架可以用，基本都是纯文字的导航功能，看来只能自己写一个了。

先上代码结构和样式代码：


<template>
  <view ref="tabs" class="tabs">
    <view ref="tabsContent" class="tabs-content">
      <view
        v-for="(item, index) in list"
        :ref="'LEl_' + index"
        :class="['tabs-item', 'LEl_' + index, index == current ? 'active' : '']"
        @click="change(index)"
      >
        <div v-if="item.imgUrl">
          <u-image
            :src="item.imgUrl"
            :style="{
              height: index == current ? '56rpx' : '44rpx',
              width: getImgWidth(item.imgWidth, item.imgHeight, (index == current ? 56 : 44)) + 'rpx'
            }"
          >
          <div class="title" slot="loa