Vue-Vant实现轮播图
参考文档:VantBanner.vue仿接口<template><!-- 首页的轮播图 --><div class="home-banner-box"><van-swipe class="my-swipe" :autoplay="3000" indicator-color="white"><van-swipe-item v-for="item
·
参考文档:Vant
Banner.vue
仿接口
<template>
<!-- 首页的轮播图 -->
<div class="home-banner-box">
<van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
<van-swipe-item v-for="item in bannerList"
:key="item.id">
<img :src="item.img" alt="">
</van-swipe-item>
</van-swipe>
</div>
</template>
<script>
export default {
data () {
return {
bannerList: []
}
},
methods: {
},
created () {
this.bannerList = [
{ id: 1, img: '/static/home/banner/banner1.jpg' },
{ id: 2, img: '/static/home/banner/banner2.jpg' },
{ id: 3, img: '/static/home/banner/banner3.jpg' }
]
}
}
</script>
<style>
</style>
参数表
Home.vue
<template>
<div class="page-home">
<h1>旅游网</h1>
<!-- banner图 -->
<Banner/>
</div>
</template>
<script>
// @ is an alias to /src
import Banner from '@/components/home/Banner'
export default {
name: 'Home',
components: {
// banner图
Banner
}
}
</script>
<style lang="less" scoped>
.page-home{
}
</style>
效果
更多推荐
已为社区贡献3条内容
所有评论(0)