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

古城微笑少年丶 2022-02-24 15:00 180阅读 0赞

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

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

![20190404143643884.png][]

为了调用方便，省的些那么长路径 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"></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"></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>

完结 撒花

明天继续学

[20190404143643884.png]: /images/20220224/c4a5f182a9cb4b46a4222b0e150fd0e6.png