1.利用计算属性获取右侧快速入口的列表
computed: {
shortcutList () {
return this.data.map((group) => {
return group.title.substr(0, 1)
})
}
},
2.遍历数组
<ul>
<li v-for="item in shortcutList" class="item">
{{item}}
</li>
</ul>
最终的效果图如图
接下来写有关它的操作属性
3.添加点击事件 touch事件
4.点击右侧获取相对应的索引
获取对应index的值,这里将此方法进行封装
export function getData(el, name, val) {
const prefix = 'data-'
name = prefix + name
if (val) {
return el.setAttribute(name, val)
} else {
return el.getAttribute(name)
}
}
5.将此方法引入相应的组件
接下来需要做的就是点击不同的字母滚动到对应的歌曲
在scroll组件中封装此方法
6. 添加touchmove事件,记录最开始手指触碰的位置和最后的位置,
这里将touch存放到created里,之所以放到这里不放到data的原因是,它不需要监听数据的变化
开始y值
滑动结束y值
计算y轴位置上的偏移
记录当最初点击的是第几个索引,加上位移就可以算出当前点击的索引位置
记录滚动到第几个位置 ,这样右侧就可以实现滑动的效果了。