vue-swiper走马灯无限循环

删除回忆录丶 提交于 2020-02-24 21:17:04
<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>
标签
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!