实例|统软云 AVM框架封装了滑动单元组件

滑动单元组件的原理是主体部分覆盖按钮。通过绝对定位，按钮位于最右侧。通过监视触摸事件、判断滑动方向和计算滑动距离来确定显示和隐藏按钮。显示和隐藏按钮用于通过主体部分css的transform属性移动主体元素，以实现显示和隐藏按键的效果。今天我们将介绍一个封装滑动单元组件的统软云 AVM框架示例。

组件文件

easy-swipe-cell.shtml

<模板>

｛itemContent｝

<脚本>

导出默认值{

name:'轻松滑动单元格'，

道具：{

itemId:字符串，

itemContent：字符串，

touchIdNow：字符串

},

数据（）{

返回{

startX:0，//触摸位置

EndX:0，//结束位置

MoveX:0，//滑动时的位置

DisX:0，//移动距离

handleSwipe：''；，//滑动时的效果，动态绑定

touchId:''；

}

},

已安装（）{

},

方法：{

开始（e）{

//console.log（JSON.stringify（e.detail）+'开始'；）；

此数据。startX=e.detail.x；

此数据。touchId=e.currentTarget.dataset.id；

this.fire（'touch'，this.data.touchId）；

},

移动（e）{

//console.log（JSON.stringify（e.detail）+'Mobile'；）；

let wd=文档.getElementById（'btn'）。offsetWidth；

此数据。moveX=e.detail.x；

此数据。disX=此数据。startX-this.data.moveX；

console.log（this.data.disX）；

//如果滑块向右滑动或不滑动，请勿更改滑块的位置

如果（this.disX<0||this.disX==0）{

此数据。handleSwipe=“变换：translateX（0px）”；

//如果大于0，则表示向左滑动，滑块开始滑动

}否则如果（this.disX>0）{

//具体滑动距离为手指偏移距离*5。

此数据。handleSwipe=“transform:translateX（-”+this.disX*5+“px）”；

//最大值只能等于按钮宽度

如果（this.disX*5>=wd）{

这handleSwipe=“transform:translateX（-”+wd+“px）”；

}

}

this.fire（'touch'，this.data.touchId）；

},

结束（e）{

//console.log（JSON.stringify（e.detail）+'End'；）；

let wd=文档.getElementById（'btn'）。offsetWidth；

让endX=e.detail.x；

这disX=此数据。startX-endX；

//如果距离小于按钮的一半，则强制返回起点

如果（（this.disX*5）<（wd/2））{

此数据。handleSwipe=“变换：translateX（0px）”；

}其他{

//一半以上滑动至最大值

此数据。handleSwipe=“transform:translateX（-”+wd+“px）”；

}

this.fire（'touch'，this.data.touchId）；

},

单击项目（e）{

此数据。handleSwipe=“变换：translateX（0px）”；

this.fire（'clickBtn'，{type:e.currentTarget.dataset。