Vue2.5 学习笔记9.2 轮播图预览样式

新建一个预览图片的组件：

因为有可能在其他页面上会用到，所以做成一个独立的组件供调用

为了调用方便，省的些那么长路径 build/webpack.base.conf.js中设置好别名

  resolve: {
    extensions: ['.js', '.vue', '.json'],
    alias: {
      'vue$': 'vue/dist/vue.esm.js',
      '@': resolve('src'),
      'styles': resolve('src/assets/style'),
      'common': resolve('src/common'),
    }
  },

然后去Bannervue中导入该组件

<template>
  <div>
    <div class="banner">
      <img class="banner-img" src="http://img1.qunarzz.com/sight/p0/1901/7c/7cb1cca588241d6ba3.img.jpg_600x330_97696da7.jpg" />
      <div class="banner-info">
        <div class="banner-title">厦门科技馆</div>
        <div class="banner-number"><span class="iconfont banner-icon">&#xe6eb;</span>17</div>
      </div>
    </div>
// 这里这里
    <common-gallary>
    </common-gallary>
  </div>
</template>

<script>
import CommonGallary from 'common/gallary/Gallary'
export default {
  name: 'DetailBanner',
// 还有这里这里
  components: {
    CommonGallary
  }
}
</script>

组件导入完成了，剩下就是写组件的样式了。

去Gallary.vue中写相应的内容：

<template>
// @click 点击事件是用来切换图片预览的显示与否
  <div class="container" @click="handleGallaryClick">
    <div class="wrapper">
      <swiper :options="swiperOptions">
        <swiper-slide v-for="(item, index) in imgs" :key="index">
          <img class="gallary-img" :src="item" />
        </swiper-slide>
        <div class="swiper-pagination" slot="pagination"></div>
      </swiper>
    </div>
  </div>
</template>

<script>
export default {
  name: 'CommonGallary',
  props: {
    imgs: {
      type: Array,
      default () {
        return []
      }
    }
  },
  data () {
    return {
// 分页插件的参数配置
      swiperOptions: {
        //绑定元素
        pagination: '.swiper-pagination',
        // 分页标志的样式。 fraction 是这样的：'1/2' '2/2'
        // 具体可参考文档 https://3.swiper.com.cn/api/pagination/2016/0126/299.html
        paginationType: 'fraction',
        // 因为图片数据是后来加载的。有可能会导致图片滑动不正常。所以添加这两个参数即可解决这问题，当父元素发生变化的时候，自动更新
        observeParents: true,
        observer: true
      }
    }
  },
// 组件显示与否的点击事件
  methods: {
    handleGallaryClick () {
      this.$emit('close')
    }
  }
}
</script>

<style lang="stylus" scoped>
// 5.取消swiper-container的hidden属性。使分页插件能够显示在图片的下边。
  .container >>> .swiper-container
    overflow: inherit
//样式的大致流程：
// 1.先把背景写好。黑色 全屏， flex 纵向居中
// 2.要显示的图片div包裹保证图片正常等比例显示，并包含swiperpagination
// 3. 图片等比例显示
// 4. 图片分页插件颜色与位置
  .container
    display: flex
    flex-direction: column
    justify-content: center
    z-index: 99
    position: fixed
    left: 0
    right: 0
    top: 0
    bottom: 0
    background: #000
    .wrapper
      height: 0
      width:100%
      padding-bottom: 75%
      .gallary-img
        width: 100%
      .swiper-pagination
        color: #fff
        bottom: -1rem
</style>

最后完善下Banner.vue中与Gallary.vue的交互的一些代码

<template>
  <div>
    <div class="banner" @click="handleBannerClick">
      <img class="banner-img" src="http://img1.qunarzz.com/sight/p0/1901/7c/7cb1cca588241d6ba3.img.jpg_600x330_97696da7.jpg" />
      <div class="banner-info">
        <div class="banner-title">厦门科技馆</div>
        <div class="banner-number"><span class="iconfont banner-icon">&#xe6eb;</span>17</div>
      </div>
    </div>
    <common-gallary
// 数据传递与控制显示
      :imgs="imgs"
      v-show="showGallary"
      @close="handleGallaryClose"
    >
    </common-gallary>
  </div>
</template>

<script>
import CommonGallary from 'common/gallary/Gallary'
export default {
  name: 'DetailBanner',
  data () {
// 默认是不显示
    return {
      showGallary: false,
      imgs: ['http://img1.qunarzz.com/sight/p0/1901/7c/7cb1cca588241d6ba3.img.jpg_600x330_97696da7.jpg', 'http://img1.qunarzz.com/sight/p0/1901/86/865f4e269cfd35c6a3.img.jpg_r_800x800_e3299e87.jpg']
    }
  },
点击事件与事件监听
  methods: {
    handleBannerClick () {
      this.showGallary = true
    },
    handleGallaryClose () {
      this.showGallary = false
    }
  },
  components: {
    CommonGallary
  }
}
</script>

完结 撒花

明天继续学