Question

我发现有一个使用原始javascript和html创建的轮播。我尝试将其转换为Vue，但是遇到了一些问题。它应该从SharePoint列表中动态提取。在下面的代码和笔中，我使用一组对象来模拟SharePoint列表。而不是旋转，所有图像都垂直地彼此列出。

new Vue({
  el: '#carouselApp',
  data: function() {
    return {
      images: [{
          src: 'https://images.unsplash.com/photo-1533048324814-79b0a31982f1?ixlib=rb-1.2.1&dpr=1&auto=format&fit=crop&w=416&h=312&q=60',
          text: 'Tech trends',
          num: 0
        },
        {
          src: 'https://thumbs.dreamstime.com/b/rainbow-butterfly-colorful-wings-colored-all-colors-vibgyor-very-attractive-placed-black-white-30774133.jpg',
          text: 'Tech Spot',
          num: 1
        },
        {
          src: 'https://image.shutterstock.com/image-photo/color-butterfly-isolated-on-white-260nw-570560110.jpg',
          text: 'Tech Idea',
          num: 2

        },
        {
          src: 'http://static.nautil.us/16630_c2e2a6521fbf5aab3693d9dd7ca9cb1e.jpg',
          text: 'Yellowy Orange',
          num: 3

        },
        {
          src: 'https://static.independent.co.uk/s3fs-public/thumbnails/image/2020/01/07/13/monarch-butterfly.jpg?width=1368&height=912&fit=bounds&format=pjpg&auto=webp&quality=70',
          text: 'Tech chip',
          num: 4
        }
      ]
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.11/vue.min.js"></script>

<!DOCTYPE html>
<html lang="en" xmlns:mso="urn:schemas-microsoft-com:office:office" xmlns:msdt="uuid:C2F41010-65B3-11d1-A29F-00AA00C14882">

<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
  <script type="text/javascript" src="/SiteAssets/_script/vue.js"></script>
  <style>
    .glyphicon {
      color: #ffffff
    }
  </style>

</head>

<body>
  <!-- https://www.w3schools.com/bootstrap/bootstrap_carousel.asp -->
  <div id="carouselApp" class="container">
    <div class="row">
      <div id="carousel-example-generic" class="carousel slide" data-ride="carousel" style="width:501px;margin-top:5px">
        <!-- Indicators -->
        <ol class="carousel-indicators" v-for="(img, index) in images.length">
          <li data-target="#carousel-example-generic" :data-slide-to="index" class="active"></li>
        </ol>

        <!-- Wrapper for slides -->
        <div class="carousel-inner" role="listbox" v-for="(item, index) in images">
          <div class="item active">
            <a href="/News/Pages/Default.aspx"><img v-bind:src="item.src" alt="..." style=" width:100%;height:303px"></a>
            <div class="carousel-caption">
              {{item.text}}
            </div>
          </div>
        </div>

        <!-- Controls -->
        <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
          <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
          <span class="sr-only">Previous</span>
        </a>
        <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
          <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
          <span class="sr-only">Next</span>
        </a>
      </div>
    </div>

  </div>

</body>

</html>

Answer 1

在Vue中处理此问题的方式与在jQuery中处理此问题的方式根本不同。

松散地说，Vue是声明性的，而jQuery是必不可少的。 “在Vue中思考”可以让您将轮播细分为多个组件-意味着，您可能有一个CarouselContainer组件，可让您指定高度/宽度/什么都没有。放在容器中并保存实际图像。.看起来像这样：

CarouselSlide

This article是一个很好的示例，说明了如何在Vue中构建和构造诸如旋转木马之类的东西。您也可以view the repo here。.

现在，要详细说明您提供的代码，您可以在Vue中做类似以下的基本操作：（这只是为了传达想法）CodePen mirror can be found here

// Carousel.vue
...
<CarouselContainer /* props, etc.. */>
  <CarouselSlide /* ... */>
    <!-- maybe some children -->
  </CarouselSlide>
</CarouselContainer>
...

/*Refactored carousel from this site: https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_slideshow_autohttps://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_slideshow_auto*/
/*Would prefer the images to come from a list. Will work on that later*/
new Vue({
  el: '#carouselApp',
  methods: {
    browse(direction) {
      if (direction === 'forward') {
        if (this.currentIndex + 1 === this.images.length) {
          this.currentIndex = 0;
        } else {
          this.currentIndex++;
        }
      }
      if (direction === 'backward') {
        if (this.currentIndex === 0) {
          this.currentIndex = this.images.length - 1;
        } else {
          this.currentIndex--;
        }
      }
    }
  },
  data: function() {
    return {
      currentIndex: 0,
      images: [{
          src: 'https://images.unsplash.com/photo-1533048324814-79b0a31982f1?ixlib=rb-1.2.1&dpr=1&auto=format&fit=crop&w=416&h=312&q=60',
          text: 'Tech trends',
          num: 0
        },
        {
          src: 'https://thumbs.dreamstime.com/b/rainbow-butterfly-colorful-wings-colored-all-colors-vibgyor-very-attractive-placed-black-white-30774133.jpg',
          text: 'Tech Spot',
          num: 1
        },
        {
          src: 'https://image.shutterstock.com/image-photo/color-butterfly-isolated-on-white-260nw-570560110.jpg',
          text: 'Tech Idea',
          num: 2

        },
        {
          src: 'http://static.nautil.us/16630_c2e2a6521fbf5aab3693d9dd7ca9cb1e.jpg',
          text: 'Yellowy Orange',
          num: 3

        },
        {
          src: 'https://static.independent.co.uk/s3fs-public/thumbnails/image/2020/01/07/13/monarch-butterfly.jpg?width=1368&height=912&fit=bounds&format=pjpg&auto=webp&quality=70',
          text: 'Tech chip',
          num: 4
        }
      ]
    }
  }
})

使用vue创建的旋转木马不会旋转

1 个答案: