小程序轮播图遍历图片的方法

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