欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

Vue2.0 实现歌手列表滚动及右侧快速入口功能

程序员文章站 2022-06-21 08:09:57
1 歌手列表 歌手列表页类似于手机通讯录,我们也将其作为一个基础组件独立出来,这部分的逻辑比较简单,这里不做过多的讲解 // base/listview/lis...

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>

Vue2.0 实现歌手列表滚动及右侧快速入口功能 

运行结果

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>

Vue2.0 实现歌手列表滚动及右侧快速入口功能 

运行结果

快速入口出现了之后,我们接下来就为其添加点击事件,当我们点击对应字母时,需要获取其索引,这里我们直接获取 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.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" 方便我们调用

// listview.vue
export default {
  ...
  methods: {
    onshortcuttouchstart(e, index) {
      this.$refs.listview.scrolltoelement(this.$refs.listgroup[index], 0)
    }
  }
}

Vue2.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>

Vue2.0 实现歌手列表滚动及右侧快速入口功能 

运行结果

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>

Vue2.0 实现歌手列表滚动及右侧快速入口功能 

运行结果

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>

Vue2.0 实现歌手列表滚动及右侧快速入口功能 

运行结果

该章节的内容到这里就全部结束了,源码我已经发到了 github vue_music_06 上了,有需要的同学可自行下载

总结

以上所述是小编给大家介绍的vue2.0 实现歌手列表滚动及右侧快速入口功能,希望对大家有所帮助