滑动提示条算法

需求

项目需求中会有滑块，滑块下有提示条（滑动上面的内容，下面的提示对应滑动）

草稿

设计一个功能不能盲目地敲代码，实现理解思路该怎么走，下面是我的思路图和相对应的字段（a:屏幕的宽度/b:滚动内容的宽度/c:滚动条的长度/d:滚动条背景的长度）

监听触摸：

实例：解析

xxx.vue

<template>    <div class="hot_slider">      <div class="hot_slider_content"> <div class="hot_content_inner">   <a class="inner_items">     <img src="xxx.png" />     <span>京东</span>   </a>   <a class="inner_items">     <img src="yyy.png" />     <span>淘宝</span>   </a>     ------------------ </div>      </div>      <!-- 滑动条 -->      <div class="hot_slider_bottom"> <div class="hot_slider_bottom_inner" :style="innerBarStyle"></div>      </div>    </div></template><script>  export default {    name:"Xxx",    data(){   return {     // 1、获取屏幕的宽度a     screenW: window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth,     // 2、滚动内容的宽度b     scrollContentW: 720,     // 3、滚动条的长度c     barXWidth: 0,     // 4、滚动条背景的长度d     bgBarW: 100,     // 5、起点     startX: 0,     // 6、记录结束点     endFlag: 0,     // 7、移动的距离     barMoveWidth: 0   } }, //监听barXWidth样式的变化 computed:{   innerBarStyle(){     return {width: `${this.barXWidth}px`,left: `${this.barMoveWidth}px`     }   } }, mounted() {    this.getBottomBarWidth();    this.bindEvent(); }, methods:{   // 获取滚动条的长度   getBottomBarWidth(){     this.barXWidth = this.bgBarW * (this.screenW / this.scrollContentW)   },   // 移动端事件监听   bindEvent(){      this.$el.addEventListener('touchstart',this.handleTouchStart,false);      this.$el.addEventListener('touchmove',this.handleTouchMove,false);      this.$el.addEventListener('touchend',this.handleTouchEnd,false);   },   // 开始触摸   handleTouchStart(event){      // console.log(event.touches);      // 1、获取第一个触点     let touch = event.touches[0];      // 2、求出起始点     this.startX = Number(touch.pageX);     // console.log(this.startX);   },   // 开始移动   handleTouchMove(){     // console.log('开始移动');     // 1、获取第一个触点     let touch = event.touches[0];     // 2、求出移动的距离     let moveWidth = Number(touch.pageX) - this.startX;     // console.log(moveWidth);     // 3、求出滚动条走的距离     this.barMoveWidth = -((this.bgBarW / this.scrollContentW) * moveWidth - this.endFlag);

    // 4、 边界值处理     if(this.barMoveWidth <= 0){ // 左边this.barMoveWidth = 0;     }else if(this.barMoveWidth >= this.bgBarW - this.barXWidth){ // 右边this.barMoveWidth = this.bgBarW - this.barXWidth;     }   },   // 结束触摸   handleTouchEnd(){     console.log('结束触摸');     this.endFlag = this.barMoveWidth;   }, }      }</script><style scoped>  .hot_slider{      width: 100%;      height: 160px;      position: relative;      background-color: #FFFFFF;      padding-bottom: 8px;    }  .hot_slider_content{    width: 100&;    overflow-x: scroll;  }  .hot_content_inner{    width: 720px;    height: 180px;    display: flex;    flex-wrap:wrap;/* 一行显示不下去自动化 */  }  .inner_items{    width: 90px;    height: 90px;    display: flex;    flex-direction: column;    justify-content: center;    align-items: center;    font-size: 14px;    color: #666666;  }  .inner_items img{    width: 40%;    margin-bottom: 5px;  }/* 禁用原生活动条 */ .hot_slider_content::-webkit-scrollbar{   display: none; }  .hot_slider_bottom{    width: 100px;    height: 3px;    background-color: #EEEEEE;    position: absolute;    left: 50%;    margin-left: -50px;    bottom: -6px;  }  .hot_slider_bottom_inner{    position: absolute;    left: 0;    height: 100%;    background-color: brown;    width: 0;  }</style>

总结

养成先打草稿再设计的好习惯。
继续温习样式的动态绑定和移动端触摸事件的监听流程。