微信号:FrontDev

介绍:分享 Web 前端相关的技术文章、工具资源、精选课程、热点资讯

自制简单的range(Vue)

2018-09-22 20:00 前端大全

(点击上方公众号,可快速关注)

作者:信心 

https://juejin.im/post/5b8de1d0f265da434f219875


废话不多说先上成果图



实现思路


主要分界面与逻辑两大块


界面分为5个部分


  • 左滑块长度

  • 左内容位置

  • 中间长度

  • 右滑块长度

  • 右内容位置


逻辑


  • touch3个事件

  • 各滑块长度及位置计算

  • 选中时变色


具体实现步骤


首先我们明白整个容器的长度是不变的等于左边+中间+右边所以我们可以通过先获取总的容器的宽度并用变量进行保存,这里我用的就是屏幕的宽度。


this.rangeWidth = document.body.clientWidth


添加vue的三种touch事件。


@touchstart.stop.prevent="leftTextTouchStart" //按下 

@touchmove.stop.prevent="leftTextTouchMove" //滑动 

@touchend.stop.prevent="leftTextTouchEnd"  //松开//右滑块,同上 

@touchstart.stop.prevent="rightTextTouchStart" 

@touchmove.stop.prevent="rightTextTouchMove" 

@touchend.stop.prevent="rightTextTouchEnd"


使用类绑定的方式,在touchStart事件触发的方式,修改点击的滑块的样式,在松开时触发touchend事件,恢复原来的样式。


//滑动事件方法 

leftTextTouchStart() {

  this.leftClick = true; 

}, leftTextTouchEnd() {  

   this.leftClick = false; 

},//类样式绑定

:class="{check_text_div:leftClick}"


滑动时三大块核心宽度及位置的计算,因为滑动中坐标轴是实时变化,这里我们使用vue的计算属性进行操作。


rangeWidth //整个容器的宽度

leftWidth //左边滑动的距离,通过滑动事件定义

rightWidth //右边滑动的距离,通过滑动事件定义

width() {  

  return Math.min(Math.max(0, this.rangeWidth - this.leftWidth - this.rightWidth), this.rangeWidth)//内容宽度应等于总宽度减去左右两边,且大于等于0小于等于总宽度},

left() {  

  return Math.max(this.leftWidth, 0)//防止左滑出界面

},right() {  

  if (this.left + this.rightWidth <= this.rangeWidth) return Math.max(this.rightWidth - 0.5, 0)//防止右滑出界面

},


滑动事件中,界面变化及左右两边滑动距离的记录。


leftTextTouchMove(e) {

    let touch = e.changedTouches[0];

    let clientX = touch.clientX; //获取滑动事件的横坐标值   

    if (clientX >= 0) {

        //只检测滑块在坐标值在屏幕内     

        if (this.left + this.right <= this.rangeWidth) {

            //防止左右滑块位置倒置           

            this.leftWidth = clientX;//左滑块距离等于x坐标  

 

            //界面操作            

            $('#nowRange').css({'left': this.left, 'width': this.width});

            $('#leftText').css({'left': this.left});

            $('#leftImg').css({'left': this.left});

        }

    }

},

rightTextTouchMove(e) {

    let touch = e.changedTouches[0];

    let clientX = touch.clientX;//获取滑动事件的横坐标值   

    if (clientX <= this.rangeWidth) {//只检测滑块在坐标值在屏幕内   

        this.rightWidth = this.rangeWidth - clientX;//右边滑块距离等于总长度减去滑动横坐标  

        if (this.left + this.right <= this.rangeWidth) {//防止左右滑块位置倒置   

            //界面变化       

            $('#nowRange').css({'width': this.width});

            $('#rightText').css({'right': this.right});

            $('#rightImg').css({'right': this.right});

        }

    }

},


文本内容通过计算值便可实现。


leftText()

{

    let num = parseInt(this.left / this.rangeWidth * 100);

    if (num === 0 || isNaN(num)) return '不限';

    return num + 'k';

},

rightText()

{

    if (this.rangeWidth === 0) return '不限';

    let num = parseInt((this.rangeWidth - this.right) / this.rangeWidth * 100);

    if (num >= 0) {

        if (num === 100) return '不限';

        return num + 'k';

    }

}


核心代码就这些了,撒花完结,优化什么的,你们自己看着来咯



【关于投稿】


如果大家有原创好文投稿,请直接给公号发送留言。


① 留言格式:
【投稿】+《 文章标题》+ 文章链接

② 示例:
【投稿】《不要自称是程序员,我十多年的 IT 职场总结》:http://blog.jobbole.com/94148/

③ 最后请附上您的个人简介哈~



觉得本文对你有帮助?请分享给更多人

关注「前端大全」,提升前端技能

 
前端大全 更多文章 前端小团队建设 重新认识 React 生命周期 一线大厂是如何开发微信小游戏的? 使用 React 一年后,我学到的最重要经验 JavaScript 数组去重
猜您喜欢 需求评审之实战演练 ❲深入理解❳Java内存模型——锁 OpenResty Inc. 诚邀前端牛人加入 剖析大数据平台的数据源 想在微信玩电商?请先真正搞懂流量