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},
}
