webpack+vue实现图片与标题的轮播

在网站首页实现图片连带标题一起轮流播放,可以使得网站更具动感,活泼,从而提升用户的使用体验,本文用在webpack构建的场景下,用vue来实现这个常用的功能。

原理:将要轮播的5个文章通过ajax请求,赋值给数组变量articles:[],每个文章对应一个文章实体类,这个实体类包括标题,链接,图标等等字段。也即是articles数组中存着5个实体的json对象。参数currentIndex: 0,记录当前轮播到哪个,只要通过javascript的原生方法setInterval不断改变这个值就实现了轮播,底层的样式切换由vue自己来实现。

1. 模板
<template>
<div id="article" style="">
<div class="article-bd">
<div class="article-item-img" v-if="articles.length"><a :href="'/article/'+articles[currentIndex].id"><img :src="articles[currentIndex].icon" style="width:270px;height:165px;" /></a></div>
<div class="article-item" v-for="(article, index) in articles"><a :href="'/article/'+article.id" :class="{active: (currentIndex == index)}">{{article.title}}</a></div>
</div>
</div>
</template>

2. 脚本
<script>
import httper from '../util/httper'

export default {
data: function () {
return {
articles: [],
currentIndex: 0
}
},
created: function () {
var self = this;
self.load();
},
mounted: function () {
var self = this;
self.timer = setInterval(function () {
self.currentIndex = self.currentIndex < 4 ? (self.currentIndex + 1) : 0;
}, 5000);
},
methods: {
load: function () {
var self = this;
httper.get('/article/topper').then(function (response) {
self.articles = response.data;
}).catch(function (error) {
console.log(error);
});
}
},
beforeDestroy: function () {
if (this.timer) {
clearInterval(this.timer);
}
}
}
</script>

3. 样例
看本网站的首页左边的模块,https://www.hrefs.cn/
5秒后=》

总结:通过vue实现轮播的动态效果非常的简洁,优雅。代码中涉及的httper组件是一个封装的ajax请求,这个代码很容易实现,代码就不用给出了,免得增加阅读量,干扰核心功能的展示。至于如何搭建一个wenpack+vue,请参考:https://github.com/iissy/webpack
Posted by 何敏
on 2018/10/02 07:31:07
Copyright ©2018 程序员网址导航 粤ICP备14091834号