您的位置:首页 > 编程学习 > > 正文

vue点击导航进行内容切换(vue实现顶部左右滑动导航)

更多 时间:2021-10-18 11:08:40 类别:编程学习 浏览量:1389

vue点击导航进行内容切换

vue实现顶部左右滑动导航

日常开发中经常用到导航这些东西,写篇文章记录下。该导航实现为点击末尾/起首位置,导航自动滑动出下一项的效果。

思路:判断当前点击项,相对与屏幕的位置,若点击的位置,满足可移动的限制,进行自动滑动处理。

实现如下:

vue

  • <template>
      <li class="debug-index-page">
        <li class="tab-layout" id="scroller">
          <ul v-for="(tab, idx) in tabList" :key="idx">
            <li
              :id="`tab-${tab.id}`"
              class="tab-item"
              @click="onClickTab(tab)"
              :style="`background:${tab.select ? 'red' : 'none'}`"
            >
              {{ tab.text }}
            </li>
          </ul>
        </li>
      </li>
    </template>
    
  • JS

  • export default {
    
        data() {
            return {
                tabList: [],
            }
        },
    
        created() {
            let list = [
                "我的贵族",
                "贵族1",
                "我的贵族2",
                "贵族3",
                "贵族4",
                "贵族5",
                "我的贵族6",
                "我的贵族7",
            ];
    
            list.forEach((text, idx) => {
                this.tabList.push({
                    text,
                    id: idx, // tab标识
                    select: idx == 0, // 是否被选择
                    index: idx // 处于显示的位置
                });
            });
        },
    
        computed: {
            curTab() {
                return this.tabList.find(v => v.select);
            }
        },
    
        methods: {
    
            onClickTab(tabInfo) {
                let curTab = this.curTab;
                if (curTab.id == tabInfo.id) return;
                let { index, id } = tabInfo;
                // 滑动控件
                let scroller = document.getElementById("scroller");
                let speed = scroller.scrollWidth / this.tabList.length;
                let tab = document.getElementById(`tab-${id}`);
                let bWidth = document.body.clientWidth;
                // 点击右边
                if (curTab.index < index && tab.clientWidth * index >= bWidth - speed) {
                // 滑动的距离
                    scroller.scrollLeft = (index + 2) * speed - bWidth;
                } else if (curTab.index > index && (tab.clientWidth * index - (scroller.scrollLeft + bWidth) < speed)) {
                // 滑动的距离
                    scroller.scrollLeft = (index - 1) * speed;
                }
    
                curTab.select = false;
                this.tabList[index].select = true;
            }
        }
    }
    
  • less

  • .debug-index-page {
        width: 100%;
        overflow:hidden;
    
    
      .tab-layout {
        width: 100%;
        overflow-x: scroll;
        display: flex;
    
        .tab-item {
          width: 1rem;
          text-align: center;
        }
      }
    }
    
  • 以上就是导航的显示了。

    以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持开心学习网。

    标签:vue 滑动 导航
    您可能感兴趣