<template>
<div class="line_one" :style="barrageIsShow?'opacity:1':'opacity:0'" v-if="barrageList">
<div class="swiper-container swiper-container1 swiper-no-swiping">
<div class="swiper-wrapper">
<div
class="swiper-slide"
style="width:80%;"
v-for="(item,index) in barrageList"
:key="index"
>
<div class="item">
<div class="item_box">
<div class="item_main">
<img :src="item.image" alt />
<dl>
<dt>{{item.nickname}}</dt>
<dd>{{item.content}}</dd>
</dl>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import Swiper from "swiper";
import "swiper/dist/css/swiper.min.css";
export default {
data() {
return {
barrageList1: [],
barrageIsShow: true
}
},
mounted(){
this. getList()
},
methods: {
getList(){
this.swiper_init(".swiper-container1");
},
swiper_init(obj) {
var that = this;
that.$nextTick(function() {
var mySwiper = new Swiper(obj, {
loop: true,
speed: 8000, //匀速时间
autoplay: {
delay: 10,
stopOnLastSlide: false,
disableOnInteraction: false
}
});
});
}
}
}
</script>
<style>
.line_one {
height: 44%;
width: 100%;
position: relative;
&:first-child {
margin-top: 0.18rem;
margin-bottom: 0.12rem;
}
}
.item {
width: 136%;
border-radius: 0.48rem;
font-size: 0.3rem;
display: inline-block;
margin-right: 0.3rem;
padding: 0.1rem 0.3rem 0.1rem 0.2rem;
.item_box {
display: inline-block;
border-radius: 0.48rem;
background: rgba(255, 255, 255, 0.5);
padding: 0.1rem 0.3rem 0.1rem 0.1rem;
}
.item_main {
display: flex;
img {
width: 0.8rem;
height: 0.8rem;
border-radius: 50%;
margin-right: 0.1rem;
}
dl {
flex: 1;
dt {
color: #666;
}
dd {
font-size: 0.28rem;
color: #1d7f38;
}
}
}
}
</style>
来源:CSDN
作者:~国王
链接:https://blog.csdn.net/hi_JXL/article/details/104479324