本文共 4264 字，大约阅读时间需要 14 分钟。

在移动端，横向滚动的时候，使用一个小小滚动条，说明是可以左右滑动的。

在这里不是直接左右滑动切换到下个页面，而是div左右滑动。

效果如哈罗单车这种金刚区的交互。下面蓝色的是滚动条

我自己实现效果如下：


代码如下：

<template>  <div class="selfHelp">    <div class="scrollContent" ref="scrollCon" @scroll="scrollCon">      <div class="con-item">        <div class="item-top">          <img class="img" src="../../assets/img/class/qq.png" alt="" />          <div class="item-label">我的订单</div>        </div>        <div class="item-bot">          <img class="img" src="../../assets/img/class/wx.png" alt="" />          <div class="item-label">个人信息</div>        </div>      </div>      <div class="con-item">        <div class="item-top">          <img class="img" src="../../assets/img/class/qq.png" alt="" />          <div class="item-label">我的订单</div>        </div>        <div class="item-bot">          <img class="img" src="../../assets/img/class/wx.png" alt="" />          <div class="item-label">个人信息</div>        </div>      </div>      <div class="con-item">        <div class="item-top">          <img class="img" src="../../assets/img/class/qq.png" alt="" />          <div class="item-label">我的订单</div>        </div>        <div class="item-bot">          <img class="img" src="../../assets/img/class/wx.png" alt="" />          <div class="item-label">个人信息</div>        </div>      </div>      <div class="con-item">        <div class="item-top">          <img class="img" src="../../assets/img/class/qq.png" alt="" />          <div class="item-label">我的订单</div>        </div>        <div class="item-bot">          <img class="img" src="../../assets/img/class/wx.png" alt="" />          <div class="item-label">个人信息</div>        </div>      </div>      <div class="con-item">        <div class="item-top">          <img class="img" src="../../assets/img/class/qq.png" alt="" />          <div class="item-label">我的订单</div>        </div>        <div class="item-bot">          <img class="img" src="../../assets/img/class/wx.png" alt="" />          <div class="item-label">个人信息</div>        </div>      </div>    </div>    <div class="scrollSlider" ref="scrollBox">      <div class="contentSlider" ref="scrollBar"></div>    </div>  </div></template><script>import apis from '@/http/custom.js'export default {
     data () {
       return {
         conScrollWidth: '', // 滚动内容的宽度      conClientWidth: '', // box的宽度      conScrollLeft: '',  // 滚动了的距离    }  },  methods: {
       // 滚动事件    scrollCon (e) {
         this.conScrollWidth = e.target.scrollWidth      this.conClientWidth = e.target.clientWidth      this.conScrollLeft = e.target.scrollLeft      var scale = (this.conScrollWidth - this.conClientWidth) / (this.$refs.scrollBox.clientWidth - this.$refs.scrollBar.clientWidth)      this.$refs.scrollBar.style.marginLeft = (this.conScrollLeft / scale) + 'px'    }  }}</script><style lang="less">.selfHelp {
     .scrollContent {
       width: 100%;    height: 120px;    overflow-y: hidden;    overflow-x: auto;    white-space: nowrap;    border: 1px solid red;    .con-item {
         text-align: center;      display: inline-block;      background-color: cyan;      width: 25%;      height: 120px;      .item-top {
           height: 60px;      }      .item-bot {
           height: 60px;      }      .img {
           width: 30px;        height: 30px;      }      .item-label {
           font-size: 12px;      }    }  }  .scrollContent::-webkit-scrollbar {
       /*滚动条整体样式*/    width: 0;    /*高宽分别对应横竖滚动条的尺寸*/    height: 0;  }  .scrollSlider {
       margin: 0 auto;    margin-top: 20px;    height: 5px;    width: 50px;    background-color: chocolate;    .contentSlider {
         height: 5px;      width: 20px;      background-color: cornflowerblue;    }  }}</style>

主要实现逻辑如下：

 // 滚动事件    scrollCon (e) {
       //使用比例来实现同步滚动 	//this.conScrollWidth 滚动区域的长度  	//this.conClientWidth div区域长度	//this.conScrollLeft   滚动了的距离      this.conScrollWidth = e.target.scrollWidth      this.conClientWidth = e.target.clientWidth      this.conScrollLeft = e.target.scrollLeft    // 计算滑动的比例      var scale = (this.conScrollWidth - this.conClientWidth) / (this.$refs.scrollBox.clientWidth - this.$refs.scrollBar.clientWidth)    //滚动条滑动的距离      this.$refs.scrollBar.style.marginLeft = (this.conScrollLeft / scale) + 'px'    }

以上就是整个滚动区域的实现过程，如果对你有帮助，动动小手点个赞，支持一下作者。🤗🤗🤗