Vue实现移动端APP的方格布局横向滑动翻页带滚动条

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

在这里不是直接左右滑动切换到下个页面，而是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'
    }

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