循序渐进BootstrapVue,开发公司门户网站(4)--- 使用b-carousel-slide组件实现图片轮播以及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
: 要放在幻灯片背景中的图像的URLcaption-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代码如下所示,定义了变量和所需的数据列表。
而轮播所需的carousel_list的集合数据,我们动态从接口获取即可。
而轮播列表的内容,我们可以模拟数据,或者从后端获取真实的数据,数据结构大概如下所示。
这样我们运行的时候 ,效果如下所示。
不同的轮播,我们指定不同的背景图片,以及文字,就很好的达到展示产品信息的目的。
一般轮播图片,我们是放在布局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的时候不显示的意思。
如需详细了解,可以参考https://code.z01.com/v4/utilities/display.html Display显示属性的说明。
2、使用vue-awesome-swiper实现图片滑动展示
前面开头的地方说了,有一些小的图片,如客户/合作伙伴Logo或者友情连接什么的,我们可能希望以图片的方式展示一个图片墙即可,如果内容比较多,那么占用版面比较大,而采用 vue-awesome-swiper 则可以避免这个问题,它是在展示图片的基础上,定时动态移动图片浏览,可以在更小的空间上放置更多的图片。
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,开发公司门户网站(5)--- 使用实际数据接口代替本地Mock数据
在我们开发一些门户网站功能的时候,有时候我们需要快速的创建数据模型来进行数据展示,因为数据结构可能处于不断的修正变化之中,因此服务端的接口我们可以暂时不开发,当我们基本完成数据结构和界面展示的时候,就 ...
- 循序渐进BootstrapVue,开发公司门户网站(3)--- 结合邮件发送,收集用户反馈信息
在我们公司门户网站里面,如果有需要,我们可以提供一个页面给用户反馈信息,以便获得宝贵的用户信息反馈或者一些产品咨询的记录,一般这个结合邮件发送到负责人的邮箱即可.本篇随笔结合后端发送邮件的操作,把相关 ...
- 循序渐进BootstrapVue,开发公司门户网站(1)---基于Bootstrap网站模板构建组件界面
在前面随笔<使用BootstrapVue相关组件,构建Vue项目界面>概括性的介绍了BootstrapVue的使用过程,其实选用这个主要就是希望能够用来构建一些公司门户网站的内容,毕竟基于 ...
- 循序渐进BootstrapVue,开发公司门户网站(2)--- 使用wow.js动画组件以及自定义的CSS样式处理动态效果
在我们开发的页面中,让页面有一些动画效果,可以让页面更加有吸引力,只要不是处理太过,一般人还是希望有一些动态效果,如滚动动画加载,悬停处理变化等效果,本篇随笔介绍使用wow.js动画组件以及自定义的C ...
- 循序渐进BootstrapVue,开发公司门户网站(6)--- 门户网站后端内容管理
我们在做门户网站的时候,如果网站的内容可以动态从后端进行管理,那么调整网站内容就非常方便,有时候如一些公司新闻.产品信息.轮播广告信息等都需要动态调整的,有一个方便的后端内容管理是非常方便的.本篇随笔 ...
- iOS开发UI篇—UIScrollView控件实现图片轮播
iOS开发UI篇—UIScrollView控件实现图片轮播 一.实现效果 实现图片的自动轮播 二.实现代码 storyboard中布局 代码: #import "YYV ...
- 【转】 iOS开发UI篇—UIScrollView控件实现图片轮播
原文:http://www.cnblogs.com/wendingding/p/3763527.html iOS开发UI篇—UIScrollView控件实现图片轮播 一.实现效果 实现图片的自动轮播 ...
- 基于Vue开发的门户网站展示和后台数据管理系统
基于Vue的前端框架有很多,这几年随着前端技术的官方应用,总有是学不完的前端知识在等着我们,一个人的精力也是有限,不可能一一掌握,不过我们学习很大程度都会靠兴趣驱动,或者目标导向,最终是可以以点破面, ...
- Jsoup开发网站客户端第二篇,图片轮播,ScrollView兼容ListView
最近一段日子忙的焦头烂额,代码重构,新项目编码,导致jsoup开发网站客户端也没时间继续下去,只能利用晚上时间去研究了.今天实现美食网首页图片轮播效果,网站效果图跟Android客户端实现如图: 从浏 ...
随机推荐
- If-Else 太多,如何优化!!!
完全不必要的 Else 块 public void consumer(int product) { if (product > 1) { // do something } else { // ...
- SpringBoot系列——事件发布与监听
前言 日常开发中,我们经常会碰到这样的业务场景:用户注册,注册成功后需要发送邮箱.短信提示用户,通常我们都是这样写: /** * 用户注册 */ @GetMapping("/userRegi ...
- docker运行mysql数据库
1.搜索镜像源是否有mysql镜像 执行语句: sudo docker search mysql 2.拉取需要版本的mysql,执行语句: docker pull mysql:5.7 3.查看安装 ...
- [c++] 常犯错误
更改变量值时想清楚对后面程序的影响 scnaf & == 数组下标从0开始 不赋初值导致的垃圾数据 全局flag和局部flag
- [刷题] PTA 03-树2 List Leaves
程序: 1 #include <stdio.h> 2 #include <queue> 3 #define MaxTree 20 4 #define Null -1 5 usi ...
- Linux ln命令:在文件之间建立链接(硬链接和软链接)详解版1
Linux ln命令:在文件之间建立链接(硬链接和软链接)详解版 < Linux创建文件及修改文件时间戳(touch命令)Linux复制文件和目录(cp命令) > <Linux就该这 ...
- 攻防世界(九)PHP2
攻防世界系列:PHP2 1.打开什么信息也没有. 尝试各种首页index.php index.html 加 [F12]没有结果,最后发现是index.phps .phps文件是什么? phps文件就 ...
- 使用Selenium从IEEE与谷歌学术批量爬取BibTex文献引用
搞科研的小伙伴总是会被期刊严苛的引用文献格式搞的很头疼.虽然常用的文献软件可以一键导出BibTex,但由于很多论文在投稿之前都会先发上Arxiv占坑,软件就很可能会把文献引出为来自Arxiv.我用的是 ...
- MyBatis-框架使用和分析
一.基础知识 MyBatis 是一款优秀的持久层框架,它支持自定义 SQL.存储过程以及高级映射.MyBatis 免除了几乎所有的 JDBC 代码以及设置参数和获取结果集的工作.MyBatis 可 ...
- 详细教程丨如何利用Rancher和Kong实现服务网格?
服务网格(Service mesh)是当前新兴的架构模式,越来越受到人们的青睐.与Kubernetes一起,服务网格可以形成一个强大的平台,它可以解决在微服务集群或服务基础设施上发现的高度分布式环境中 ...