vue-swiper走马灯无限循环

<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>
  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值