最近寫完一個項目衫生,里面有一個滾動列表裳瘪,他的描述文字很長,
所以當(dāng)時使用了一下el-tooltip障簿,
'vue-seamless-scroll'使用的無縫銜接滾動盹愚,
'vue-seamless-scroll'源碼是把整個數(shù)據(jù)列表的element進(jìn)行了一個copy,
所以el-tooltip理論是可以實現(xiàn)地但是那個copy有一點(diǎn)問題站故,所以我棄用了原作者的copy直接添加了一個插槽皆怕,
這也導(dǎo)致了需要修改依賴包可能會比較復(fù)雜,因為如果是合作開發(fā)那么你需要將你小伙伴的依賴插件都替換一下
以下的操作你需要將'vue-seamless-scroll'組件下載下來然后修改 myClass.vue中的文件 在進(jìn)行打成dist包
并將dist包中的 vue-seamless-scroll.min.js 與你修改后的myClass.vue兩個文件覆蓋到你本地的項目中
node_modules/vue-seamless-scroll/ 這個路徑是你本地項目的node_modules文件目錄
<!-- 這是原作者的代碼 -->
<div
ref="slotList"
:style="float"
>
<slot></slot>
</div>
<div v-html="copyHtml" :style="float"></div>
</div>
<!-- 我把原作者的代碼改為了-->
<div
ref="slotList"
:style="float"
>
<slot></slot>
<div v-if="data.length > maxLength">
<slot></slot>
</div>
</div>
</div>
maxLength:列表最大展示條數(shù)
因為數(shù)據(jù)有可能會只有一兩條西篓,那么他不需要滾動同時也不需要復(fù)制 所以添加了一個條件
以下案例
<vueSeamlessScroll
:data="sales_return_data"
class="seamless-warp"
:class-option="classOption"
:maxLength="2"
>
<div
class="my_between six_scroll_bix_content_scroll"
v-for="(item, index) in sales_return_data"
>
</div>
</vueSeamlessScroll>
computed: {
classOption() {
return {
step: 0.5, // 數(shù)值越大速度滾動越快
limitMoveNum: 3 // 開始無縫滾動的數(shù)據(jù)量 this.dataList.length
}
}
},
補(bǔ)充說明:
(頁面上最多能顯示幾條 - 1 )= maxLength
(頁面最多能顯示幾條就是 ) = limitMoveNum