微信小程序之首页轮播图

 wxml如下：

采用滑块视图容器(swiper)

<view >
      <!--轮播图-->
      <swiper class="head" indicator-dots='true' autoplay='true' interval='4000' >
        <view wx:for='{{imgs}}' wx:key='imgs' wx:for-item="imgs">
          <swiper-item>
            <image src='{{imghref}}{{imgs.imgurl}}' class="headimg"></image>
          </swiper-item>
        </view>
      </swiper>
  </view>

js如下：

    wx.request({
      url: 'http://localhost:8082/zoo/queryImgByZoo',
      data: {
        zooname: zooname
      },
      header: {
        'content-type': 'application/json'
      },
      success: res => {
        console.log(res.data)
        this.setData({
          imgs: res.data
        })
      }
    })

 

wxss如下：

.head{
  width: 100%;
  height: 400rpx;
}
.headimg{
  width: 100%;
}