欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

循序渐进BootstrapVue,开发公司门户网站(4)--- 使用b-carousel-slide组件实现图片轮播以及vue-awesome-swiper实现图片滑动展示

程序员文章站 2022-06-15 14:39:20
在BootstrapVue组件库里面,提供了很多对Bootstrap同等类似的组件封装,其中图片轮播可以采用b-carousel-slide组件实现,而有一些小的图片,如客户/合作伙伴Logo或者友情连接什么的,则可以使用一个滑动图片展示的vue-awesome-swiper组件。本篇随笔综合介绍使... ......

在bootstrapvue组件库里面,提供了很多对bootstrap同等类似的组件封装,其中图片轮播可以采用b-carousel-slide组件实现,而有一些小的图片,如客户/合作伙伴logo或者友情连接什么的,则可以使用一个滑动图片展示的vue-awesome-swiper组件。本篇随笔综合介绍使用b-carousel-slide组件实现图片轮播以及vue-awesome-swiper实现图片滑动展示。

1、使用b-carousel-slide组件实现图片轮播

轮播不会自动标准化幻灯片尺寸。 因此,您可能需要使用其他实用程序或自定义样式来适当调整内容的大小。 在每张幻灯片中使用图像时,请确保它们均具有相同的尺寸(或长宽比)。

轮播默认间隔为 5000 毫秒(5秒)。您可以通过将 interval 属性设置为所需的毫秒数来更改幻灯片之间的间隔。 支持的最小滑动间隔为1000毫秒(1秒)。

设置属性 controls 以启用前一个和后一个控件按钮。设置属性 indicators 以显示滑动指示器按钮。指示器和控件都可以同时设置或独立设置。

属性

  • caption: 用作幻灯片上主要标题的文本(放置在具有 carousel-caption 类的内部元素内)
  • text: 标题下的文本(放置在具有 carousel-caption 类的内部元素内)
  • img-src: 要放在幻灯片背景中的图像的url
  • caption-html: caption 属性的 alternate 属性,它支持html字符串
  • html: text 属性的 alternate 属性,它支持html字符串

命名插槽

  • default 将放置在具有 carousel-caption 类的内部元素内部的内容。 出现在 caption 和 text 属性的任何内容之后。
  • img 放置在幻灯片背景中的内容。 尽管有插槽的名称,但您几乎可以将任何内容放置在该插槽中,而不必使用 default(默认)的插槽 caption 和 text 属性。

下面是b-carousel-slide轮播组件的一个使用代码:

<div>
  <b-carousel
    id="carousel-fade"
    style="text-shadow: 0px 0px 2px #000"
    fade
    indicators
    img-width="1024"
    img-height="480"
  >
    <b-carousel-slide
      caption="first slide"
      img-src="https://picsum.photos/1024/480/?image=10"
    ></b-carousel-slide>
    <b-carousel-slide
      caption="second slide"
      img-src="https://picsum.photos/1024/480/?image=12"
    ></b-carousel-slide>
    <b-carousel-slide
      caption="third slide"
      img-src="https://picsum.photos/1024/480/?image=22"
    ></b-carousel-slide>
  </b-carousel>
</div>

或者用命名插槽的方式,演示代码如下所示

 <b-carousel v-model="slide" :interval="5000" controls fade indicators background="#ababab" style="text-shadow: 1px 1px 2px #333; background: #ccc" 
@sliding-start="onslidestart" @sliding-end="onslideend"> <b-carousel-slide> <template v-slot:img> <b-img fluid :src="size=='big' ? require('@/../static/site2/img/banner/banner01_big.jpg') : require('@/../static/site2/img/banner/banner01_small.jpg')" alt="banner" /> </template> </b-carousel-slide> </b-carousel> </template>

由于我们使用vue,一般来说,轮播的图片是动态增加的,而不是固定的连接,因此用变量代替,遍历展示即可,模板代码如下代码。

  <b-carousel v-model="slide" :interval="5000" controls fade indicators background="#ababab" 
style="text-shadow: 1px 1px 2px #333; background: #ccc" @sliding-start="onslidestart" @sliding-end="onslideend"> <b-carousel-slide v-for="(item, index) of carousel_list" :key="index"> <template v-slot:img> <div style="position: relative"> <b-img fluid :src="size=='big' ? item.bigimage : item.smallimage" alt="banner" /> <div class="mask" :class="{mask2: (index+1)%2==0}"> <div class="content" :class="{content2: (index+1)%2==0}"> <h3 class="title mb-3 wow fadeinleft" data-wow-delay="0.2s">{{ item.title }}</h3> <div class="desc wow mb-3 fadeinright" data-wow-delay="0.2s" v-html="item.desc" /> <div class="line wow fadeinup" data-wow-delay="0.6s" v-html="item.subdesc" /> </div> </div> </div> </template> </b-carousel-slide> </b-carousel>

其中wow fadeinleft 这些用了wow的动态效果,而 {mask2: (index+1)%2==0} 的判断,用于左右显示文本的不同。

其中vue部分的js代码如下所示,定义了变量和所需的数据列表。

循序渐进BootstrapVue,开发公司门户网站(4)--- 使用b-carousel-slide组件实现图片轮播以及vue-awesome-swiper实现图片滑动展示

 而轮播所需的carousel_list的集合数据,我们动态从接口获取即可。

循序渐进BootstrapVue,开发公司门户网站(4)--- 使用b-carousel-slide组件实现图片轮播以及vue-awesome-swiper实现图片滑动展示

