vueベースのtab-listカテゴリは、商品リストコンポーネントのコード例を切り替えます。

4913 ワード
vue tab-list 切り替え コンポーネント
ほとんどのエレクトビジネスシーンでは、ページに類別の種類があります。リストの部分もあります。ページは会長のようになります。


同じような場面を書くたびに、カタログのリストに多くのロジックを書きます。開発効率を高めるために、この部分をコンポーネントに引き離すことにしました。
実現する
1.スタイル
すべてのタブバーのスタイルと商品リストのスタイルはスロットを提供しています。自分でカスタマイズします。
2.変数

isTabFixed: false,//    
tab: 1,//  tab
page: 1,//    
listStatus: {
 finished: false,//        
 loading: false,//     
},
items: [],//    
tabMap: [],//tab    
cache:{},//  
listName: '',//      
tabName: '',//tab    
apiName: '',//api    
queryName: '',//api
3.キャッシュデザイン
消費を減らすために、要請した商品リストを全部キャッシュします。

_addCache(proList) {
 cache[this.tab] = {
 finished: this.listStatus.finished,
 page: this.page,
 list: proList,
 };
},
4.要求データ

_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;//            
 this._handleData(res.items);//         
 })
 .catch((err) => {
 note(err.message || '   ');
 });
},
_handleData(proList) {
 if (this.page === 1) {//   tab        ，     items     
 this.items = proList;
 } else {//     ，         
 this.items = this.items.concat(proList);
 }
 this.$store.setData(this.listName, this.items);//         
 this._addCache(this.items);//       
},
5.操作
論理部分は主に二つのブロックに分けられます。一つはリストページをめくり、二つはtab関連です。
リストのページをめくる
この部分の論理は比較的簡単で、主に2点を分けます。
  • pageを
    • に追加します。
  • 要求データ
    • 
_loadmore() {
 this.page = this.page + 1;
 this._getList();
},
    実際には、携帯電話のリストのページをめくる操作については、連続要求を避けるためにはどうすればいいかなど、注意すべき点がたくさんあります。これらを別の熱心なリストにレンダリングされたコンポーネントに渡したので、ここではこれらの操作を考慮する必要はありません。
    tab関連
    タブの切り替え
    タブの切り替えは主に2時です。
  • タブの指向を切り替える
  • itemsの指向を切り替える

  • 既にロードされたリストはキャッシュから
    • を取り出す。
  • にロードされていない要求データと、2つの体験上のポイント
    • があります。
  • ビューはトップ
    • に戻るべきです。
  • 切り替え時は、切替リストの第1ページデータ
    • を取得するべきである。
    
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);
 }
},
    吸い上げ天井
    一番上を吸う時は、tabバーの形に小さな変動が必要ですので、一番上を吸うかどうかを知るために変数が必要です。
    
handleNavFixed() {
 this.stickyTop = this.$store.getData('stickyTop') || 0;//     
 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) {//            
 this.isTabFixed = true;
 }
 if (tabHeight >= this.stickyTop && this.isTabFixed) {
 this.isTabFixed = false;
 }
 };
},
    6.コンポーネント関連
    一つのコンポーネントとして、必要なのは利用可能性と汎用性です。どのようにしてコンポーネントの親のコンポーネントの値を取得し、親のコンポーネントに更新された値を送るかについては、開発の過程で私のカードポイントです。最後に私はVueベースのコンポーネントの通行機構を使いました。このような交通機関の実現はネット上で多いです。ここでは詳しく説明しません。通行機構は主に二つの機能があります。
  • 各コンポーネント間で方法を相互に呼び出すことができる
    • 。
  • の各コンポーネントは、親コンポーネントのデータ
    • を取得し、更新することができます。
    tabリストはスロットとして導入されているので、初期データには関心がなく、データの更新だけが必要です。
    異なるページについては、tabリストの名前、tabポジショニングの名前、商品リストの名前、インターフェースの名前、要求インターフェースのパラメータが異なりますので、ここでこれらの項目をパラメータとしています。このコンポーネントを初期化する時に入る必要があります。
    
//    
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();//      
},
//    
this.$bus.emit('tab-list.init', {
 tabName: 'tab',
 listName: 'items',
 apiName: 'homeList',
 queryName: 'tab_id',
 hasMore: this.hasMore,
});
    締め括りをつける
    以上、小编でご绍介したvueベースのtab-list类目の商品リストのコンポーネントを切り替えるためのコード例です。
    Oracleはテーブルコメントと列コメントを取得します。
    JavaScriptはTabタブの切り替えを実現します。