移动端滑块导航栏

一.效果图

滑动并且下面的滑块跟着动

1.静态就不多说了在你盒子里面加 overflow-y: auto;超出横线滚动条滑动模块就搞定了
2.下面的滑块
在添加overflow-y: auto的这个盒子添加滚动条事件 @scroll=“scrollEvent($event)”

<div class="box" @scroll="scrollEvent($event)">

获取滚动条便宜距离

const scrollEvent = (e: any) => {
  scrollEve.value = e.srcElement.scrollLeft
  console.log(e.srcElement.scrollLeft)
  // let menuList = that.$refs.menuList
}

计算
scrollEve 获取的偏移量 0.35是我自己这边计算的，我这里是25px到头，所以就25/700大家看情况计算我这里写死了

<div class="load-1" :style="{ left: scrollEve * 0.035 + 'px' }"></div>

完整代码

<template>
  <div class="top fs-18">组合订购享受更多</div>
  <div class="box" @scroll="scrollEvent($event)">
    <div class="box-s flex-d">
      <div
        :style="{ width: 206 * (index + 1) + 'px' }"
        class="box-1"
        v-for="(item, index) in data.dataList"
        :key="index"
        @click="handelOK(item)"
      >
        <div class="box-1-1"><img src="" alt="" /></div>
        <div class="box-1-2 flex-p">
          <span>{{ item.name }}</span>
          <div class="box-1-2-1"><img src="" alt="" /></div>
        </div>
      </div>
    </div>
    <div class="load">
      <div class="load-1" :style="{ left: scrollEve * 0.035 + 'px' }"></div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { reactive, ref, onMounted } from 'vue'

import { useRouter } from 'vue-router'
const router = useRouter()
const scrollEve = ref(0)
const data = reactive({
  dataList: [
    { name: '韩先生' },
    { name: '韩先生1' },
    { name: '韩先生2' },
    { name: '韩先生3' },
    { name: '韩先生4' },
    { name: '韩先生4' },
    { name: '韩先生4' },
    { name: '韩先生4' },
    { name: '韩先生4' },
    { name: '韩先生5' }
  ]
})
const handelOK = (item: object) => {
  console.log(item)
}

const scrollEvent = (e: any) => {
  scrollEve.value = e.srcElement.scrollLeft
  console.log(e.srcElement.scrollLeft)
  // let menuList = that.$refs.menuList
}
</script>

<style lang="scss" scoped>
$full-width: 206px;
.top {
  color: #333333;
  margin-top: 52px;
}
.flex-d {
  display: flex;
}

.box {
  height: 274px;
  overflow-y: auto;
  margin-top: 28px;
  // background-color: #333333;

  .box-s {
    // width: $full-width * 6;
    .box-1 {
      width: 182px;
      height: 226px;
      position: relative;
      margin: 0 24px 0 0;
      &-1 {
        width: 182px;
        height: 182px;
        background-color: aqua;
        img {
          width: 36px;
          height: 36px;
          background-color: #333333;
          position: absolute;
          right: 19px;
          top: 12px;
        }
      }
      &-2 {
        width: 182px;
        height: 52px;
        border-radius: 24px;
        background-color: #ccc;
        position: absolute;
        bottom: 20px;
        z-index: 1;
        font-size: 26px;
        &-1 {
          width: 40px;
          height: 40px;
          background-color: #333333;
        }
      }
    }
  }
  .load {
    width: 96px;
    height: 8px;
    background-color: #c2c6de;
    border-radius: 24px;
    position: absolute;
    left: 326px;
    display: flex;
    &-1 {
      width: 50px;
      height: 8px;
      border-radius: 24px;
      background-color: #256fff;
      position: absolute;
    }
  }
}
/*滚动条样式*/
::-webkit-scrollbar {
  display: none; /*隐藏滚动条 */
 
}

 
</style>