vue2.x--- cube-ui重构饿了么

一，安装，cube-ui

安装cube-ui     vue add cube-ui (针对vue-cli3),安装会有一些配置提示， 以后会直接使用cube组件了，按需引入，
Use post-compile? 后编译 y
部分引用 Import type
自定义主题 Custom theme y
Use rem layout rem 布局 n
Use vw layout rem 布局的 n

安装重构后，vue项目中会自动theme.styl的样式，cube-ui.js的组件， 在main.js中引入即可

二，引入tab-bar组件，以及cube-slide轮播图组件

 

<template>
  <div class="tab">
    <!-- 切换栏 -->
    <cube-tab-bar
      :showSlider="true"
      v-model="selectedLabel"
      :data="tabs"
      ref="tabBar"
      class="border-bottom-1px"
    >
    </cube-tab-bar>
    <div class="slide-wrapper">
      <!-- 轮播 -->
      <cube-slide
        :loop="false"
        :auto-play="false"
        :initial-index="index"
        ref="slide"
      >
      <!-- 轮播结构 -->
        <cube-slide-item>
          <Goods></Goods>
        </cube-slide-item>
        <cube-slide-item>
          <Ratings></Ratings>
        </cube-slide-item>
        <cube-slide-item>
          <Sellers></Sellers>
        </cube-slide-item>
      </cube-slide>
    </div>
  </div>
</template>

<script>
import Goods from "@/views/igoods/igoods";
import Ratings from "@/views/iratings/iratings";
import Sellers from "@/views/isellers/isellers";
export default {
  data() {
    return {
      index: 0,
      tabs: [
        {
          label: "商品"
        },
        {
          label: "评价"
        },
        {
          label: "商家"
        }
      ]
    };
  },

  computed: {
    selectedLabel: {
      get() {
        return this.tabs[this.index].label;
      },
      set(newVal) {
        this.index = this.tabs.findIndex(value => {
          return value.label === newVal;
        });
      }
    }
  },

  components: {
    Goods,
    Ratings,
    Sellers
  }
};
</script>

<style scoped lang="stylus">
@import "../../assets/stylus/variable"
  .tab
    >>> .cube-tab
      padding: 10px 0
    display :flex
    flex-direction :column
    height :100px
    .slide-wrapper
      flex:1
      overflow: hidden
</style>

cube-tab-bar组件里头默认有三个cube-tab组件，根据tabs数组来定义的，用深度选择器的样式来作用

#Scoped CSS
当 <style> 标签有 scoped 属性时，它的 CSS 只作用于当前组件中的元素。这类似于 Shadow DOM 中的样式封装。
vue-loader官网介绍；https://vue-loader.vuejs.org/zh/guide/scoped-css.html#%E6%B7%B7%E7%94%A8%E6%9C%AC%E5%9C%B0%E5%92%8C%E5%85%A8%E5%B1%80%E6%A0%B7%E5%BC%8F

#子组件的根元素
使用 scoped 后，父组件的样式将不会渗透到子组件中。不过一个子组件的根节点会同时受其父组件的 scoped CSS 和子组件的 scoped CSS 的影响。
这样设计是为了让父组件可以从布局的角度出发，调整其子组件根元素的样式。

#深度作用选择器
如果你希望 scoped 样式中的一个选择器能够作用得“更深”，例如影响子组件，你可以使用 >>> 操作符：

此时左右滑动轮播图，上面的切换栏不会自动跟随切换，此时我们需要实现一个上下联动，需要添加change事件

      <!-- 轮播 -->
      <cube-slide
        :loop="false"
        :auto-play="false"
        :initial-index="index"
        ref="slide"
        @change="onChange"
      >

 methods:{
    // Slide 页面切换时触发,参数为当前索引值
    onChange(currentIndex){
      this.index = currentIndex
    }
  },

此时上下联动效果已完成，但是还不够完美，我们还要实现左右滑动有一个渐变效果，轮播图添加scroll事件

逻辑分析，知道滑动的距离占总轮播图的宽度的距离的比值，乘以切换栏的宽度，利用切换栏的cube-tab-bar的setSliderTransform方法即可

     <!-- 轮播 -->
      <cube-slide
        :loop="false"
        :auto-play="false"
        :initial-index="index"
        ref="slide"
        @change="onChange"
        @scroll= "onScroll"
        :options="slideOptions"
      >

 // 滚动中实时派发
    onScroll(pos){
      // console.log(ops.x)
      // 通过refs获取切换栏tab-bar组件的宽度,需要.$el
      const tabBarWidth = this.$refs.tabBar.$el.clientWidth
      // 获取轮播图silde组件的宽度,是全部滚动的宽度
      const slideWidth = this.$refs.slide.slide.scrollWidth
      // 滑动的宽度 / 总滚动轮播的宽度 * 切换栏的宽度
      const transform = -pos.x / slideWidth * tabBarWidth
      this.$refs.tabBar.setSliderTransform(transform)
      
    }

