可橫向滑動的vue tab組件


示例


前端使用技術:框架->vue
組件>ly-tab一個用於移動端的可觸摸滑動具有回彈效果的可復用Vue組件
ly-tab 介紹地址
ly-tab 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)
            },


具體還想改什么根據自己的業務改


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM