我发现了一个使用vanilla 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>在Vue中处理此问题的方式与在jQuery中处理此情况的方式有根本不同。
粗略地说，Vue将是声明性的，jQuery将是强制性的。"在Vue中思考"会让你将这个旋转木马分解为多个组件——这意味着，你可能有一个CarouselContainer组件，它可以让你指定高度/宽度/其他什么。。然后，您可能有一个CarouselSlide组件，它位于容器中，并保存实际图像。。它看起来像这样：
// Carousel.vue
...
<CarouselContainer /* props, etc.. */>
<CarouselSlide /* ... */>
<!-- maybe some children -->
</CarouselSlide>
</CarouselContainer>
...
这篇文章是一个很好的例子，说明如何在Vue中构建和构造类似旋转木马的东西。您也可以在此处查看回购。。
现在，为了详细说明您提供的代码，您可以在Vue中做一些基本的事情：(这只是为了让大家了解一下(CodePen镜像可以在这里找到
/*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
}
]
}
}
})<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 v-if="currentIndex === index" 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}}<br/>
{{currentIndex + 1}} / {{images.length}}
</div>
</div>
</div>
<!-- Controls -->
<a @click="browse('backward')" 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 @click="browse('forward')" 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>