基于vue的tab-list類目切換商品列表組件的示例代碼

更新時(shí)間：2020年02月14日 08:23:12 作者：小紅衣

這篇文章主要介紹了基于vue的tab-list類目切換商品列表組件的示例代碼，代碼簡(jiǎn)單易懂，非常不錯(cuò)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下

在大多數(shù)電商場(chǎng)景中，頁(yè)面都會(huì)有類目切換加上商品列表的部分，頁(yè)面大概會(huì)長(zhǎng)這樣

每次寫類似場(chǎng)景的時(shí)候，都需要去為類目商品列表寫很多邏輯，為了提高開發(fā)效率我決定將這一部分抽離成組件。

實(shí)現(xiàn)

1.樣式

所有tab欄的樣式和商品列表的樣式都提供插槽，供業(yè)務(wù)自己定制

2.變量

isTabFixed: false,//是否吸頂
tab: 1,//當(dāng)前tab
page: 1,//當(dāng)前頁(yè)數(shù)
listStatus: {
 finished: false,//是否已是最后一頁(yè)
 loading: false,//是否加載中
},
items: [],//商品數(shù)組
tabMap: [],//tab列表數(shù)組
cache:{},//緩存
listName: '',//商品列表名稱
tabName: '',//tab列表名稱
apiName: '',//api方法名稱
queryName: '',//api請(qǐng)求參數(shù)名稱

3.緩存設(shè)計(jì)

為了減少消耗，已經(jīng)請(qǐng)求過(guò)的商品列表我都將他們緩存下來(lái)

_addCache(proList) {
 cache[this.tab] = {
 finished: this.listStatus.finished,
 page: this.page,
 list: proList,
 };
},

4.請(qǐng)求數(shù)據(jù)

_getList(type) {
 let data = {};
 data[this.queryName] = this.tab;
 data.page = this.page;
 this.$http[this.apiName](data)
 .then((res) => {
 this.listStatus.finished = !res.has_more;//更新是否是最后一頁(yè)的狀態(tài)
 this._handleData(res.items);//處理得到的商品列表
 })
 .catch((err) => {
 note(err.message || '出錯(cuò)啦');
 });
},
_handleData(proList) {
 if (this.page === 1) {//表示是tab切換時(shí)請(qǐng)求的數(shù)據(jù)，所以直接將items的指向切換
 this.items = proList;
 } else {//因?yàn)槭欠?yè)，所以需要把數(shù)據(jù)拼接
 this.items = this.items.concat(proList);
 }
 this.$store.setData(this.listName, this.items);//把數(shù)據(jù)更新給父組件
 this._addCache(this.items);//把數(shù)據(jù)加入緩存
},

5.操作

邏輯部分主要分兩塊：一是列表翻頁(yè)，二是tab相關(guān)

列表翻頁(yè)

這部分的邏輯比較簡(jiǎn)單，主要分兩點(diǎn)

將page加一
請(qǐng)求數(shù)據(jù)

_loadmore() {
 this.page = this.page + 1;
 this._getList();
},

其實(shí)對(duì)于手機(jī)列表的上拉翻頁(yè)操作，還有很多的點(diǎn)要去注意，比如如何去避免連續(xù)請(qǐng)求等，由于我將這些交給了另一個(gè)專注列表渲染的組件，這里就不需要再去考慮這些操作。

tab相關(guān)

tab切換

tab切換的時(shí)候主要是兩點(diǎn)

切換tab的指向
切換items的指向

已經(jīng)加載過(guò)的列表從緩存中取
沒(méi)有加載過(guò)的請(qǐng)求數(shù)據(jù) 然后還有兩個(gè)體驗(yàn)上的點(diǎn)

視圖應(yīng)該回到頂部
切換的時(shí)候應(yīng)該獲取切換列表的第一頁(yè)數(shù)據(jù)

changeTab(id) {
 this.tab = id;
 this.$store.setData(this.tabName, this.tab);//將tab的指向同步給父組件
 this._scrollToTab();//視圖回到頂部
 if (cache[this.tab]) {
 const target = cache[this.tab];
 this.listStatus.finished = target.finished;
 this.page = target.page;
 this.items = target.list;
 this.$store.setData(this.listName, this.items);//將商品列表同步給父組件
 } else {
 this.page = 1;
 this._getList();
 }
},
//視圖回到頂部
_scrollToTab() {
 let scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
 let productsTop = this.$refs.products.$el.offsetTop;//商品列表距離頂部的距離
 let topHeight = this.$refs.tabNav.offsetHeight;//tab欄的高度
 if (scrollTop > productsTop) {
 window.scrollTo(0, productsTop - topHeight);
 }
},

吸頂

在吸頂?shù)臅r(shí)候，需要對(duì)tab欄的樣式做一些小小的變動(dòng)，所以需要一個(gè)變量來(lái)知道是否吸頂了

handleNavFixed() {
 this.stickyTop = this.$store.getData('stickyTop') || 0;//吸頂?shù)母叨?
 window.onscroll = (e) => {
 let top = document.documentElement.scrollTop || document.body.scrollTop;
 let tabHeight = this.$refs.tabNav.offsetTop - top - 1;
 if (tabHeight <= this.stickyTop && !this.isTabFixed) {//結(jié)合判斷為了避免重復(fù)計(jì)算
 this.isTabFixed = true;
 }
 if (tabHeight >= this.stickyTop && this.isTabFixed) {
 this.isTabFixed = false;
 }
 };
},

6.組件相關(guān)

作為一個(gè)組件，不同點(diǎn)在于需要做到的是可用性和通用性。對(duì)于組件如何更好的得到父組件的值并把更新的值傳回父組件方面，是我在開發(fā)過(guò)程中的一個(gè)卡點(diǎn)，最后我用了一套基于vue的組件通行機(jī)制。這種通行機(jī)制的實(shí)現(xiàn)網(wǎng)上很多，這里就不詳細(xì)說(shuō)了。通行機(jī)制主要有兩個(gè)功能

各組件間可以互相調(diào)用方法
各個(gè)組件都可以得到和更新父組件的數(shù)據(jù)

由于將tab列表都作為插槽傳入，所以初始數(shù)據(jù)并不需要關(guān)心，需要關(guān)心的只是更新數(shù)據(jù)。

對(duì)于不同的頁(yè)面，tab列表的名稱，tab定位的名稱，商品列表的名稱，接口的名稱，請(qǐng)求接口的參數(shù)都可以會(huì)不一樣，所以我在這里將這些項(xiàng)作為參數(shù)，在初始化這個(gè)組件的時(shí)候需要傳入

//組件部分
init(data = {}) {
 this.listStatus.finished = !data.hasMore;
 this.tabName = data.tabName;
 this.listName = data.listName;
 this.apiName = data.apiName;
 this.queryName = data.queryName;
 this.handleNavFixed();//判斷是否吸頂
},
//調(diào)用組件
this.$bus.emit('tab-list.init', {
 tabName: 'tab',
 listName: 'items',
 apiName: 'homeList',
 queryName: 'tab_id',
 hasMore: this.hasMore,
});

總結(jié)

以上所述是小編給大家介紹的基于vue的tab-list類目切換商品列表組件的示例代碼，希望對(duì)大家有所幫助！

您可能感興趣的文章: