本节:手机端动态轮播图
1.div
2.script定义变量
3.style 样式的定义
完整代码:
<template>
<!-- 轮播图 -->
<view>
<view class="page-section swiper">
<view>
<swiper :indicator-dots="indicatorDots" :indicator-color="indicatorColor" :indicator-active-color="indicatorActiveColor" :autoplay="autoplay" :interval="interval" :duration="duration">
<swiper-item>
<view>
<image src="/static/banner_01.jpg" mode=""></image>
</view>
</swiper-item>
<swiper-item>
<view>
<image src="/static/banner_02.jpg" mode=""></image>
</view>
</swiper-item>
<swiper-item>
<view>
<image src="/static/banner_02.jpg" mode=""></image>
</view>
</swiper-item>
</swiper>
</view>
</view>
</view>
<!-- 轮播图 -->
</template>
<script>
export default {
data() {
return {
indicatorDots: true,
autoplay: true,
interval: 3000,
duration: 500,
indicatorColor:"#292b40",
indicatorActiveColor: "#ffffff"
}
},
onLoad() {
},
methods: {
}
}
</script>
<style>
.banner{ width: 750rpx; height: 422rpx; background-color: #0f0f27;}
.banner .swiper{width: 750rpx; height: 422rpx !important;}
.banner .swiper-item{ width: 750rpx; height: 422rpx !important;}
.banner .swiper-item image{ display: block; width: 750rpx; height:422rpx !important;}
</style>