Vue2.0如何實(shí)現(xiàn)歌手列表滾動(dòng)及右側(cè)快速入口功能

小編給大家分享一下Vue2.0如何實(shí)現(xiàn)歌手列表滾動(dòng)及右側(cè)快速入口功能，希望大家閱讀完這篇文章之后都有所收獲，下面讓我們一起去探討吧！

1 歌手列表

歌手列表頁(yè)類似于手機(jī)通訊錄，我們也將其作為一個(gè)基礎(chǔ)組件獨(dú)立出來(lái)，這部分的邏輯比較簡(jiǎn)單，這里不做過(guò)多的講解

// base/listview/listview.vue
<template>
  <scroll class="listview" :data="data">
    <ul>
      <li v-for="(group, index) in data" :key="index" class="list-group">
        <h3 class="list-group-title">{{group.title}}</h3>
        <uL>
          <li v-for="(item, index) in group.items" :key="index" class="list-group-item">
            <img class="avatar" v-lazy="item.avatar">
            <span class="name">{{item.name}}</span>
          </li>
        </uL>
      </li>
    </ul>
  </scroll>
</template>
<script type="text/ecmascript-6">
  import Scroll from 'base/scroll/scroll'
  export default {
    props: {
      data: {
        type: Array,
        default: () => []
      }
    },
    components: {
      Scroll
    }
  }
</script>
<style scoped lang="stylus" rel="stylesheet/stylus">
  @import "~common/stylus/variable"
  .listview
    position: relative
    width: 100%
    height: 100%
    overflow: hidden
    background: $color-background
    .list-group
      padding-bottom: 30px
      .list-group-title
        height: 30px
        line-height: 30px
        padding-left: 20px
        font-size: $font-size-small
        color: $color-text-l
        background: $color-highlight-background
      .list-group-item
        display: flex
        align-items: center
        padding: 20px 0 0 30px
        .avatar
          width: 50px
          height: 50px
          border-radius: 50%
        .name
          margin-left: 20px
          color: $color-text-l
          font-size: $font-size-medium
    .list-shortcut
      position: absolute
      z-index: 30
      right: 0
      top: 50%
      transform: translateY(-50%)
      width: 20px
      padding: 20px 0
      border-radius: 10px
      text-align: center
      background: $color-background-d
      font-family: Helvetica
      .item
        padding: 3px
        line-height: 1
        color: $color-text-l
        font-size: $font-size-small
        &.current
          color: $color-theme
          font-weight: bolder
    .list-fixed
      position: absolute
      top: -1px
      left: 0
      width: 100%
      .fixed-title
        height: 30px
        line-height: 30px
        padding-left: 20px
        font-size: $font-size-small
        color: $color-text-l
        background: $color-highlight-background
    .loading-container
      position: absolute
      width: 100%
      top: 50%
      transform: translateY(-50%)
</style>
// singer.vue
<template>
 <div class="singer">
  <list-view :data="singerList"></list-view>
 </div>
</template>
<script type="text/ecmascript-6">
 import ListView from 'base/listview/listview'
 export default {
  ...
  components: {
   ListView
  }
 }
</script>

運(yùn)行結(jié)果

2 右側(cè)快速入口_點(diǎn)擊滾動(dòng)

同樣是類比于手機(jī)通訊錄，懸浮于屏幕右側(cè)的 A-Z 可以幫助我們快速找到對(duì)應(yīng)的歌手，為此，我們需要獲取 title 的集合數(shù)組

// listview.vue
<div class="list-shortcut">
  <ul>
    <li v-for="(item, index) in shortcutList" :key="index" class="item">{{item}}</li>
  </ul>
</div>
<script type="text/ecmascript-6">
  export default {
    ...
    computed: {
      shortcutList() {
        return this.data.map((group) => {
          return group.title.substr(0, 1)
        })
      }
    }
  }
</script>

運(yùn)行結(jié)果

快速入口出現(xiàn)了之后，我們接下來(lái)就為其添加點(diǎn)擊事件，當(dāng)我們點(diǎn)擊對(duì)應(yīng)字母時(shí)，需要獲取其索引，這里我們直接獲取 v-for 提供的 index 即可

// listview.vue
<ul>
  <li v-for="(item, index) in shortcutList" :key="index" @touchstart="onShortcutTouchStart($even, index)" class="item">{{item}}</li>
</ul>
export default {
  ...
  methods: {
    onShortcutTouchStart(e, index) {
      console.log(index)
    }
  }
}

