uniapp轮播图组件
方法一:直接使用图片
<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000" :circular="true">
<swiper-item>
<image src="/static/swiper_img/swiper1.png"></image>
</swiper-item>
<swiper-item>
<image src="/static/swiper_img/swiper2.png"></image>
</swiper-item>
<swiper-item>
<image src="/static/swiper_img/swiper3.png"></image>
</swiper-item>
</swiper>
方法二:遍历数组中的图片
<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000" :circular="true">
<swiper-item v-for="(item ,i) in imgUrls" :key="i">
<image :src="item"></image>
</swiper-item>
</swiper>
data() {
return {
imgUrls: ['/static/swiper_img/swiper1.png', '/static/swiper_img/swiper2.png', '/static/swiper_img/swiper3.png']
}
},
方法三:调接口拿图片渲染
<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000" :circular="true">
<swiper-item v-for="(item, i) in swiperList" :key="i">
<image :src="item.image_src"></image>
</swiper-item>
</swiper>
data() {
return {
swiperList: []
};
},
onLoad() {
this.getSwiperList()
},
methods: {
async getSwiperList() {
const { data: res } = await uni.$http.get('/api/.../swiperdata')
if (res.meta.status !== 200) return uni.$showMsg()
this.swiperList = res.message
},
}