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

时间：2021-08-30 来源：互联网编辑：宝哥软件园浏览：次

一歌手列表

歌手列表页类似于手机通讯录，我们也将其作为一个基础组件独立出来，这部分的逻辑比较简单，这里不做过多的讲解

//base/listview/listview。vuetemplate Scroll class=' listview ' : data=' data ' uL Li v-for='(组，索引)在data ' : key=' index ' class=' list-group ' H2 class=' list-group-title ' { group。title } }/H2 uL Li v-for=' group。items ' : key=' index ' class=' list-group-item ' img class=' avatar ' v-lazylistview位置：相对宽度： 100%高度： 100%飞越：隐藏背景：美元彩色背景。列表-组填充-底部： 30px .列表-组-标题高度： 30px行-高度： 30px填充-左侧： 20px字体大小：美元字体大小-小颜色：美元颜色-文本-我背景：美元颜色-高亮-背景。列表-组-项目显示：挠性对齐-项目：中心填充： 20px 0 0 30px .头像宽度： 50px高度： 50px边框半径： 50%。名称边距-left : 20px color :美元color-text-l font-size :美元font-size-medium .列表-快捷方式位置：绝对z-索引： 30右： 0顶部： 50%转换：平移(-50%)宽度： 20px填充： 20px 0边框-半径： 10px文本-对齐：中心背景：美元颜色-背景-d字体-系列：项目编号： 3px行高： 1颜色：美元颜色-文字-l字号：美元字号-小号.当前颜色：美元颜色主题字体-重量：更大胆。列表-固定位置：绝对顶部： -1px左侧： 0宽度： 100%。固定标题高度： 30px线条-高度： 30px填充-左侧： 20px字体大小：美元字体大小-小颜色：美元颜色-文本-我背景：美元颜色-高光-背景。正在加载-容器位置：绝对宽度： 100% top : 50% transform : translateY(-50%)/style//singer。vuetemplate div class=' singer '列表-视图：数据=' singerList '/列表-视图/div/模板脚本类型=' text/ecmascript-6 '从“基本/列表视图/列表视图”导入列表视图导出默认值<.组件： {列表视图} }/脚本

运行结果

2右侧快速入口_点击滚动

同样是类比于手机通讯录，悬浮于屏幕右侧的笔划索引可以帮助我们快速找到对应的歌手，为此，我们需要获取标题的集合数组

//在short cutlist ' : key=' index ' class=' item ' { item } }/Li/ul/div脚本类型=' text/ecmascript-6 '导出默认值中，列表视图。vuediv类=' list-快捷键ul li v-for='(项目，索引).computed : { shortcutList(){返回此。数据。map((group)={ return group。标题。substr(0，1)})} } }/script

运行结果

快速入口出现了之后，我们接下来就为其添加点击事件，当我们点击对应字母时，需要获取其索引，这里我们直接获取迭代提供的指数即可

//listview.vueul li v-for='(项目，索引)在short cutlist ' : key=' index ' @ touchstart=' onShortcutTouchStart($ even，index)' class=' item ' { item } }/Li/ulex端口默认值{.方法： { onShortcutTouchStart(e，index) { console.log(index) } }点击之后，我们需要页面滚动到相应位置，这里需要扩展卷起组件的方法，这里扩展的方法都是来自更好的滚动组件所封装的方法，这里提一下scrollToElement方法的第二个参数是动画时间，可根据自身需求进行设置

//滚动。vuememethods 3360 {.滚动到(){ this。滚动这个。滚动到。应用(这个。滚动，参数)}，滚动到元素(){ this。滚动这个。卷轴。滚动到元素。应用(这个。滚动，参数)}}随后给卷起组件添加ref='listview '以及歌手列表添加' ref='列表组'方便我们调用

//listview.vueexport默认值{.方法： { onShortcutTouchStart(e，index) { this .参考文献。列表视图。scrollttetoelement(this .$refs.listGroup[index]，0)} } }

运行结果

3右侧快速入口_滑动滚动

当我们的手指在右侧快速入口上滑动时，歌手列表也会同步进行滚动，当我们滚动右侧快速入口时，我们需要阻止歌手列表滚动，以及浏览器原生滚动，所以要使用@touchmove.stop.prevent阻止冒泡，并且在onShortcutTouchStart事件中记录触碰点的初始位置，以及onShortcutTouchMove事件中触碰点的位置，通过两个位置的像素差，来滚动歌手列表

