歌手列表页类似于手机通讯录，我们也将其作为一个基础组件独立出来，这部分的逻辑比较简单，这里不做过多的讲解
// base/listview/listview.vue <template> <scroll :data="data"> <ul> <li v-for="(group, index) in data" :key="index"> <h2>{{group.title}}</h2> <uL> <li v-for="(item, index) in group.items" :key="index"> <img v-lazy="item.avatar"> <span>{{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"> @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> <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> <ul> <li v-for="(item, index) in shortcutList" :key="index">{{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)">{{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) } } }
运行结果
3 右侧快速入口_滑动滚动
当我们的手指在右侧快速入口上滑动时，歌手列表也会同步进行滚动，当我们滚动右侧快速入口时，我们需要阻止歌手列表滚动，以及浏览器原生滚动，所以要使用 @touchmove.stop.prevent 阻止冒泡，并且在 onShortcutTouchStart 事件中记录触碰点的初始位置，以及 onShortcutTouchMove 事件中触碰点的位置，通过两个位置的像素差，来滚动歌手列表