Vue
缩略图控制循环（级联）
1.npm安装vue-awesome-swiper
npm install vue-awesome-swiper --save
2.全局挂载，在main.js中添加
import VueAwesomeSwiper from 'vue-awesome-swiper'
import 'swiper/dist/css/swiper.css'
Vue.use(VueAwesomeSwiper)
3.组件内复制修改代码
缩略图控制循环
4.修改样式和配置
direction: 'vertical',
封装全屏轮播图
<template>
<div class="banner-self">
<swiper :options="swiperOption" class="swiper-box" ref="mySwiper">
<swiper-slide class="swiper-item" v-for="item in bannerList" :key='item.id'>
<div class="banner" :style="{
backgroundImage: 'url(' + item.pcBannerImg + ')'
}">
</div>
</swiper-slide>
</swiper>
<!-- <div class="banner" :style="style"></div> -->
<div class="circle">
<p class="title_ch">{{titleCh}}</p>
<p class="title_bar"></p>
<p class="title_en">{{titleEn}}</p>
</div>
</div>
</template>
<script>
import api from "@/api/api"
export default {
name: 'bannerSelf',
data () {
return {
bannerList: [],
swiper: null,
swiperOption: {
direction: 'horizontal',
slidesPerView: 1,
spaceBetween: 0,
mousewheel: false,
autoHeight: false,
resistanceRatio: 0,
on: {
slideChangeTransitionEnd: function () {
// alert(this.activeIndex);//切换结束时，告诉我现在是第几个slide
},
},
}
}
},
props: {
imgUrl: {
type: String,
required: true,
},
titleCh: {
type: String,
default: '中文'
},
titleEn: {
type: String,
default: 'ENHLISH'
},
bannerType: {
type: Number,
default: 0,
// required: true,
},
},
methods: {
getBannerList() {
const params = {
bannerType: this.bannerType
}
api.home.banner(params).then(res => {
if (res.status == 200) {
this.bannerList = res.data
}
})
},
},
computed: {
style() {
return {
backgroundImage: 'url(' + this.imgUrl + ')'
}
},
// bannerList () {
// return [
// {
// pcBannerImg: this.imgUrl
// },
// {
// pcBannerImg: this.imgUrl
// },
// ]
// }
},
watch: {
bannerType: {
handler (newValue, oldValue) {
if (newValue) {
this.getBannerList()
}
},
immediate: true
}
}
}
</script>
<style lang="less" scoped>
.banner-self {
width: 100%;
height: 100%;
}
.swiper-box {
width: 100%;
height: 100%;
margin: 0 auto;
}
.banner {
width: 100%;
height: 100%;
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
}
.circle {
display: inline-block;
width: 6.8rem;
height: 6.8rem;
border-radius: 50%;
background: rgba(255, 255, 255, 0.2);
margin: 0 auto;
text-align: center;
position: absolute;
z-index: 1000;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
border: 3px solid hsla(0,0%,100%,.4);
.title_ch {
margin-top: 1.9rem;
font-size: 0.72rem;
color: #ffffff;
}
.title_en {
font-size: 0.4rem;
color: #ffffff;
}
.title_bar {
margin: 0.34rem auto;
width: 3.6rem;
height: 2px;
background-color: #fff;
opacity: 0.67;
}
}
</style>
轮播图和其他区域联动
思想：当悬浮文章标题时，显示对应的轮播图。使用鼠标悬浮事件，让轮播图滑动到对应的图片。
<template>
<div class="container clearfix">
<div class="main-left fl">
<swiper :options="swiperOption" class="swiper-box" ref="mySwiper">
<swiper-slide class="swiper-item" v-for="item in newsList" :key='item.id'>
<div class="banner" :style="{
backgroundImage: 'url(' + item.thumbnail + ')'
}">
</div>
</swiper-slide>
</swiper>
</div>
<div class="main-right fr">
<div class="main-content">
<h2 class="page-tilte">新闻资讯</h2>
<h3 class="page-subtilte">NEWS</h3>
<ul @mouseover="slideStop" @mouseout="slideStart">
<li class="item" v-for="(item, index) in newsList" :key="item.id">
<h3 class="article-title" :class="slideIndex === index?'article-title-active':''" @click="toDetail(item.id)" @mouseover="changeSlide(index)">{{item.articleTitle}}</h3>
<div class="bottom clearfix">
<span class="time fl">{{item.updateTime}}</span>
<a class="fr to-detail" @click="toDetail(item.id)">查看详情</a>
</div>
</li>
</ul>
<span class="more" @click="toList">更多></span>
</div>
</div>
</div>
</template>
<script>
import api from "@/api/api"
import allIcon from '@/utils/local-img'
export default {
data() {
return {
allIcon: allIcon,
newsList: [],
slideIndex: 0,
// swiper: null,
swiperOption: {}
}
},
created () {
this.initSlide()
this.getNewsList()
},
methods: {
// 获取列表
getNewsList () {
api.home.newsList().then(res => {
if (res.status == 200) {
res.data.list.forEach((item) => {
item.updateTime = this.$moment(item.updateTime).format('YYYY/MM/DD')
})
this.newsList = res.data.list
}
})
},
// 跳转新闻
toList () {
this.$router.push({
path: '/news',
})
},
toDetail (id) {
this.$router.push({
path: '/newsDetail',
query: {
id: id
}
})
},
/**
* @desc 轮播图-----------------------------------------
*/
// 初始化
initSlide () {
let that = this
that.swiperOption = {
autoplay: {
delay: 1500,
stopOnLastSlide: false,
disableOnInteraction: true,
},
direction: 'horizontal',
slidesPerView: 1,
spaceBetween: 0,
mousewheel: false,
autoHeight: false,
resistanceRatio: 0,
on: {
slideChangeTransitionEnd: function () {
// alert(this.activeIndex);//切换结束时，告诉我现在是第几个slide
that.slideIndex = this.activeIndex
},
},
}
},
// 改变轮播
changeSlide (index) {
this.swiper.slideTo(index, 1000, false)
},
// 自动轮播暂停
slideStop () {
this.swiper.autoplay.stop();
},
// 自动轮播开启
slideStart () {
this.swiper.autoplay.start();
},
},
computed: {
swiper () {
return this.$refs.mySwiper.swiper
},
style() {
return {
backgroundImage: 'url(' + allIcon.home.news + ')'
}
}
}
}
</script>
<style lang="less" scoped>
// 左右布局
.main-left {
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
}
.container {
height: 100%;
overflow: hidden;
}
.main-left {
width: 50%;
height: 100%;
overflow: hidden;
img {
width: 100%;
height: 100%;
}
}
.main-right {
width: 50%;
display: flex;
// align-items: center;
// justify-content: center;
}
// 主体内容
.main-content {
position: relative;
width: 100%;
// height: 5rem;
padding: 1.4rem 2rem 0 1.4rem;
// padding-top: 1.5rem;
}
.page-tilte {
font-size: 0.34rem;
color: #333;
// font-weight: bold;
}
.page-subtilte {
font-size: 0.2rem;
color: #c4c4c4;
margin-bottom: 0.4rem;
}
// 列表项
.item {
margin-bottom: 0.3rem;
}
.article-title {
cursor: pointer;
font-size: 0.2rem;
color: #686868;
line-height: 0.3rem;
// margin-bottom: 5px;
text-align: justify;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
&:hover {
color: #FF7D41;
}
}
.article-title-active {
color: #FF7D41;
}
.bottom {
font-size: 0.14rem;
color: #b3b3b3;
line-height: 0.3rem;
}
// .time {
// font-size:12px;
// }
.to-detail {
color: #FF7D41;
}
// 更多
.more {
cursor: pointer;
position: absolute;
font-size: 0.18rem;
color: #FF7D41;
top: 1.2rem;
right: 2rem;
}
.swiper-box {
width: 100%;
height: 100%;
margin: 0 auto;
}
.banner {
width: 100%;
height: 100%;
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
}
</style>
更改swiper上下切换按钮样式
outline: none;为去除点击时的边线效果
<div class="partner-institutions">
<swiper ref="mySwiper" :options="swiperOptionsPartner" class="swiper-box">
<swiper-slide v-for="(item,index) in partnerList" :key="index">
<div class="banner-slide">
<img :src="item" alt="">
</div>
</swiper-slide>
</swiper>
<div class="swiper-button-prev prev1"></div>
<div class="swiper-button-next next1"></div>
</div>
.partner-institutions
margin-top 99px
margin-bottom 99px
position relative
>>> .swiper-button-prev:after, .swiper-button-next:after {
font-size 20px
}
.swiper-box
width 900px
.banner-slide
width 100px
height 120px
display flex
justify-content center
align-items center
img
width 100%
.prev1 {
width: 40px;
height: 40px;
border-radius: 50%;
box-sizing border-box
background-color: rgba(1,1,1,0.5);
color: #fff;
cursor: pointer;
z-index: 90;
border 0
outline: none;
&:hover {
background-color: rgba(6,126,242,1);
}
}
.next1 {
width: 40px;
height: 40px;
border-radius: 50%;
background-color: rgba(1,1,1,0.5);
color: #fff;
cursor: pointer;
z-index: 90;
outline: none;
&:hover {
background-color: rgba(6,126,242,1);
}
}
swiperOptionsPartner: {
slidesPerView: 6,
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
loop : true,
autoplay: {
delay: 2000,
disableOnInteraction: false,
},
},
