Vue2.0 實現歌手列表滾動及右側快速入口功能

2019-11-19 13:18:59

字體：大中小

來源：轉載

供稿：網友

1 歌手列表

歌手列表頁類似于手機通訊錄，我們也將其作為一個基礎組件獨立出來，這部分的邏輯比較簡單，這里不做過多的講解

// base/listview/listview.vue<template>  <scroll class="listview" :data="data">    <ul>      <li v-for="(group, index) in data" :key="index" class="list-group">        <h2 class="list-group-title">{{group.title}}</h2>        <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>

運行結果

2 右側快速入口_點擊滾動

同樣是類比于手機通訊錄，懸浮于屏幕右側的 A-Z 可以幫助我們快速找到對應的歌手，為此，我們需要獲取 title 的集合數組

// 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>

運行結果

快速入口出現了之后，我們接下來就為其添加點擊事件，當我們點擊對應字母時，需要獲取其索引，這里我們直接獲取 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)    }  }}

點擊之后，我們需要頁面滾動到相應位置，這里需要擴展 scroll 組件的方法，這里擴展的方法都是來自 better-scroll 組件所封裝的方法，這里提一下 scrollToElement 方法的第二個參數是動畫時間，可根據自身需求進行設置

// scroll.vuemethods: { ... 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" 方便我們調用

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

運行結果

3 右側快速入口_滑動滾動

當我們的手指在右側快速入口上滑動時，歌手列表也會同步進行滾動，當我們滾動右側快速入口時，我們需要阻止歌手列表滾動，以及瀏覽器原生滾動，所以要使用 @touchmove.stop.prevent 阻止冒泡，并且在 onShortcutTouchStart 事件中記錄觸碰點的初始位置，以及 onShortcutTouchMove 事件中觸碰點的位置，通過兩個位置的像素差，來滾動歌手列表

// 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>

運行結果

4 右側快速入口_高亮設置

當歌手列表滾動時，我們想要在右側快速入口中，高亮當前顯示的 title ，這就需要我們監聽 scroll 組件的滾動事件，來獲取當前滾動的位置

// 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>

我們當初給參數 probeType 設的默認值為 1，即會非實時（屏幕滑動超過一定時間后）派發 scroll 事件，我們在屏幕滑動的過程中，需要實時派發 scroll 事件，所以在 listview 中將 probeType 的值設為 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
                // 當滾動到頂部，newY>0
                if (newY > 0) {
                    this.currentIndex = 0
                    return
                }
                // 在中間部分滾動
                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
                    }
                }
                // 當滾動到底部，且-newY大于最后一個元素的上限
                this.currentIndex = listHeight.length - 2
            }
        },
        components: {
            Scroll
        }
    }
</script>

運行結果

5 滾動固定標題

當我們滾動歌手列表頁時，希望該歌手的 title 一直顯示在頂部，并且滾動到下一個 title 時，新的 title 將舊的 title 頂替掉，這里就需要我們計算一個 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>