项目之动态滚动条

还是刚刚那样 只是那个滚动条会跟随着屏幕的滚动而滚动了而已，首先还是在data上定义一些我们所需要的属性

data(){
            return{
                //开始滚动的触摸点
                StartX:0,

                //结束点
                EndX:0,

                //移动的长度
                MoveX:0
            }
        },

我们需要三个数据，一个是开始的触摸点离屏幕最左端的距离，名为startX,触摸的时候移动的点到屏幕最左端的距离名为MoveX,还有就是松开手指的时候的距离
接下来就是定义移动端的触摸事件
还是在项目一初始化的时候就触发

mounted(){
            this.bindMobile();

methods:{
            bindMobile(){
                this.$el.addEventListener('touchstart',this.handletouchstart,false);
                this.$el.addEventListener('touchmove',this.handletouchmove,false);
                this.$el.addEventListener('touchend',this.handletouchend,false);
            },
            handletouchstart(event){
                let start = event.touches[0];
                this.StartX = Number(start.pageX);

            },
            handletouchmove(event){
                let move = event.touches[0];
                let moveWidth = Number(move.pageX) - this.StartX;
                this.MoveX = -((this.bgBarW/this.scrollContentW) * moveWidth - this.EndX);
                

                if(this.MoveX <=0){
                    this.MoveX = 0
                }
                else if(this.MoveX >=this.bgBarW -this.barXWidth){
                    this.MoveX = this.bgBarW - this.barXWidth

                }
            },

            handletouchend(event){
                this.EndX = this.MoveX;
            }
        }
    }

定义一个bindMobile方法，通过addEventListener来绑定移动端的触摸事件
this.$el就是它指的是当前组件的的元素，给当前元素动态绑定移动端触摸事件
移动端事件自带一个event参数，通过打印event.touch我们可以知道里面的pageX是我们想要的距离

微信截图_20181112010814.png

然后通过比例换算 移动的过程中的移动距离-开始的距离比上总宽度等于滚动条移动的距离减去初始的距离除滚动条总长度
然后动态给width绑定上往左该移动多少距离

 computed:{
            innerBarStyle(){
                return{
                    left:`${this.MoveX}px`
                }
            }
        },

最后就是对滚动条移动进行处理
最后moveX为啥要减去this.EndX的原因就是，如果不减去最后的EndX距离，那么移动距离就会变成0回到原点，因为只要一放弃触摸，移动距离和开始距离就会变成0
最最最后要对边界值进行处理
往左移动不能小于0否则会超出左边边界
往右移动移动不能超过滚动条的长度减去红色滚动条的长度的距离，否则会超出右边