横方向にスライド可能なVUEタブアセンブリ

例

フロントエンド技術：フレーム- > VUEの
携帯端末用部品> LY-タブをタッチスライドスプリングバック効果を持つかもしれない、再利用可能なアセンブリのVueの
アドレスLY-タブが説明
LY-タブNPMアドレスを

手順を使用します

図1に示すように、パッケージの導入、定義されたような一般的なコンポーネント

コード

import LyTab from '../packages/tab'
Vue.use(LyTab)

2、ページの呼び出しは、データ・ソースを定義し、イベントを書きます

コード

//调用
  <ly-tab
                    v-model="selectedId"
                    :items="policyListArr"
                    :options="options"
                    @change="handleChange" >
                </ly-tab>
//数据源
data(){
return{
    selectedId:1,
                options: {
                    activeColor: '#4e95f7'
                },
                backgroundstyle:'rgba(255, 255, 255, 0)',
                colorstyle:'rgba(255,255,255, 1)',
                policyListArr: [
                    {
                        label: '全部',
                        categoryId: -1,
                        lastId: 0,
                        list: [],
                    },
                ], // 列表数据
}
}
            
//事件
    handleChange (itemObj,i) {
                this.selectedId=i
                const item = this.policyListArr[i]
                item.list = []
                item.lastId = 0
                this.active = i
                this.isLoadedAll = false
                this.isLoadingNo = false
                this.isLoadingMore = false
                this.scroller.openPullUp()
                this.searchList(i)
            },

また、自分のビジネスに応じて変化するであろう具体的にどのような変化