快速导航固定栏开发-2

标签：index const 导航 groupRef onShortcutTouchStart 固定 快速 scroll

功能是能够点击导航栏的字母快速对应到相应的标题栏，手指拖动时候也可以去绑定切换对应的导航栏字母

步骤：

1、给导航栏shortcut绑定@touchstart.stop.prevent="onShortcutTouchStart“还有touchmove和touchend，这里加上stop和prevent是为了阻止浏览器自带的默认行为。然后在use-shortcut.js中定义onShortcutTouchStart的钩子函数：

function onShortcutTouchStart(e) {   } return { 　　onShortcutTouchStart } 然后在index-list接收钩子函数 const {  onShortcutTouchStart } = useShortcut(props) 再通过setup()函数return到template中 2.获取index的索引 function onShortcutTouchStart(e) {     const anchorIndex = parseInt(e.target.dataset.index)   } 在li中加入属性 :data-index="index" 传出groupRef useShortcut(groupRef) 然后计算目标滚动元素： const targetEl = groupRef.value.children[anchorIndex] 然后要在scroll中返回出scroll，因为要调用到BScroll中方法 获取到scroll的值然后调用scrollToElement就可以实现 const scroll = scrollRef.value.scroll     scroll.scrollToElement(targetEl, 0)

标签：index,const,导航,groupRef,onShortcutTouchStart,固定,快速,scroll
From： https://www.cnblogs.com/Ly021/p/17700300.html