十一、封装组件

一、TabBar导航切换

效果图：

1、布局拆分

• 红色部分为最外层组件，蓝色部分为里面的item

• 在src/components目录下新建tabbar文件夹，并在里面创建两个文件，TabBar.vue对应红色部分，TabBarItem.vue对应蓝色部分

• TabBar.vue

<template>
  <div id="tabbar">
    <slot></slot>
  </div>
</template>

<script>
export default {
  name: 'TabBar'
}
</script>

<style lang="scss" scoped>
#tabbar {
  display: flex;
  background-color: #f6f6f6;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
}
</style>

• TabBarItem.vue

<template>
  <div
    class="tab-bar-item"
    @click="itemClick"
    :class="{active: isActive}"
    :style="activeStyle"
  >
    <slot name="item-icon"></slot>
    <slot name="item-text"></slot>
  </div>
</template>

<script>
import '@/assets/images/iconfont/iconfont.css'

export default {
  name: 'TabBarItem',
  props: {
    path: String,
    activeColor: {
      type: String,
      default: 'red'
    }
  },
  data () {
    return {
    }
  },
  computed: {
    // 判断路由中是否有当前路由（点击item后的背景颜色，自行修改，可移除）
    isActive () {
      return this.$route.path.indexOf(this.path) !== -1
    },
    // 点击item后字体和图标的颜色，使用者按需传入颜色
    activeStyle () {
      return this.isActive ? { color: this.activeColor } : {}
    }
  },
  methods: {
    itemClick () {
      this.$router.replace(this.path).catch(err => err)
    }
  }
}
</script>

<style lang="scss" scoped>
.tab-bar-item {
  flex: 1;
  text-align: center;
  height: 49px;
  &.active{
    background: #ccc;
  }
  i {
    font-style: normal;
    display: block;
    margin-top: 6px;
  }
  p {
    margin: 0;
    font-size: 14px;
  }
}
</style>

2、路由规划

• src/router/index.js路由文件

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

// 解决冗余导航（自行百度）
const originalPush = VueRouter.prototype.push
VueRouter.prototype.push = function push (location) {
  return originalPush.call(this, location).catch(err => err)
}

// 路由懒加载方式引入
const Home = () => import('@/views/home/Home.vue')
const Classify = () => import('@/views/classify/Classify.vue')
const Cart = () => import('@/views/cart/Cart.vue')
const Profile = () => import('@/views/profile/Profile.vue')

const routes = [
  {
    path: '/',
    redirect: '/home'
  },
  {
    path: '/home',
    name: 'Home',
    component: Home
  },
  {
    path: '/classify',
    name: 'Classify',
    component: Classify
  },
  {
    path: '/cart',
    name: 'Cart',
    component: Cart
  },
  {
    path: '/profile',
    name: 'Profile',
    component: Profile
  }
]

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

export default router

3、使用

• App.vue文件使用（模板内容自行拆分）

<template>
  <div id="app">
    <router-view></router-view>
    <tab-bar>
      <tab-bar-item path="/home" activeColor="green">
        <i slot="item-icon" class="iconfont icon-home"></i>
        <p slot="item-text">首页</p>
      </tab-bar-item>
      <tab-bar-item path="/classify" activeColor="blue">
        <i slot="item-icon" class="iconfont icon-fenlei"></i>
        <p slot="item-text">分类</p>
      </tab-bar-item>
      <tab-bar-item path="/cart">
        <i slot="item-icon" class="iconfont icon-gouwuche"></i>
        <p slot="item-text">购物车</p>
      </tab-bar-item>
      <tab-bar-item path="/profile">
        <i slot="item-icon" class="iconfont icon-iconfuzhi"></i>
        <p slot="item-text">我的</p>
      </tab-bar-item>
    </tab-bar>
  </div>
</template>

<script>
import TabBar from './components/tabbar/TabBar.vue'
import TabBarItem from './components/tabbar/TabBarItem'
import '@/assets/css/base.css'

export default {
  name: 'App',
  components: {
    TabBar,
    TabBarItem
  }
}
</script>

<style lang="scss" scoped>
</style>

• • activeColor即为使用者传入的颜色，不传默认为TabBarItem.vue中的红色
  • base.css内容为body{margin: 0;padding: 0;}
• 在src/views目录下创建路由对应页面文件

二、TabControl

效果图：

1、功能

• 组件内tab切换

• 有吸顶效果

2、代码

src/components/common/tabControl/TabControl.vue

common文件用来存放可在其它项目复用的组件

