当前位置: 首页 > Web前端 > HTML

干货-实战vue移动端UI框架:滑动删除

时间:2023-04-02 16:21:47 HTML

。r-swiper-out-item{位置:相对;&-btns{显示:内联块;位置:绝对;右:0;顶部:0;高度:100%;转换:translateX(100%);}&-btn{背景颜色:红色;颜色:#fff;宽度:100px;文本对齐:居中;}}前言前几天因为项目需要,用jquery写了一个swiperOut组件,然后干脆把这个组件翻译成了基于vue的。感兴趣的朋友可以看看。Github源码(麻烦帮忙下手,麻烦给个star)demo展示效果老规矩,效果先上传,效果不是很好,有什么好用的gif生成软件,可以推荐一下:开始制作DOMStructural结构分析途中,我们可以得出结论,每个节点可以滑动删除的结构包括以下两部分:文本部分,显示我们主要的部分内容滑出(比如删除按钮)

因为使用swiperOut的场景一般是列表,所以这里使用li标签;在实际使用中,我们content和btns这两个容器中的内容往往是自定义的,所以这里我们使用两个A槽接受用户自定义:
Delete
这是我们每个item的DOM结构。接下来,我们需要将这个列表放入一个UL容器中。我们称UL父容器为swiperOut,子列表项li为swiperOutItem。swiperOut的DOM结构如下:cssstyleswiperOutItem:。r-swiper-out-item{位置:相对;&-btns{显示:内联块;位置:绝对;右:0;顶部:0;高度:100%;转换:translateX(100%);}&-btn{背景颜色:红色;颜色:#fff;宽度:100px;文本对齐:居中;}}这里我们让文本内容占据视图的100%,然后将按钮容器btns绝对定位到右边,然后将btns向右移动100%,这样btns就在内容的后面.向左滑动时,item向左移动,显示btns。父容器swiperOut的样式如下:.r-swiper-out{position:relative;宽度:100%;overflow:hidden;}javascript具体交互逻辑如下:self-container向左滑动,容器随之移动。如果有打开的子项,需要关闭打开的子项。当手指松开时,判断移动距离是否超过阈值。如果超过阈值,则使用动画设置btns如果未完全显示,则使用动画返回初始状态。首先,子项初始化的时候,我们应该得到btns的宽度,因为这个宽度决定了我们最多可以向左滑动多少接下来我们要绑定一个Style对象,用于动态控制滑动距离子项目:接下来绑定滑动事件到content:接下来完善touchstart函数:记录手指开始滑动的坐标,设置动画执行事件归零,并记录当前item的X轴坐标e){this.oldPoint=e.touches[0]this.speed=0this.startX=this.translateX}}/*...省略前面的代码...*}改进我们的核心函数touchmove函数,逻辑如下:获取手指水平方向的移动距离moveX和垂直距离moveY,判断手指是水平滑动还是垂直滑动。如果手指水平滑动,容器将移动。否则,假设用户正在滚动列表并确定用户在水平滑动。计算当前item应该在X轴上滑动的距离当手指离开屏幕时,touchend触发When:判断当前总滑动距离是否超过阈值,显示btns,否则重置item的移动并给item一个动画,关闭或打开btns至此,我们完成了item本身的交互逻辑,但是我们还没有实现下面的功能:如果有一个打开的子项,我们需要关闭这个打开的子项,那么我们应该如何实现这个功能,我初步的想法是:当用户触发滑动时,我们在父组件中触发一个事件,并将组件本身传递给父组件;父组件记录当前激活的组件,如果之前激活的组件与当前激活的组件不是同一个子项,则调用子组件自身的reset函数,关闭之前激活的子项,然后根据之前的逻辑移动我们手指现在触摸的组件代码如下:swiperOutItem:请注意,我们在touchmove:this.$parent.$emit('changeActiveItem',this)swiperOut:至此,我们的组件就基本完成了,但是还有还有一个问题,就是我们的子项应该怎么删除呢?这里我们还是和上面一样,点击子item的删除按钮,触发父组件,然后调用父组件中的removeChild方法删除子item,具体实现如下:swiperOut:swiperOutItem:在这一节中,我们只为每个事件,但是在DOM中绑定事件的代码没有写出来,写代码的时候,别忘了在DOM中绑定事件!!,最终代码整理如下:swiperOut:.r-swiper-out{位置:相对;宽度:100%;溢出:隐藏;swiperOutItem:.r-swiper-out-item{位置:相对;&-btns{显示:内联块;位置:绝对;右:0;顶部:0;高度:100%;转换:translateX(100%);}&-btn{背景颜色:红色;颜色:#fff;宽度:100px;文本对齐:居中;}}写在最后,最近好像比较懒。好久没更新博客了,记着吧!!!!对了,如果你看不懂我写的文章,或者想让我写得更轻松,可以在评论里给我留言哦!争取以后多写点,让大家明白我的实现思路