手把手撸vue移动UI框架: 滑动删除

2018-06-14 admin

前言

前几天因为项目需要,用jquery写了一个swiperOut组件,然后我就随便把这个组件翻译成基于Vue的了,有兴趣的朋友可以看下。Github源码(不麻烦的话帮忙star,请各位大爷赏个星星) demo展示

效果展示

老规矩,先上效果,效果不是很好,大家如果有什么生成gif的好用的软件可以推荐下:

开始制作

DOM结构

分析效果途中的结构,我们可以得出每一项可滑动删除的节点的结构包含如下两部分:

  1. 正文部分,显示咱们的主内容
  2. 滑动出来的部分(如:删除按钮)
<li class="r-swiper-out-item">
  <div class="r-swiper-out-item-content"></div>
  <div class="r-swiper-out-item-btns"></div>
</li>

因为使用swiperOut的情景一般都是列表,所以,这里我们用li标签;在实际使用情况中,咱们的content和btns两个容器中的内容是经常会自定义的,所以在这里咱们使用两个插槽slot接受用户的自定义:

<li class="r-swiper-out-item">
  <div class="r-swiper-out-item-content">
    <slot></slot>
  </div>
  <div class="r-swiper-out-item-btns">
    <slot name="btns">
      <div class="r-swiper-out-item-btn" @click="delItem">删除</div>
    </slot>
  </div>
</li>

这个是咱们每一项的DOM结构,接下来,咱们还需要把这个列表放到一个UL容器中去,我们把UL父容器叫做swiperOut,子列表项li叫做swiperOutItem。swiperOut的DOM结构如下:

<ul class="r-swiper-out" ref="swiperOut">
  <slot></slot>
</ul>

css样式

swiperOutItem:

<style lang="scss">
.r-swiper-out-item{
  position: relative;
  &-btns{
    display: inline-block;
    position: absolute;
    right: 0;
    top:0;
    height: 100%;
    transform: translateX(100%);
  }
  &-btn{
    background-color: red;
    color: #fff;
    width: 100px;
    text-align: center;
  }
}
</style>

我们这里让正文content占据视图的100%,然后按钮容器btns靠右绝对定位,然后再把btns向右移动100%,这样btns就刚好衔接在content后面。当向左滑动的时候,item向左移动,btns显示出来。父容器swiperOut的样式如下:

<style lang="scss">
.r-swiper-out{
  position: relative;
  width: 100%;
  overflow: hidden;
}
</style>

javascript

该交互的具体逻辑如下:

  1. 自容器向左滑动,容器跟着移动
  2. 如果有已经处于打开状态的子项,需要把这个已经打开的子项关闭
  3. 当手指释放的时候,判断移动距离是否超过阀值
  4. 如果超过阀值,则运用动画,把btns完全显示出来
  5. 如果没有,则运用动画返回初始状态

首先当子项初始化的时候我们应该获取btns的宽度,因为这个宽度决定了我们向左最多能滑动多少

<script>
export default{
  data () {
    return {
      btnsWidth: 0
    }
  },
  mounted () {
    this.$nextTick(() => {
      this.btnsWidth = this.$refs.btns.offsetWidth
    })
  }
}
</script>

接下来,咱们应该给item绑定一个样式对象,用来动态控制,子项滑动的距离:

<script>
export default{
  data () {
    return {
      btnsWidth: 0  
      startX: 0,
      translateX: 0,
    }
  },
  computed: {
    itemStyle () {
      return {
        transform: `translate3d(${this.translateX}px, 0, 0)`,
        transition: `all ${this.speed}ms`
      }
    }
  },
  /*...省略之前代码...*
}
</script>

接下来给content绑定滑动事件:

<script>
export default{
  /*...省略之前代码...*
  methods: {
    touchstart (e) {},
    touchmove (e) {},
    touchend (e) {} 
  }
  /*...省略之前代码...*
}
</script>

接下来完善,touchstart函数:

  1. 记录手指开始滑动的坐标
  2. 将动画执行事件设置成零
  3. 记录当前item的X轴坐标
<script>
export default{
  data () {
    return {
      speed: 300,
      startX: 0,
      translateX: 0,
      oldPoint: null,
      btnsWidth: 0
    }
  },
  methods: {
    touchstart (e) {
      this.oldPoint = e.touches[0]
      this.speed = 0
      this.startX = this.translateX
    }
  }
  /*...省略之前代码...*
}
</script>

完善我们的核心函数touchmove函数,逻辑如下:

  1. 获取手指横向移动距离moveX以及纵向距离moveY
  2. 判断手指是横向滑动还是纵向滑动,如果是横向滑动才移动容器,否则假设用户在滚动列表
  3. 判定用户在横向滑动,计算出item当前在X轴应该滑动的距离
<script>
export default{
  /*...省略之前代码...*
  methods: {
    touchmove (e) {
      let moveX = e.touches[0].pageX - this.oldPoint.pageX
      let moveY = e.touches[0].pageY - this.oldPoint.pageY
      if (Math.abs(moveX) < Math.abs(moveY) || Math.abs(moveX) < 20 || Math.abs(moveY) > 30) return

      e.preventDefault()
      moveX = this.startX * 1 + moveX * 1

      if (moveX < -this.btnsWidth) {
        moveX = -this.btnsWidth
      } else if (moveX > 0) {
        moveX = 0
      }

      this.translateX = moveX
    }
  }
  /*...省略之前代码...*
}
</script>

当手指离开屏幕,触发touchend的时候:

  1. 判定当前滑动总距离是否超过阀值
  2. 超过阀值,显示btns,否则重置item的移动
  3. 给item一个动画,关闭或者打开btns
<script>
export default{
  /*...省略之前代码...*
  methods: {
    touchend (e) {
      let moveX = -this.translateX > 30 ? -this.btnsWidth : 0
      this.speed = 300
      this.translateX = moveX
    }
  }
  /*...省略之前代码...*
}
</script>

到目前为止,咱们完成了item本身的交互逻辑,但是下面这个功能咱们目前还没有实现:

  1. 如果有已经处于打开状态的子项,需要把这个已经打开的子项关闭

那么我们应该怎么实现这个功能呢,我的初步设想是: 当用户触发滑动的时候,咱们触发父组件中的一个事件,把自组件本身传递给父组件;父组件记录当前活动的组件,如果之前活动的组件和当前活动的组件不是同一个子项,那么调用子组件自己的重置函数,关闭上一个活动子项,然后根据之前的逻辑移动现在咱们手指触摸的这个组件。代码如下: swiperOutItem:

<script>
export default{
  /*...省略之前代码...*
  methods: {
    touchmove (e) {
      let moveX = e.touches[0].pageX - this.oldPoint.pageX
      let moveY = e.touches[0].pageY - this.oldPoint.pageY
      if (Math.abs(moveX) < Math.abs(moveY) || Math.abs(moveX) < 20 || Math.abs(moveY) > 30) return

      e.preventDefault()
      this.$parent.$emit('changeActiveItem', this)
      moveX = this.startX * 1 + moveX * 1

      if (moveX < -this.btnsWidth) {
        moveX = -this.btnsWidth
      } else if (moveX > 0) {
        moveX = 0
      }

      this.translateX = moveX
    }
  }
  /*...省略之前代码...*
}
</script>

请注意,在touchmove中咱们增加了一句代码:this.$parent.$emit(‘changeActiveItem’, this) swiperOut:

<script>
export default{
  data () {
    return {
      activeItem: null
    }
  },
  methods: {
    changeActiveItem (item) {
      if (this.activeItem === item) return
      if (this.activeItem && this.activeItem.close) {
        this.activeItem.close()
      }
      this.activeItem = item
    }
  },
  created () {
    this.$on('changeActiveItem', this.changeActiveItem)
  }
}
</script>

到此为止,咱们这个组件基本上已经完成了,但是还有一个问题,就是咱们应该怎么去删除我们的子项呢?这里咱们还是和上面一样,点击子项的删除按钮,触发父组件,然后在父组件中调用removeChild方法删除子项,具体实现如下: swiperOut:

<script>
export default{
  /*...省略之前代码...*
  methods: {
    childRemove (childNode) {
      this.$refs.swiperOut.removeChild(childNode)
    }
  },
  created () {
    this.$on('childRemove', this.childRemove)
  }
  /*...省略之前代码...*
}
</script>

swiperOutItem:

<script>
export default{
  /*...省略之前代码...*
  methods: {
    delItem () {
      this.$parent.$emit('childRemove', this.$el)
    }
  }
  /*...省略之前代码...*
}
</script>

咱们在这一小节中只写了各个事件的处理函数,但是在DOM中绑定事件的代码没有写出来大家在跟着写代码的时候,千万不要忘了在DOM中绑定事件哦!!,整理最终代码如下: swiperOut:

<template>
  <ul class="r-swiper-out" ref="swiperOut">
    <slot></slot>
  </ul>
</template>

<script>
export default{
  data () {
    return {
      activeItem: null
    }
  },
  methods: {
    changeActiveItem (item) {
      if (this.activeItem === item) return
      if (this.activeItem && this.activeItem.close) {
        this.activeItem.close()
      }
      this.activeItem = item
    },
    childRemove (childNode) {
      this.$refs.swiperOut.removeChild(childNode)
    }
  },
  created () {
    this.$on('changeActiveItem', this.changeActiveItem)
    this.$on('childRemove', this.childRemove)
  }
}
</script>

<style lang="scss">
.r-swiper-out{
	position: relative;
	width: 100%;
	overflow: hidden;
}
</style>

swiperOutItem:

<template>
  <li class="r-swiper-out-item" :style="itemStyle">
    <div class="r-swiper-out-item-content" ref="content"
    @touchstart="touchstart"
    @touchmove="touchmove"
    @touchend="touchend">
      <slot></slot>
    </div>
    <div class="r-swiper-out-item-btns" ref="btns">
      <slot name="btns">
        <div class="r-swiper-out-item-btn" @click="delItem">删除</div>
      </slot>
    </div>
  </li>
</template>

<script>
export default{
  data () {
    return {
      speed: 300,
      startX: 0,
      translateX: 0,
      oldPoint: null,
      btnsWidth: 0
    }
  },
  computed: {
    itemStyle () {
      return {
        transform: `translate3d(${this.translateX}px, 0, 0)`,
        transition: `all ${this.speed}ms`
      }
    }
  },
  methods: {
    touchstart (e) {
      this.oldPoint = e.touches[0]
      this.speed = 0
      this.startX = this.translateX
    },
    touchmove (e) {
      let moveX = e.touches[0].pageX - this.oldPoint.pageX
      let moveY = e.touches[0].pageY - this.oldPoint.pageY
      if (Math.abs(moveX) < Math.abs(moveY) || Math.abs(moveX) < 20 || Math.abs(moveY) > 30) return

      e.preventDefault()
      this.$parent.$emit('changeActiveItem', this)
      moveX = this.startX * 1 + moveX * 1

      if (moveX < -this.btnsWidth) {
        moveX = -this.btnsWidth
      } else if (moveX > 0) {
        moveX = 0
      }

      this.translateX = moveX
    },
    touchend (e) {
      let moveX = -this.translateX > 30 ? -this.btnsWidth : 0
      this.speed = 300
      this.translateX = moveX
    },
    close () {
      this.translateX = 0
    },
    delItem () {
      this.$parent.$emit('childRemove', this.$el)
    }
  },
  mounted () {
    this.$nextTick(() => {
      this.btnsWidth = this.$refs.btns.offsetWidth
    })
  }
}
</script>

<style lang="scss">
.r-swiper-out-item{
  position: relative;
  &-btns{
    display: inline-block;
		position: absolute;
		right: 0;
		top:0;
		height: 100%;
		transform: translateX(100%);
  }
  &-btn{
    background-color: red;
		color: #fff;
		width: 100px;
		text-align: center;
  }
}
</style>

写在最后

最近好像懒劲犯了,好久都没有更新博客了,谨记谨记!!!!对了,还有就是如果大家对我写的文章有不懂的,或者说希望我怎么写的更通俗易懂的,可以在评论里面评论我!争取以后的写的更能让大家懂我实现的思路。

原文链接:http://www.divpc.cn/post/detail/91

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-34047.html

文章标题:手把手撸vue移动UI框架: 滑动删除

相关文章
2014年最流行前端开发框架对比评测
如今,各种开发框架层出不穷,各有千秋。哪些是去年较受开发者关注的呢?前不久,云适配根据Github上的流行程度整理了2014年最受欢迎的6个前端开发框架,并进行对比说明,希望帮助有需要的朋友选择合适自己的前端框架。 1. Bootstrap...
2015-11-12
可以从CSS框架中借鉴到什么
现在很多人会使用 CSS 框架进行快速建站。   那 CSS 框架是什么呢,它通常是一些 CSS 文件的集合,这些文件包括基本布局、表单样式、网格、简单组件、以及样式重置。使用 CSS 框架大大降低工作成本进行快速建站。   当然对于一些大...
2016-03-11
前端MV*框架的意义
经常有人质疑,在前端搞MV有什么意义?也有人提出这样的疑问:以AngularJS,Knockout,BackBone为代表的MV框架,它跟jQuery这样的框架有什么区别?我jQuery用得好好的,有什么必要再引入这种框架? 回答这些问题之...
2016-03-11
vue.js实现请求数据的方法示例
vue2.0示例代码如下: var vm = new Vue({ el:&quot;#list&quot;, data:{ gridData: &quot;&quot;, }, ...
2017-03-20
Html5 是否适合移动应用开发
HTML5最近这几年声誉鹊起,而基于HTML5技术的产品也风生水起。感觉现在你的产品要是不和HTML5沾点边,都不好意思和客户打招呼!移动应用开发中,HTML5更是不可或缺的角色,市面上不少移动应用中间件产品都号称支持HTML5,例如APP...
2015-11-12
最细致的vue.js基础语法 值得收藏!
介绍 前段时间接触到一个库叫做Vue.js, 个人感觉很棒,所以整理了一篇博文做个介绍。 Vue读音/vju:/,和view类似。是一个数据驱动的web界面库。Vue.js只聚焦于视图层,可以很容易的和其他库整合。代码压缩后只有24kb。 ...
2017-03-21
vuejs通过filterBy、orderBy实现搜索筛选、降序排序数据
直接贴代码了: 先上输入前的样子: &lt;style&gt; #example{margin:100px auto;width:600px;} .show{margin:10px;} #searchText{display: block...
2017-03-17
js实现鼠标左右移动,图片也跟着移动效果
效果:鼠标往左移,图片对应右移,鼠标往右移,图片就左移动。图片距离越远偏移距离越大。 思路:首先获取图片原先的距离。设置一个变化值,图片的最终距离等于原先的距离加上变化值 布局:大盒子里面是图片,大盒子position:relative;图...
2017-02-17
HTML5移动应用开发的12大特性
1.离线缓存为HTML5开发移动应用提供了基础 HTML5 Web Storage API可以看做是加强版的cookie,不受数据大小限制,有更好的弹性以及架构,可以将数据写入到本机的ROM中,还可以在关闭浏览器后再次打开时恢复数据,以减少...
2015-11-11
移动端网页设计经验与心得
智能手机发展确实很迅速,像今年,我的大部分工作就都在移动端网页上。 再往前些年,看到的手机版/移动版网页,限制于浏览器与手机性能,2g网络速度等 网页设计无非是蓝、黑、白,界面单调,并且要尽可能的设计简单。 现在情况就大不相同了,软件上we...
2015-12-23
回到顶部