<template>
<view class="content">
<view class='home'>
<swiper
indicator-dots
circular
autoplay
interval=3000
>
<swiper-item v-for="(item,index) in swipers" :key="index">
<image :src="item"></image>
</swiper-item>
</swiper>
</view>
</view>
</template>
<script>
export default {
data() {
return {
swipers:[]
}
},
onLoad() {
//模拟ajax获取数据,uni.request({...});注意回调的this指向
this.swipers=['https://app-file.beitaichufang.com/img/H5/web/banner/banner20.jpg',
"https://app-file.beitaichufang.com/img/H5/web/banner/banner21.jpg",
"https://app-file.beitaichufang.com/img/H5/web/banner/banner22.jpg",
"https://app-file.beitaichufang.com/img/H5/web/banner/banner23.jpg"
];
}
}
</script>
<style lang="scss">
.home{
swiper{
width: 750rpx;
}
image{
width: 100%;
height: 100%;
}
}
</style>
uniapp 轮播示例
最新推荐文章于 2023-07-28 19:27:10 发布