點(diǎn)擊之后，我們需要頁(yè)面滾動(dòng)到相應(yīng)位置，這里需要擴(kuò)展 scroll 組件的方法，這里擴(kuò)展的方法都是來(lái)自 better-scroll 組件所封裝的方法，這里提一下 scrollToElement 方法的第二個(gè)參數(shù)是動(dòng)畫時(shí)間，可根據(jù)自身需求進(jìn)行設(shè)置

// scroll.vue
methods: {
 ...
 scrollTo() {
  this.scroll && this.scroll.scrollTo.apply(this.scroll, arguments)
 },
 scrollToElement() {
  this.scroll && this.scroll.scrollToElement.apply(this.scroll, arguments)
 }
}

隨后給 scroll 組件添加 ref="listview" 以及歌手列表添加 ref="listGroup" 方便我們調(diào)用

// listview.vue
export default {
  ...
  methods: {
    onShortcutTouchStart(e, index) {
      this.$refs.listview.scrollToElement(this.$refs.listGroup[index], 0)
    }
  }
}

運(yùn)行結(jié)果

3 右側(cè)快速入口_滑動(dòng)滾動(dòng)

當(dāng)我們的手指在右側(cè)快速入口上滑動(dòng)時(shí)，歌手列表也會(huì)同步進(jìn)行滾動(dòng)，當(dāng)我們滾動(dòng)右側(cè)快速入口時(shí)，我們需要阻止歌手列表滾動(dòng)，以及瀏覽器原生滾動(dòng)，所以要使用 @touchmove.stop.prevent 阻止冒泡，并且在 onShortcutTouchStart 事件中記錄觸碰點(diǎn)的初始位置，以及 onShortcutTouchMove 事件中觸碰點(diǎn)的位置，通過(guò)兩個(gè)位置的像素差，來(lái)滾動(dòng)歌手列表

// listview.vue
<div class="list-shortcut" @touchmove.stop.prevent="onShortcutTouchMove">
  <ul>
    <li v-for="(item, index) in shortcutList" :key="index" @touchstart="onShortcutTouchStart($event, index)" class="item">{{item}}</li>
  </ul>
</div>
<script type="text/ecmascript-6">
  const ANCHOR_HEIGHT = 18
  export default {
    created() {
      this.touch = {}
    },
    ...
    methods: {
      onShortcutTouchStart(e, index) {
        let firstTouch = e.touches[0]
        this.touch.y1 = firstTouch.pageY
        this.touch.anchorIndex = index
        this._scrollTo(index)
      },
      onShortcutTouchMove(e) {
        let firstTouch = e.touches[0]
        this.touch.y2 = firstTouch.pageY
        let delta = (this.touch.y2 - this.touch.y1) / ANCHOR_HEIGHT | 0
        let anchorIndex = this.touch.anchorIndex + delta
        this._scrollTo(anchorIndex)
      },
      _scrollTo(index) {
        this.$refs.listview.scrollToElement(this.$refs.listGroup[index], 0)
      }
    },
    components: {
      Scroll
    }
  }
</script>

運(yùn)行結(jié)果

4 右側(cè)快速入口_高亮設(shè)置

當(dāng)歌手列表滾動(dòng)時(shí)，我們想要在右側(cè)快速入口中，高亮當(dāng)前顯示的 title ，這就需要我們監(jiān)聽 scroll 組件的滾動(dòng)事件，來(lái)獲取當(dāng)前滾動(dòng)的位置

// scroll.vue
<script type="text/ecmascript-6">
 export default {
  props: {
   ...
   listenScroll: {
    type: Boolean,
    default: false
   }
  },
  methods: {
   _initScroll() {
    ...
    if (this.listenScroll) {
     let me = this
     this.scroll.on('scroll', (pos) => {
      me.$emit('scroll', pos)
     })
    }
   }
  }
 }
</script>

我們當(dāng)初給參數(shù) probeType 設(shè)的默認(rèn)值為 1，即會(huì)非實(shí)時(shí)（屏幕滑動(dòng)超過(guò)一定時(shí)間后）派發(fā) scroll 事件，我們?cè)谄聊换瑒?dòng)的過(guò)程中，需要實(shí)時(shí)派發(fā) scroll 事件，所以在 listview 中將 probeType 的值設(shè)為 3

// listview.vue
<template>
    <scroll class="listview" 
            :data="data" 
            ref="listview"
            :probe-type="probeType"
            :listenScroll="listenScroll"
            @scroll="scroll">
        <ul>
            ...
        </ul>
        <div class="list-shortcut" @touchmove.stop.prevent="onShortcutTouchMove">
            <ul>
                <li v-for="(item, index) in shortcutList" 
                    :key="index" 
                    :class="{'current':currentIndex===index}"
                    @touchstart="onShortcutTouchStart($event, index)" 
                    class="item">{{item}}</li>
            </ul>
        </div>
    </scroll>