<template>
  <div class="tab-control">
    <div
      v-for="(item,index) in titles"
      :key="item"
      class="tab-control-item"
      :class="{active: index === currentIndex}"
      @click="itemClick(index)"
    >
      <span>{{item}}</span>
    </div>
  </div>
</template>

<script>
export default {
  name: 'TabControl',
  props: {
    titles: {
      type: Array,
      default () {
        return []
      }
    }
  },
  components: {
  },
  data () {
    return {
      currentIndex: 0
    }
  },
  methods: {
    itemClick (index) {
      this.currentIndex = index
      // 发送给父组件使用
      this.$emit('tabClick', index)
    }
  }
}
</script>

<style lang="scss" scoped>
.tab-control{
  display: flex;
  height: 40px;
  line-height: 40px;
  text-align: center;
  font-size: 14px;
}
.tab-control-item{
  flex: 1;
  span{
    padding: 5px;
  }
  &.active{
    color: #f89;
    span{
      border-bottom: 2px solid #f89;
    }
  }
}
</style>

3、使用

• 使用titles绑定传入的数据

  在tab-control标签内监听tabClick点击事件（图片内没写，@tabClick="事件函数名"）

• 引入并注册

import TabControl from '@/components/common/tabControl/TabControl'
export default{
    ...
    components: {
        TabControl
    },
    methods: {
        tabClick (index) {
          switch (index) {
            case 0:
              console.log('pop')
              break
            case 1:
              console.log('new')
              break
            case 2:
              console.log('sell')
              break
          }
        }
    }
}

• 定位样式（参考）

.tab-control{
  position: sticky;
  top: 44px;
  background: #fff;
}

三、Scroll滚动组件

使用better-scroll封装滚动组件

1、功能

• 实现一定区域的滚动

• 包裹其它组件一起滚动

• 根据传入的probeType决定是否实时监听滚动

2、代码

<template>
  <div class="wrapper" ref="wrapper">
    <div class="content">
      <slot></slot>
    </div>
  </div>
</template>

<script>
import BScroll from 'better-scroll'

export default {
  name: 'Scroll',
  props: {
    // 从性能考虑，采用父组件传入probeType，来判断是否实时滚动
    probeType: {
      type: Number,
      default: 0
    },
    pullUpLoad: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      scroll: null
    }
  },
  mounted () {
    // 1、创建BScroll对象
    this.scroll = new BScroll(this.$refs.wrapper, {
      scrollX: false,
      click: true,
      probeType: this.probeType
    })
    // 2、监听滚动位置，发送给父组件
    if (this.probeType === 2 || this.probeType === 3) {
      this.scroll.on('scroll', (position) => {
        this.$emit('scroll', position)
      })
    }
    // 3、上拉加载更多
    if (this.pullUpLoad) {
      this.scroll.on('pullingUp', () => {
        this.$emit('pullingUp')
      })
    }
  },
  methods: {
    // 此函数配合BackTop组件返回顶部点击事件使用
    backTop (x, y, time = 300) {
      this.scroll && this.scroll.scrollTo(x, y, time)
    },
    // 完成加载更多
    finishPullUp () {
      this.scroll.finishPullUp()
    }
    // 防止因图片加载导致scroll高度带来的bug，需要刷新页面，使用中央事件总线并挂载到原型，在父组件调用
    refresh () {
      this.scroll && this.scroll.refresh()
        }
  }
}
</script>

<style lang="scss" scoped>
</style>

3、使用

<template>
    <div id="home">
        <nav-bar class="home-nav"><div slot="center">购物街</div></nav-bar>
        <scroll
          class="scroll-con"
          ref="scroll"
          :probe-type="3"
          @scroll="contentScroll"
          :pull-up-load="true"
          @pullingUp="loadMore">
          <!-- BScroll对象中click为true，否则点击事件无效 -->
          <tab-control
            :titles="['流行', '新款', '精选']"
            class="tab-control"
            @tabClick="tabClick"
          />
          <!-- 需要滚动的内容 -->
        </scroll>
    </div>
</template>

