[TOC] #### CubeUi Tab 滑屏切換組件 * [ ] 核心算法 滑動的距離 = 滑動的X坐標 / 滑動區域寬度 * tab導航欄寬度 1. 定義組件 ~~~ <template> <div class="tab"> <!-- tabbar 導航切換區 --> <cube-tab-bar v-model="selectedLabel" :data="tabs" :showSlider=true :useTransition=false class="border-bottom-1px" ref="tabbar" > </cube-tab-bar> <!-- swiper 滑動區 --> <div class="silde-wrapper"> <cube-slide :loop=false :showDots=false :autoPlay=false :initialIndex="index" @change="onChange" @scroll="onScroll" :options="scrollOptions" ref="slide" > <cube-slide-item v-for="(tab, index) in tabs" :key="index"> <!-- tab.component 組件 tab.data 數據 --> <component :is="tab.component" :data="tab.data"></component> </cube-slide-item> </cube-slide> </div> </div> </template> <script type="text/ecmascript-6"> export default { name: "tab", props: { tabs: { type: Array, default() { return {} } }, initIndex: { type: Number, default: 0 } }, data () { return { index: this.initIndex, // BScroll 配置 scrollOptions: { probeType: 3, //滾動動畫運行過程中實時派發 scroll 事件 listenScroll: true, // 監聽 BScroll 滾動 directionLockThreshold: 0 // 鎖定滾動 } } }, methods: { // slide 滑動結束會派發當前索引 onChange(current) { this.index = current }, // slide 滾動時派發 onScroll(pos) { // 橫向滾動距離 let posX = Math.abs(pos.x) // tabbar 寬度 const tabbarWidth = this.$refs.tabbar.$el.clientWidth // slide 寬度 const slideWidth = this.$refs.slide.slide.scrollerWidth // 計算滾動距離 = posX / slideWidth * tabbarWidth const transForm = posX / slideWidth * tabbarWidth // 改變 cube-tab-bar 組件的下劃線的 transformX this.$refs.tabbar.setSliderTransform(transForm) } }, computed: { // 計算索引 selectedLabel: { get() { return this.tabs[this.index].label }, set(newVal) { this.index = this.tabs.findIndex((value) => { return value.label === newVal }) } } } } </script> <style lang="stylus" rel="stylesheet/stylus" scoped> .tab display flex flex-direction column height 100% >>> .cube-tab color #666 font-size 30px padding 20px 0 .silde-wrapper flex 1 overflow hidden </style> ~~~ ***** 2. 外部調用 ~~~ <template> <div id="app"> <v-header /> <tab :tabs="tabs" :initIndex="currentIndex" /> </div> </template> <script> import vheader from '@/components/vheader' import tab from '@/components/tab/tab' import { goods } from '@/api' import good from '@/components/goods/goods' import rating from '@/components/ratings/rating' import seller from '@/components/seller/seller' export default { name: 'app', data() { return { currentIndex: 0 } }, computed: { tabs() { return [ { label: '商品', component: good }, { label: '評論', component: rating }, { label: '商家', component: seller } ] } }, components: { 'v-header': vheader, tab } } </script> <style lang="stylus"> #app width 100% height 100% overflow hidden </style> ~~~