vue利用better-scroll实现通讯录式列表滚动和左右联动效果(1)

1.点击右侧字母,滚动到相应的列表位置

首先在右侧字母列表监听touchstart事件,当事件发生时则执行相应的函数

函数内容

onShortCutTouchStart (e) {
      let anchorIndex = getData(e.target, 'index')
      this.touch.anchorIndex = anchorIndex
      this.$refs.listview.scrollToElement(this.$refs.listgroup[anthorindex], 0)
    },
export function getData (el, name, val) {
  const prefix = 'data-'
  name = prefix + name
  if (val) {
    return el.setAttribute(name, val)
  } else {
    return el.getAttribute(name)
  }
}

(1)因为列表是用v-for循环渲染得到,所以通过:data-index=“index”绑定一个属性,然后通过getAttribute方法获取每个列表的index。e是事件对象,e.target就是对象的每个item

(2)获取了点击时的index,就可以将这个利用better-scroll里面的scrollToElement方法,进行滚动。给目标元素传入刚刚获得的index,就可以实现滚动。0是滚动时间。this.$refs.listgroup[anthorindex]是要滚动到的目标元素。

 this.$refs.listview.scrollToElement(this.$refs.listgroup[anthorindex], 0)

2.滑动右侧字母列表,左侧列表也会实时滚动到对应的位置。

onShortCutTouchStart (e) {
      let anchorIndex = getData(e.target, 'index')
      let firstTouch = e.touches[0]
      this.touch.y1 = firstTouch.pageY
      this.touch.anchorIndex = anchorIndex
      this._scrollTo(anchorIndex)
    },
onShortCutTouchMove (e) {
      let firstTouch = e.touches[0]
      this.touch.y2 = firstTouch.pageY
      let delta = (this.touch.y2 - this.touch.y1) / ANTHOR_HEIGHT | 0
      let anthorIndex = parseInt(this.touch.anchorIndex) + delta
      this._scrollTo(anthorIndex)
    },
 _scrollTo (index) {
      this.$refs.listview.scrollToElement(this.$refs.listgroup[index], 0)
    }

将1中的

 this.$refs.listview.scrollToElement(this.$refs.listgroup[anthorindex], 0)

抽象成一个方法,方便调用,节省写代码时间。

(1)首先获取第一次触摸时的pageY和index

(2)然后获取触摸之后每次滑动时的pageY

(3)两个pageY相减就可以知道它滑动的距离

(4)滑动的距离再除以每个字母列表的高度,得到滑动了多少个字母

(5)然后将第一次触摸获取的index加上滑动字母的个数,就可以算出滑到了哪个字母。

(6)最后调用srcoll的srcollToElement方法滑动到对应的元素上。

(7)因为滑动事件需要用到第一次触摸事件时得到的index和pageY,所以我们在creaded生命钩子中设一个this.touch = {}空对象,存储获取的index和pageY。

tips:

(1)

let delta = (this.touch.y2 - this.touch.y1) / ANTHOR_HEIGHT | 0

这条语句后面的或 0是向下取整的意思,也可以使用Math.floor方法。

(2)

在绑定touchmove事件是要阻止冒泡,不然scroll事件也会被触发,即滑动右侧列表时,左侧列表也跟着滑动。

阻止冒泡用@touchmove.stop.prevent

(3)

要给srcoll的probeType属性设为3,否则移动会有问题

你可能感兴趣的:(vue,javascript)