而轮播列表的内容,我们可以模拟数据,或者从后端获取真实的数据,数据结构大概如下所示。

循序渐进BootstrapVue,开发公司门户网站(4)--- 使用b-carousel-slide组件实现图片轮播以及vue-awesome-swiper实现图片滑动展示

  这样我们运行的时候 ,效果如下所示。

循序渐进BootstrapVue,开发公司门户网站(4)--- 使用b-carousel-slide组件实现图片轮播以及vue-awesome-swiper实现图片滑动展示

 循序渐进BootstrapVue,开发公司门户网站(4)--- 使用b-carousel-slide组件实现图片轮播以及vue-awesome-swiper实现图片滑动展示

 不同的轮播,我们指定不同的背景图片,以及文字,就很好的达到展示产品信息的目的。 

 一般轮播图片,我们是放在布局layout页面里面的,因此需要在layout页面定义的时候,引入对应的自定义封装的轮播组件即可。

<template>
  <div>
    <my-header />
    <carousel class="d-none d-md-block d-lg-block d-xl-block" style="height: 0; padding-bottom: 31.2%" size="big" />
    <carousel class="d-block d-md-none d-lg-none d-xl-none" style="height: 0; padding-bottom: 120%" size="small" />
    <router-view :key="key" />
    <my-footer />

    <div v-show="show_backtop" class="backtop" @click="backtop"><i class="el-icon-arrow-up" /></div>
  </div>
</template>

<script>
import myheader from './components/header'
import myfooter from './components/footer'
import carousel from './components/carousel'

export default {
  components: {
    myheader,
    myfooter,
    carousel
  },

其中这里使用了两个轮播元素定义,是基于响应式框架布局考虑,d-none d-md-block d-lg-block d-xl-block 是在md/lg/xl的时候显示的,d-block d-md-none d-lg-none d-xl-none 则是在sm的情况下显示的,也就是md/lg/xl的时候不显示的意思。

如需详细了解,可以参考 display显示属性的说明。

 

2、使用vue-awesome-swiper实现图片滑动展示

前面开头的地方说了,有一些小的图片,如客户/合作伙伴logo或者友情连接什么的,我们可能希望以图片的方式展示一个图片墙即可,如果内容比较多,那么占用版面比较大,而采用 vue-awesome-swiper 则可以避免这个问题,它是在展示图片的基础上,定时动态移动图片浏览,可以在更小的空间上放置更多的图片。

vue-awesome-swiper 的使用有很多,不过不太建议用比较新的版本,有时候可能出现一些使用异常,比较难以处理,因此我采用比较稳定的低版本来展示图片。

循序渐进BootstrapVue,开发公司门户网站(4)--- 使用b-carousel-slide组件实现图片轮播以及vue-awesome-swiper实现图片滑动展示

我们来看看具体的展示效果,其中单击图片,可以打开合作伙伴的网站地址。

循序渐进BootstrapVue,开发公司门户网站(4)--- 使用b-carousel-slide组件实现图片轮播以及vue-awesome-swiper实现图片滑动展示

 这个面板在可视范围内,展示固定的几张图片,然后动态滑动,可以放置很多,又能拖动查看,效果还是非常不错的。

这个合作伙伴的数据结构如下所示。

循序渐进BootstrapVue,开发公司门户网站(4)--- 使用b-carousel-slide组件实现图片轮播以及vue-awesome-swiper实现图片滑动展示

 那么vue-awesome-swiper它的使用是如何的呢。

先通过npm进行安装组件指定版本

npm install vue-awesome-swiper@3 --save-dev

在vue的项目中的main.js中全局增加对控件的加载。

import vue from 'vue'

import 'swiper/dist/css/swiper.css'
import  vueawesomeswiper from  'vue-awesome-swiper/dist/ssr'
vue.use(vueawesomeswiper)

定义一个滑动图片的组件,用于接收相关数据显示即可。

<!--可以拖动的slide组件,需要安装vue-awesome-swiper组件-->
<template>
  <div class="wrap">
    <div class="mt-4 d-none d-lg-block d-xl-block">
      <div v-swiper:myswiper1="swiperoptions">
        <div class="swiper-wrapper">
          <div v-for="(item, index) of list" :key="index" class="swiper-slide">
            <div class="img-wrap mx-3 p-4">
              <b-img :src="item.icon" fluid :alt="item.title" @click="open(item.url)" />
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="mt-4 d-block d-lg-none d-xl-none">
      <div v-swiper:myswiper2="swiperoptions2">
        <div class="swiper-wrapper">
          <div v-for="(item, index) of list" :key="index" class="swiper-slide">
            <div class="img-wrap mx-3 p-4">
              <b-img :src="item.icon" fluid :alt="item.title" @click="open(item.url)" />
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

这里用了两个声明,也是基于布局不同的显示的,和前面轮播的处理类似。

而 v-swiper 这是加载vue-awesome-swiper后注入的装饰器v-swiper.

其中这个组件的配置信息如下定义。

循序渐进BootstrapVue,开发公司门户网站(4)--- 使用b-carousel-slide组件实现图片轮播以及vue-awesome-swiper实现图片滑动展示

除了这两种,有时候我们的产品可能需要展示更多的图片,就是图片画廊的意思,那么我们就可以综合展示图片了,如下效果所示。

循序渐进BootstrapVue,开发公司门户网站(4)--- 使用b-carousel-slide组件实现图片轮播以及vue-awesome-swiper实现图片滑动展示

 

 以上就是常规图片的几种处理方式,有时候根据不同的需求,可以定义不同的界面效果来进行展示。