用户体验设计|Element ui tabs组件左右箭头切换 (第一项为固定项)

之前发布过一篇关于切换的但是有点瑕疵这次补充一下


<template>
    <div style="margin: 10px 10px; border: 1px solid rgb(212, 209, 209); border-radius: 10px; overflow: hidden; box-shadow: 0px 0px 12px -6px;">
                    <!-- 导航栏 -->
 
     <div class="TAb">
//这个v-if是渲染的条数少于几条的话左右箭头不展示 没有需求可不加
        <div class="xiangzuo" @click="leftChange()" v-if="changePage">
          <!-- 左箭头 -->
          <i class="el-icon-arrow-left"></i>
        </div>
 
        <el-tabs class="TAB" v-model="activeIndex" @tab-click="handleClick" scrollable="true">
          <!-- 固定项 -->
          <el-tab-pane v-if="showFixedTab" label="地名信息" name="fixed">
            <!-- 固定项内容 -->
  <!-- //在这加了一个判断 如果渲染的数据没有值的话就不展示这一行 -->
                        <div class="text-container" v-if="item.valueName != '' && item.valueName != null " v-for="(item,index) in infoData" :key="index">
                            <span  class="first">{{ index}}: </span>   <span class="text">{{ item.valueName }}</span>
                        </div>
            <!-- ... -->
          </el-tab-pane>
 
          <!-- 其他项 -->
          <el-tab-pane v-for="(item, index) in tabsList" :key="index" :label="item.label" :name="index.toString()" style="padding: 0px 10px;">
            <!-- 定义不同的切换列表样式 -->
            <span v-html="item.name"></span>
            <!-- <slot :name="item.key" :index="index" /> -->
          </el-tab-pane>
        </el-tabs>
 
        <div class="xiangyou" @click="rightChange()" v-if="changePage">
          <!-- 右箭头 -->
          <i class="el-icon-arrow-right"></i>
        </div>
      </div>

data里没啥可看的就是要渲染的数据定义


  data() {
        return {
//默认选中的项
            activeIndex: "",
            tabsList: [],
            // 测试数据
            // testMock: [
            //     {label:'暂无数据',name:'暂无数据'},
            //     {label:'暂无数据',name:'暂无数据'},
            //     {label:'暂无数据',name:'暂无数据'},
            // ],
            //  activeTab: this.defaultActiveTab
            // 切换页显示与隐藏
            changePage: true,
            showFixedTab:true
        };
    },

在生命周期里刚开始的时候判断了一下看是否添加固定项因为我这个是组件


   created() {
         this.activeIndex = this.showFixedTab ? 'fixed' : '0';
    },

这个是判断条数低于几条的时候不展示左右箭头有需求的话看是开局就添加还是监测到数据了在触发方法都一样


      if (this.tabsList != null && this.tabsList.length < 3) {
                this.changePage = false
            } else if (this.tabsList != null && this.tabsList.length > 3) {
                this.changePage = true
            } else {
                this.changePage = false
            }

最后就是方法


leftChange() {
            const currentIndex = parseInt(this.activeIndex);
            if (currentIndex > 0) {
                this.activeIndex = (currentIndex - 1).toString();
            } else if (currentIndex === 0 && this.showFixedTab) {
                this.activeIndex = 'fixed';
            }
        },
        rightChange() {
//因为我是将他的下标当默认选中的数据为依据的所以转化为数值型
            const currentIndex = parseInt(this.activeIndex);
            const lastIndex = this.tabsList.length - 1;
            if (currentIndex < lastIndex) {
                this.activeIndex = (currentIndex + 1).toString();
//如果选中的数据为最大值了 切换到fixed项
            } else if (currentIndex === lastIndex && this.showFixedTab) {
                this.activeIndex = 'fixed';
//如果为fixed项就切换到数据的0项 
            } else if (this.activeIndex == 'fixed') {
                this.activeIndex = '0';
            }
        },
        handleClick(tab) {
            if (tab.name !== 'fixed') {
                this.activeIndex = tab.name;
            }

兄弟们看需求改改吧

评论记录：