因爲需要做一個無限滾動的table效果,然後百度了一下,看到網上挺多用 vue-seamless-scroll
的,然後自己就用了。後面一些問題給大家總結下。
使用很簡單,這裏就不闡述了,主要講下用這個的一些業務要求,遇到的問題。
無限滾動原理:無限滾動的原理就是把之前的遍歷的內容複製一份,滾動這兩部分內容,達到無縫滾動效果。
需求:首先需要一個這樣的需求,才能碰到這個問題(通過點擊列展示詳情數據)
遇到的問題一:
當第一個ul中的數據滾動完時,第二個ul 部分的click事件不起作用,無法實現一些點擊這行,彈窗詳情信息業務需要功能。
簡單分析
第二部分無法操作和js的運行機制有關,需要重新綁定事件,具體原理也是一知半解,但是大致感覺問題是由於重複渲染,相同的部分綁定的事件不能同時運行,需要換個思路。當時同學提到了 js事件委託,需要好好了解一下。
1 . 事件委託
2. JavaScript 運行機制詳解:再談Event Loop
解決問題
這是之前的寫法
(可以循環顯示,點擊第一個ul可以觸發clickProps
事件,但是點擊第二個複製的ul不能觸發clickProps
事件)部分截圖
下面是更改後的代碼
- 給外層div加點擊事件,通過event.target獲取到點擊的dom元素
<div class="seamless-warp" @click="clickProps($event)"></div>
- 給點擊的列的元素綁定 屬性,這裏我綁定了
id
和自定義屬性data-obj
對象,直接把改列的item添加進去,不用一個一個單獨綁定。
<span class="table-li" :data-obj="JSON.stringify(item)" :id="index+1">
{{index+1}}
</span>
- 通過點擊事件的
clickProps
的e.target
獲取數據
clickProps(e) {
console.log(e.target);
let index = e.target.id;
let item = JSON.parse(e.target.dataset.obj);
}
打印的 e.target
然後就可以解決了 vue-seamless-scroll 滾動,點擊複製的ul click不觸發的問題。