<script>
    import NavBar from '@/components/common/navbar/NavBar'
    import TabControl from '@/components/common/tabControl/TabControl'
    import Scroll from '@/components/common/scroll/Scroll'
    
    export default {
        components: {
            NavBar,
            TabControl,
            Scroll
        },
        data () {
            return {
              banners: [],
              goods: {
                pop: { page: 0, list: [] },
                new: { page: 0, list: [] },
                sell: { page: 0, list: [] }
              },
              currentType: 'pop',
              isShowBackTop: false
            }
        },
        created() {
            // this.getHomeMultidata()
            // thsi.getHomeGoods('pop')
            // thsi.getHomeGoods('new')
            // thsi.getHomeGoods('sell')
        },
        mounted() {
              // const refresh = this.debounce(this.$refs.scroll.refresh, 100)
            // this.$bus.$on('itemImageLoad', () => {
            //   refresh()
            // })
        },
        methods: {
            /**
             * 事件监听相关方法
             */
            tabClick (index) {
              switch (index) {
                case 0:
                  console.log('pop')
                  break
                case 1:
                  console.log('new')
                  break
                case 2:
                  console.log('sell')
                  break
              }
            }
            // 此函数配合BackTop返回顶部组件使用
            contentScroll (position) {
              // 判断当前位置与给定的位置关系
              this.isShowBackTop = (-position.y) > 1000
            },
            loadMore () {
              console.log('上拉加载更多')
              // this.getHomeGoods(this.currentType)
            },
            // scroll防抖函数（可抽离到utils.js文件中）
            debounce (fun, delay) {
              let timer = null
              return function (...args) {
                if (timer) clearTimeout(timer)
                timer = setTimeout(() => {
                  fun.apply(this, args)
                }, delay)
              }
            }
            /**
             * 网络请求相关方法
             */
            // getHomeMultidata () {
            //   getHomeMultidata().then(res => {
            //     this.banners = res.data.banner.list
            //   })
            // },
            // getHomeGoods (type) {
            //   const page = this.goods[type].page + 1
            //   getHomeGoods(type, page).then(res => {
            //     this.goods[type].list.push(...res.data.list)
            //     this.goods[type].page += 1
            //     this.$refs.scroll.finishPullUp()
            //   })
            // }
        }
    }
</script>

存在的bug

• scroll滑动区域如果有图片，会产生滑动高度的bug，原因是scroll组件计算高度时没有计算图片高度，此时图片还未加载完成，导致前后高度不一致

• 采用scroll中的refresh()进行页面刷新来解决，采用中央事件总线，在main.js中定义中央事件总线并挂载

Vue.prototype.$bus = new Vue()

• 在图片的item组件中img标签里通过@load="imageLoad"进行监听图片是否加载完，通过$emit()发送出去

methods: {
  imageLoad () {
    this.$bus.$emit('itemImageLoad')
  }
}

• 在使用scroll的组件中（Home.vue）接收

mounted() {
  this.$bus.$on('itemImageLoad', () => {
      this.$refs.scroll.refresh()
  })
},

四、BackTop

1、功能

一键返回顶部按钮

2、代码

<template>
  <div>
    <!-- 自行选择返回顶部图标样式，使用图片或icon图标均可 -->
    <div class="back-top"></div>
  </div>
</template>

<script>
export default {
}
</script>

<style lang="scss" scoped>
.back-top{
  width: 30px;
  height: 30px;
  border-radius: 10px;
  background: skyblue;
  position: fixed;
  right: 20px;
  bottom: 60px;
}
</style>

3、使用（Home.vue）

<template>
<div id="home">
  <nav-bar class="home-nav"><div slot="center">购物街</div></nav-bar>
  <scroll class="scroll-con" ref="scroll" :probe-type="3" @scroll="contentScroll">
    <!-- BScroll对象中click为true，否则点击事件无效 -->
    <tab-control
                 :titles="['流行', '新款', '精选']"
                 class="tab-control"
                 @tabClick="tabClick"
                 />
    <!-- 需要滚动的内容 -->
  </scroll>
  <!-- 监听组件点击事件要加native修饰符，监听原生事件 -->
  <back-top @click.native="backTopClick" v-show="isShowBackTop"/>
  </div>
</template>

<script>
  import NavBar from '@/components/common/navbar/NavBar'
  import TabControl from '@/components/common/tabControl/TabControl'
  import Scroll from '@/components/common/scroll/Scroll'
  import BackTop from '@/components/common/backtop/BackTop'

  export default {
    components: {
      NavBar,
      TabControl,
      Scroll,
      BackTop
    },
    data () {
      return {
        banners: [],
        goods: {
          pop: { page: 0, list: [] },
          new: { page: 0, list: [] },
          sell: { page: 0, list: [] }
        },
        isShowBackTop: false
      }
    },
    methods: {
      tabClick (index) {
        switch (index) {
          case 0:
            console.log('pop')
            break
          case 1:
            console.log('new')
            break
          case 2:
            console.log('sell')
            break
        }
      },
      // 此函数配合BackTop返回顶部组件使用
      contentScroll (position) {
        // 判断当前位置与给定的位置关系
        this.isShowBackTop = (-position.y) > 1000
      }
      backTopClick () {
        this.$refs.scroll.backTop(0, 0, 300)
      },
      }
  }
</script>