了解更多开源请访问：开源基础软件社区https://ost.51cto.com前言很多手机都有浮球功能，浮球可以有很多功能点，可以显示、隐藏和拖动。这次我也会实现一个浮球组件介绍。这是一个漂浮的球。左右两侧，隐藏效果会自动显示使用参数名称参数说明参数类型默认值x横坐标Number100y纵坐标Number100isShow是否显示浮球ball"),注意：该元素不能在onInit()中获取,否则获取不到。在手指触摸事件中，获取并存储触摸的坐标，通过e.touches[0].localX获取。在手指触摸屏幕移动的事件中，我们得到移动后的坐标，偏移量可以通过移动后的坐标-移动前的坐标得到，最后存储当前坐标，依次循环，计算出偏移量后，需要得到距离当前元素的左侧和顶部的距离，加上距离和偏移量得到元素的最新位置。通过动态样式将最新的元素位置分配给元素，并且可以实现拖放。//当手指刚接触到屏幕时触发此事件。mousedownHandler(e){this.startPositionX=e.touches[0].localX;this.startPositionY=e.touches[0].localY;this.show()},//当手指触摸屏幕后移动时触发此事件mousemoveHandler(e){constoffsetX=e.touches[0].localX-this.startPositionX;constoffsetY=e.touches[0].localY-this.startPositionY;constball=this.$element("ball")this.left=ball.getBoundingClientRect().left+offsetXthis.top=ball.getBoundingClientRect().top+offsetYthis.startPositionX=e.touches[0].localX;this.startPositionY=e.touches[0].localY;},2。显示隐藏显示隐藏需要配合动画效果才更好！定义显示和隐藏两个事件。当我们触发手指触屏事件时，display事件被调用；当手指触摸结束和离开事件被触发时，隐藏事件被调用。隐藏事件的触发条件：当元素向左或向右靠近时，元素将被隐藏。隐藏意味着从屏幕上删除一半的元素。通过判断条件，当元素距离left位置left小于0时，将元素的一半宽度赋值给left。注意需要设置为负值！当元素靠近右侧时，需要获取屏幕宽度和元素宽度，因为当元素右侧靠近屏幕右侧时，会触发隐藏事件，所以需要通过屏幕宽度-元素宽度。显示事件的触发条件：我们只需要判断元素到左边的距离是否小于0，如果小于0，就让left=0；然后判断元素向右的距离是否大于屏幕宽度-元素宽度，如果是，则令元素的右侧距离=屏幕宽度-元素宽度。hide(){constcontainer=this.$element("container")constball=this.$element("ball")constcontainerWidth=container.getBoundingClientRect().widthconstballWidth=ball.getBoundingClientRect().widthif(this.left<0){this.left=-ballWidth/2}elseif(this.left>containerWidth-ballWidth){this.left=containerWidth-ballWidth/2}},show(){constcontainer=this.$元素（“容器”）constball=this.$element（“ball”）constcontainerWidth=container.getBoundingClientRect().widthconstballWidth=ball.getBoundingClientRect().widthif(this.left<0){this.left=0}elseif(this.left>containerWidth-ballWidth){this.left=containerWidth-ballWidth}}完整代码index.js：//@ts-nocheckexportdefault{data:{//标记滑块是否显示isShow:真，startPositionX：0，startPositionY:0,top:null,left:null},onInit(){this.top=0;这个.left=0;},//当手指刚接触到屏幕时触发该事件mousedownHandler(e){this.startPositionX=e.touches[0].localX;this.startPositionY=e.touches[0].localY;this.show()},//当手指触摸屏幕后移动时触发此事件mousemoveHandler(e){constoffsetX=e.touches[0].localX-this.startPositionX;constoffsetY=e.touches[0].localY-this.startPositionY;constball=this.$element("ball")this.left=ball.getBoundingClientRect().left+offsetXthis.top=ball.getBoundingClientRect().top+offsetYthis.startPositionX=e.touches[0].localX;this.startPositionY=e.touches[0].localY;},//当手指触摸结束离开屏幕时触发事件。mouseupHandler(e){this.hide();},hide(){constcontainer=this.$element("container")constball=this.$element("ball")constcontainerWidth=container.getBoundingClientRect().widthconstballWidth=ball.getBoundingClientRect().widthif(this.left<0){this.left=-ballWidth/2}elseif(this.left>containerWidth-ballWidth){this.left=containerWidth-ballWidth/2}},show(){constcontainer=this.$element("container")constball=this.$element("ball")constcontainerWidth=container.getBoundingClientRect().widthconstballWidth=ball.getBoundingClientRect().widthif(this.left<0){this.left=0}elseif(this.left>containerWidth-ballWidth){this.left=containerWidth-ballWidth}}}index.hml：
