vue實現(xiàn)列表固定列滾動
更新時間：2022年07月14日 10:30:22 作者：iatkotworld
這篇文章主要為大家詳細介紹了vue實現(xiàn)列表固定列滾動，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
vue+scss移動端列表固定列滾動，供大家參考，具體內(nèi)容如下
功能介紹：
在移動端開發(fā)中，會用到列表作為信息展示方式，一般希望上下滾動時，可以固定表頭，左右滾動時，可以固定最左列。
大致需求：
1、列表可以使用數(shù)組循環(huán)遍歷；
2、上下滾動時，可以固定表頭在最頂端顯示；
3、左右滾動時，可以固定左邊一列或多列可以固定顯示；
4、列表的列寬允許在數(shù)組中設(shè)置；
整體思路：
1、頁面使用四個bom元素分別存儲四種元素：
1）固定在左上角，完全不參與滾動表頭元素；
2）固定在頂部，只允許左右滾動表頭元素；
3）固定在左側(cè)，只允許上下滾動列元素；
4）右下角，左右上下均可隨意滾動列元素；
2、表頭數(shù)組與列表數(shù)據(jù)數(shù)組之間互相聯(lián)系，表頭屬性可以控制列表列排序、列表寬度、是否為固定列等；
3、四個dom之間增加聯(lián)動，使用@scroll、scrollLeft、scrollTop；
具體實現(xiàn)：
一、display:flex布局，分為四組容器布局：
<!-- 寬度增加動態(tài)設(shè)置 -->
<div class="box">
? <div class="table-box">
? ? <div class="fixedHeadBox"?
? ? ? :style="{width: fixedWid}"></div>
? ? <div class="nomalHeadBox"
? ? ? style="{width: 'calc(100% - '+fixedWid+')'}"
? ? ></div>
? ? <div class="fixedListBox"?
? ? ? :style="{width: fixedWid}"></div>
? ? ? <div class="nomalListBox"
? ? ? ? :style="{width: 'calc(100% - '+fixedWid+')'}"
? ? ? ></div>
? ? </div>
? </div>
</div>export default {
? data() {
? ? return {
? ? ? fixedWid: ''
? ? };
? }
}.box {
? width: 100vw; height: 100vh;
? box-sizing: border-box;
? padding: 5vh 5vw;
? background: #000;
}
$headHei: 40px;
.table-box {
? width: 100%; height: 100%;
? display: flex;
? flex-wrap: wrap;
? overflow: hidden;
? ? .fixedHeadBox {
? ? ? background: pink;
? ? ? height: $headHei;
? ? }
? ? .nomalHeadBox {
? ? ? background: yellow;
? ? ? height: $headHei;
? ? ? overflow: hidden;
? ? }
? ? .fixedListBox{
? ? ? height: calc(100% - #{$headHei});
? ? ? background: lightblue;
? ? ? overflow: hidden;
? ? }
? ? .nomalListBox {
? ? ? background: #fff;
? ? ? height: calc(100% - #{$headHei});
? ? ? overflow: auto;
? ? }
}二、列表頭部、內(nèi)部數(shù)據(jù)綁定：
應(yīng)用到v-for遍歷表頭、列表數(shù)據(jù)，并計算列表寬度：
<div class="fixedHeadBox" :style="{width: fixedWid}">
? <ul>
? ? <li v-for="(item, index) in fixedHead" :key="index"?
? ? ? :style="{width: item.width}">
? ? ? ? {{item.name}}
? ? </li>
? </ul>
</div>
<div class="nomalHeadBox"
? :style="{width: 'calc(100% - '+fixedWid+')'}">
? <div ref="nomalHeadBox">
? ? <ul :style="{width: nomalWid}">
? ? ? <li v-for="(item, index) in nomalHead"?
? ? ? ? :key="index" :style="{width: item.width}">
? ? ? ? {{item.name}}
? ? ? </li>
? ? </ul>
? </div>
</div>
<div class="fixedListBox" :style="{width: fixedWid}">
? <div ref="fixedListBox">
? ? <ul v-for="(item, index) in list" :key="index" >
? ? ? <li v-for="(it, index) in fixedHead" :key="index"?
? ? ? ? :style="{width: it.width}">
? ? ? ? {{item[it.prop]}}
? ? ? </li>
? ? </ul>
? </div>
</div>
<div class="nomalListBox" ref="nomalListBox"
? :style="{width: 'calc(100% - '+fixedWid+')'}">
? <ul :style="{width: nomalWid}"?
? ? v-for="(item, index) in list" :key="index">
? ? <li v-for="(it, index) in nomalHead" :key="index"?
? ? ? :style="{width: it.width}">
? ? ? {{item[it.prop]}}
? ? </li>
? </ul>
</div>data() {
? return {
? ? tableHead: [
? ? ? { name: '', prop: 'a', width: '100px', isfixed: true },
? ? ? { name: '', prop: 'b', width: '80px' },
? ? ? { name: '', prop: 'c', width: '80px' },
? ? ? { name: '', prop: 'd', width: '100px' },
? ? ? { name: '', prop: 'e', width: '100px' },
? ? ? { name: '', prop: 'f', width: '100px' },
? ? ? { name: '', prop: 'g', width: '120px' }
? ? ],
? ? list: [
? ? ? { a: '', b: '', c: '', d: '', e: '', f: '', g: '' }
? ? ],
? ? fixedHead: [],
? ? nomalHead: [],
? ? fixedWid: '',
? ? nomalWid: ''
? };
},
mounted() {
? this.initData();
},
methods: {
? initData() {
? ? this.fixedHead = this.tableHead.filter((item) => {
? ? ? return item.isfixed
? ? });
? ? this.nomalHead = this.tableHead.filter((item) => {
? ? ? return !item.isfixed
? ? });
? ? this.initSize();
? },
? initSize() {
? ? let fwid = 0; let nwid = 0;
? ? this.fixedHead.forEach((item) => {
? ? ? // 此處以px單位為例
? ? ? const len = item.width.length - 2;
? ? ? const width = item.width.substring(0, len) - 0;
? ? ? fwid += width;
? ? });
? ? this.nomalHead.forEach((item) => {
? ? ? const len = item.width.length - 2;
? ? ? const width = item.width.substring(0, len) - 0;
? ? ? nwid += width;
? ? });
? ? this.fixedWid = fwid + 'px';
? ? this.nomalWid = nwid + 'px';
? }
}三、列表滾動聯(lián)動：
除左上角元素外，其余三個元素均有聯(lián)動滾動效果，增加滾動監(jiān)聽事件@scroll。
<div class="nomalHeadBox"
? ? :style="{width: 'calc(100% - '+fixedWid+')'}">
? ? <div ref="nomalHeadBox" @scroll="scrollHList">
? ? ? ? ......
? ? </div>
</div>
<div class="fixedListBox" :style="{width: fixedWid}">
? ? <div ref="fixedListBox" @scroll="scrollFList">
? ? ? ? ......
? ? </div>
</div>
<div class="nomalListBox" ref="nomalListBox"
? ? @scroll="scrollList"
? ? :style="{width: 'calc(100% - '+fixedWid+')'}">
? ? ......
</div>methods: {
? scrollHList() {
? ? this.$refs.nomalListBox.scrollLeft =
? ? ? this.$refs.nomalHeadBox.scrollLeft;
? },
? scrollFList() {
? ? this.$refs.nomalListBox.scrollTop =
? ? ? this.$refs.fixedListBox.scrollTop;
? },
? scrollList() {
? ? this.$refs.fixedListBox.scrollTop =
? ? ? this.$refs.nomalListBox.scrollTop;
? ? this.$refs.nomalHeadBox.scrollLeft =
? ? ? this.$refs.nomalListBox.scrollLeft;
? }
}四、去除頭部、左側(cè)列表滾動標簽的滾動條：
.nomalHeadBox {
? ? >div {
? ? ? ? overflow: auto;
? ? ? ? height: calc(100% + 10px);
? ? }
}
.fixedListBox{
? ? >div {
? ? ? ? overflow: auto;
? ? ? ? height: 100%;
? ? ? ? width: calc(100% + 10px);
? ? }
}以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
本文主要介紹了vue單頁面改造多頁面應(yīng)用詳解，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-06-06
這篇文章主要介紹了詳解Vue 多級組件透傳新方法provide/inject，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-05-05
這篇文章主要介紹了基于Vue中的父子傳值問題解決，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07
Vuex管理dialog、toast等常見全局性組件狀態(tài)時唯一性的問題解決
工作中經(jīng)常會用到類似于?dialog、toast、popover?等一些狀態(tài)提示組件，這篇文章主要介紹了Vuex管理dialog、toast等常見全局性組件狀態(tài)時唯一性的問題,需要的朋友可以參考下2022-11-11
Vue Element前端應(yīng)用開發(fā)之表格列表展示
在我們一般開發(fā)的系統(tǒng)界面里面，列表頁面是一個非常重要的綜合展示界面，包括有條件查詢、列表展示和分頁處理，以及對每項列表內(nèi)容可能進行的轉(zhuǎn)義處理，本篇隨筆介紹基于Vue +Element基礎(chǔ)上實現(xiàn)表格列表頁面的查詢，列表展示和字段轉(zhuǎn)義處理。2021-05-05
vue中使用jquery滑動到頁面底部的實現(xiàn)方式
這篇文章主要介紹了vue中使用jquery滑動到頁面底部的實現(xiàn)方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-12-12
vue的.vue文件是怎么run起來的(vue-loader)
通過vue-loader，解析.vue文件，在webpack解析，拆解vue組件 ，本文通過實例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友參考下2018-12-12
在使用token進行登錄的過程中,如果token過期了,需要重新輸入用戶名和密碼登錄,這種體驗肯定是不好的,下面這篇文章主要給大家介紹了關(guān)于Vue?Token過期問題的2種解決方案,需要的朋友可以參考下2023-02-02
vue項目watch內(nèi)的函數(shù)重復(fù)觸發(fā)問題的解決
這篇文章主要介紹了vue項目watch內(nèi)的函數(shù)重復(fù)觸發(fā)問題的兩種解決方案，幫助大家更好的理解和學(xué)習(xí)使用vue，感興趣的朋友可以了解下2021-04-04
解決vue-cli項目打包出現(xiàn)空白頁和路徑錯誤的問題
今天小編就為大家分享一篇解決vue-cli項目打包出現(xiàn)空白頁和路徑錯誤的問題。具有很好的參考價值。希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09