//listview。vuediv类=' list-快捷键@触摸移动。停下来。protect=' on shortcuttouchmove ' ul Li v-for='(项目，索引)在short cutlist ' : key=' index ' @ touch start=' onShortcutTouchStart($ event，index)' class=' item ' { item } }/Li/ul/div script type=' text/ecmascript-6 ' const ANCHOR _ HEIGHT=18导出默认值{ created() { this.touch={}，方法： { onShortcutTouchStart(e，index){ let First Touch=e . Touch[0]这个。触摸。y1=第一次触摸。佩吉这个。触摸。锚指数=这个指数._scrollTo(index) }，onShortcutTouchMove(e){ let first touch=e . touch[0]this。触摸。y2=第一次触摸。佩吉让德尔塔=(这个。触摸。y2-这个。触摸。y1)/ANCHOR _ HEIGHT | 0让ANCHOR索引=这个。触摸。锚定指数增量这._scrollTo(anchorIndex) }、_scrollTo(index) { this .参考文献。列表视图。scrollttetoelement(this .$refs.listGroup[index]，0) } }，components 3360 { Scroll } }/script(9503 . 163.com)

运行结果

四右侧快速入口_高亮设置

当歌手列表滚动时，我们想要在右侧快速入口中，高亮当前显示的标题，这就需要我们监听卷起组件的滚动事件，来获取当前滚动的位置

//滚动。vuescript type=' text/ecmascript-6 '导出默认值{ props: {.listenScroll: { type:布尔值，default: false } }，methods : { _ initScroll(){ }.if(this . listenscroll){ 0让我=这个。卷轴。on(' scroll '，(pos)={ me .$emit('scroll '，pos) }) } } } }/script我们当初给参数probeType设的默认值为1,即会非实时（屏幕滑动超过一定时间后)派发卷起事件，我们在屏幕滑动的过程中，需要实时派发卷起事件，所以在列表视图中将probeType的值设为3

//listview。vuetemplate scroll class=' listview ' : data=' data ' ref=' listview ' : probe-type=' probe type ' : listenScroll=' listenScroll ' @ scroll=' scroll ' ul./ul/div class='列表-快捷键@触摸移动。停下来。防止=' onShortcutTouchMove ' ul Li v-for='(项目，索引)在short cutlist ' : key=' index ' : class=' { ' current ' 3360 current index===index } ' @ touchstart=' onShortcutTouchStart($ event，index)' class=' item ' { item } }/Li/ul/div/scroll/template脚本类型=' text/ecmascript-6.这个。列表高度=[]这个。探测类型=3 }，data() { return { scrollY: -1，currentIndex: 0 } }，methods: {.滚动(位置){这。scrolly=pos。y }，_滚动到(索引){ this。scrolly=-这个。列出这个高度[指数].参考文献。列表视图。scrollttetoelement(this .$refs.listGroup[index]，0) }，_ calculatehead(){ this。列表高度=[]常量列表=这个.$refs.listGroup让高度=0这个。列表高度。推动(高度)为(让I=0；一、清单。长度；I){ let item=list[I]height=item。客户身高这个。列表高度。push(height)} }，watch: { data() { this .$nextTick(()={ this ._ calculatehead()})}，scrollY(NewY){ const list height=this。列表高度/当滚动到顶部，Newy0 if(Newy0){这个。CurrentDex=0 return }//在中间部分滚动用于(设I=0；我列出身高。长度-1；I){让高度1=列表高度[I]让高度2=列表高度[I 1]if(-NewY=高度1-NewY高度2){ this。CurrentDex=I return } }//当滚动到底部，且-纽约大于最后一个元素的上限这个。CurrentDex=列表高度。长度-2 } }，组件：滚动条} }/脚本

运行结果

5滚动固定标题

当我们滚动歌手列表页时，希望该歌手的标题一直显示在顶部，并且滚动到下一个标题时，新的标题将旧的标题顶替掉，这里就需要我们计算一个标题的高度

//listview。vuetemplate scroll class=' listview ' : data=' data ' ref=' listview ' : probe-type=' probe type ' : listenScroll=' listenScroll ' @ scroll=' scroll '.div class=' list-fixed ' ref=' fixed ' v-show=' fixed TItle ' div class=' fixed TItle } }/div/div/Scroll/模板脚本类型=' text/ecmascript-6 '从“基础/滚动/滚动”导入滚动常量TITLE _ HEIGHT=28常量ANCHOR _ HEIGHT=18导出默认值<.data() { return { scrollY: -1，currentIndex: 0，diff: -1 } }，computed: {.固定标题(){ if(this。scrolly 0){ return ' ' }返回此。数据[这个。CurrentDex]？这个。数据[这个。CurrentDex].title : '' } }，watch: {.scrollY(NewY){ 0.用于(设I=0；我列出身高。长度-1；I){ 0.if(-NEwY=高度1-NEwY高度2){ 0.this.diff=height2 newY return } }.}，diff(NewVal){ let fixed Top=(NewVal 0 NewVal TItle _ HEIGHT)？newVal-TItle _ HEIGHT : 0(如果这。FixedTop===FixedTop){ return }此。修复此问题.参考文献。固定的。风格。transform=` translate 3d(0，${fixedTop}px，0)` } } }/script