最近使用vue-seamless-scroll来自定义滚动列表,遇到了两个问题,总结记录一下。
1. 滚动卡顿问题
原因:step设置得太小
解决:从0.4调整到1之后卡顿没有那么明显了。
2. 给列表行绑定了点击事件,点击无反应:
原因:滚动的时候会自动复制后面的列表行,但只复制了dom,没有绑定事件。
解决:利用事件委托机制,父元素监听子元素的点击事件。
原理:
事件委托是利用事件冒泡机制。因为事件在冒泡过程中会上传到父节点,并且父节点可以通过事件对象获取到目标节点,因此可以把子节点的监听函数定义到父节点上,由父节点的监听函数统一处理多个子元素的事情。这种方式叫做事件代理。
使用事件代理我们我们可以不必要为每一个元素都绑定一个监听事件,这样减少了内存上的消耗,并且使用事件代理我们还可以实现事件的动态绑定,比如说新增了一个子节点,我们并不需要单独的为它添加一个监听事件,它所发生的事件会交给父元素中的监听函数来处理。
举例:
<div class="table_row-container" :style="containerHeight" @click="clickWrapper">
<vueSeamlessScroll :data="tableData" class="seamless-warp" :class-option="classOption">
<div
class="table_row"
v-for="(row, rowIndex) in tableData"
:key="row.index"
:data-case="JSON.stringify(row)">
{{row}}
</div>
</vueSeamlessScroll>
</div>
clickWrapper(e) {
let e1 = e.path.find(item => item.className === 'table_row');
let clickRow = e1.dataset.case; //clickRow即为点击的列表行
}