切换栏还需要配置选项，以及关闭过渡效果（默认开启）

 slideOptions:{
        listenScroll:true,
        // 在滑动不止时
        probeType:3,
        directionLockThreshold:0
      }

<!-- 切换栏 -->
    <cube-tab-bar
      :showSlider="true"
      v-model="selectedLabel"
      :data="tabs"
      ref="tabBar"
      class="border-bottom-1px"
      :useTransition="false"
    >
    </cube-tab-bar>

二，优化，组件抽象和封装，动态组件设置，组件名称和数据在父组件app中定义，传入子组件，动态设置组件，利用component组件

import { mapState } from "vuex";
import tab from "@/components/tab/tab";
import Goods from "@/views/igoods/igoods";
import Ratings from "@/views/iratings/iratings";
import Sellers from "@/views/isellers/isellers";

 computed: {
    ...mapState(["sellers"]),
    tabs(){
      return  [
        {
          label:'商品',
          component:Goods,
          data:{
            sellers:this.sellers
          }

        },
        {
          label:'评价',
          component:Ratings,
          data:{
            sellers:this.sellers
          }

        },
        {
          label:'商家',
          component:Sellers,
          data:{
            sellers:this.sellers
          }

        },
      ]
    }
  },

<div class="tab-wrapper">
      <tab :tabs ="tabs"></tab>
    </div>

优化后，动态设置组件，vue.js官网动态组件

我们在一个多标签的界面中使用 is attribute 来切换不同的组件：

<component v-bind:is="currentTabComponent"></component>

<template>
  <div class="tab">
    <!-- 切换栏 -->
    <cube-tab-bar
      :showSlider="true"
      v-model="selectedLabel"
      :data="tabs"
      ref="tabBar"
      class="border-bottom-1px"
      :useTransition="false"
    >
    </cube-tab-bar>
    <div class="slide-wrapper">
      <!-- 轮播 -->
      <cube-slide
        :loop="false"
        :auto-play="false"
        :initial-index="index"
        ref="slide"
        @change="onChange"
        @scroll="onScroll"
        :options="slideOptions"
      >
        <!-- 轮播结构 -->
        <cube-slide-item v-for="(tab, index) in tabs" :key="index">
          <component :is="tab.component" :data="tab.data"></component>
        </cube-slide-item>
        <!-- <cube-slide-item>
          <Goods></Goods>
        </cube-slide-item> -->
        <!-- <cube-slide-item>
          <Ratings></Ratings>
        </cube-slide-item>
        <cube-slide-item>
          <Sellers></Sellers>
        </cube-slide-item> -->
      </cube-slide>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      index: 0,
      // tabs: [
      //   {
      //     label: "商品"
      //   },
      //   {
      //     label: "评价"
      //   },
      //   {
      //     label: "商家"
      //   }
      // ],
      slideOptions: {
        listenScroll: true,
        // 在滑动不止时
        probeType: 3,
        directionLockThreshold: 0
      }
    };
  },

  props: ["tabs"],

  methods: {
    // Slide 页面切换时触发,参数为当前索引值
    onChange(currentIndex) {
      this.index = currentIndex;
    },
    // 滚动中实时派发
    onScroll(pos) {
      // console.log(ops.x)
      // 通过refs获取切换栏tab-bar的宽度,需要.$el
      const tabBarWidth = this.$refs.tabBar.$el.clientWidth;
      // 获取轮播图silde组件的宽度,是全部滚动的宽度
      const slideWidth = this.$refs.slide.slide.scrollWidth;
      // 滑动的宽度 / 总滚动轮播的宽度 * 切换栏的宽度
      const transform = (-pos.x / slideWidth) * tabBarWidth;
      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;
        });
      }
    }
  }

  // components: {
  //   Goods,
  //   Ratings,
  //   Sellers
  // }
};
</script>

<style scoped lang="stylus">
@import "../../assets/stylus/variable"
  .tab
    >>> .cube-tab
      padding: 10px 0
    display :flex
    flex-direction :column
    height :100px
    .slide-wrapper
      flex:1
      overflow: hidden
</style>

三，在goods组价中，获取goods数据

1.我们不在mouted中dispatch下从vuex中获取数据，而是在tabs父组件中的change事件（切换栏触发）时调用子组件goods的请求数据的函数

  <!-- 轮播结构 -->
        <cube-slide-item v-for="(tab, index) in tabs" :key="index">
          <component :is="tab.component" :data="tab.data" ref="component"></component>
        </cube-slide-item>

在父组件中调用子组件的方法

 methods: {
    // Slide 页面切换时触发,参数为当前索引值
    onChange(currentIndex) {
      this.index = currentIndex;
      // 切换tab栏，发送请求，获取goods数据
      const component = this.$refs.component[currentIndex]
      component.fetch && component.fetch()
    },

子组件goods定义获取数据的函数

 methods: {
    fetch() {
      this.$store.dispatch("reqgoods");
    }
  },

 computed: {
    ...mapState(["goods"])
  }

第一次渲染页面，也要调用该函数

  mounted(){
    this.onChange(this.index)
  },