</template>
<script type="text/ecmascript-6">
    export default {
        created() {
            ...
            this.listHeight = []
            this.probeType = 3
        },
        data() {
            return {
                scrollY: -1,
                currentIndex: 0
            }
        },
        methods: {
            ...
            scroll(pos) {
                this.scrollY = pos.y
            },
            _scrollTo(index) {
                this.scrollY = -this.listHeight[index]
                this.$refs.listview.scrollToElement(this.$refs.listGroup[index], 0)
            },
            _calculateHeight() {
                this.listHeight = []
                const list = this.$refs.listGroup
                let height = 0
                this.listHeight.push(height)
                for (let i = 0; i < list.length; i++) {
                    let item = list[i]
                    height += item.clientHeight
                    this.listHeight.push(height)
                }
            }
        },
        watch: {
            data() {
                this.$nextTick(() => {
                    this._calculateHeight()
                })
            },
             scrollY(newY) {
                const listHeight = this.listHeight
                // 當(dāng)滾動(dòng)到頂部，newY>0
                if (newY > 0) {
                    this.currentIndex = 0
                    return
                }
                // 在中間部分滾動(dòng)
                for (let i = 0; i < listHeight.length - 1; i++) {
                    let height1 = listHeight[i]
                    let height2 = listHeight[i + 1]
                    if (-newY >= height1 && -newY < height2) {
                        this.currentIndex = i
                        return
                    }
                }
                // 當(dāng)滾動(dòng)到底部，且-newY大于最后一個(gè)元素的上限
                this.currentIndex = listHeight.length - 2
            }
        },
        components: {
            Scroll
        }
    }
</script>

運(yùn)行結(jié)果

5 滾動(dòng)固定標(biāo)題

當(dāng)我們滾動(dòng)歌手列表頁(yè)時(shí)，希望該歌手的 title 一直顯示在頂部，并且滾動(dòng)到下一個(gè) title 時(shí)，新的 title 將舊的 title 頂替掉，這里就需要我們計(jì)算一個(gè) title 的高度

// listview.vue
<template>
    <scroll class="listview" 
            :data="data" 
            ref="listview"
            :probe-type="probeType"
            :listenScroll="listenScroll"
            @scroll="scroll">
        ...
        <div class="list-fixed" ref="fixed" v-show="fixedTitle">
            <div class="fixed-title">{{fixedTitle}}</div>
        </div>
    </scroll>
</template>
<script type="text/ecmascript-6">
    import Scroll from 'base/scroll/scroll'
    const TITLE_HEIGHT = 28
    const ANCHOR_HEIGHT = 18
    export default {
        ...
        data() {
            return {
                scrollY: -1,
                currentIndex: 0,
                diff: -1
            }
        },
        computed: {
            ...
            fixedTitle() {
                if (this.scrollY > 0) {
                    return ''
                }
                return this.data[this.currentIndex] ? this.data[this.currentIndex].title : ''
            }
        },
        watch: {
            ...
            scrollY(newY) {
                ...
                for (let i = 0; i < listHeight.length - 1; i++) {
                    ...
                    if (-newY >= height1 && -newY < height2) {
                        ...
                        this.diff = height2 + newY
                        return
                    }
                }
                ...
            },
            diff(newVal) {
                let fixedTop = (newVal > 0 && newVal < TITLE_HEIGHT) ? newVal - TITLE_HEIGHT : 0
                if (this.fixedTop === fixedTop) {
                    return
                }
                this.fixedTop = fixedTop
                this.$refs.fixed.style.transform = `translate3d(0,${fixedTop}px,0)`
            }
        }
    }
</script>

為什么要使用Vue

Vue是一款友好的、多用途且高性能的JavaScript框架，使用vue可以創(chuàng)建可維護(hù)性和可測(cè)試性更強(qiáng)的代碼庫(kù)，Vue允許可以將一個(gè)網(wǎng)頁(yè)分割成可復(fù)用的組件，每個(gè)組件都包含屬于自己的HTML、CSS、JavaScript，以用來(lái)渲染網(wǎng)頁(yè)中相應(yīng)的地方，所以越來(lái)越多的前端開發(fā)者使用vue。

看完了這篇文章，相信你對(duì)“Vue2.0如何實(shí)現(xiàn)歌手列表滾動(dòng)及右側(cè)快速入口功能”有了一定的了解，如果想了解更多相關(guān)知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道，感謝各位的閱讀！