小程序头部轮播

<swiper indicator-dots="true"

circular="true"

autoplay="true"

interval="5000"

duration="500"

class="index_banner" indicator-active-color="#46b812"

indicator-color="#fff">

<block wx:for="{{bannerArray}}" wx:key="bannerArray">

<swiper-item>

<view class="banner_url" data-type="{{item.serviceType}}" >

<image src="{{img+item.imgs}}" class="slide-image" />

</view>

</swiper-item>

</block>

</swiper>

page{

background-color: #fff;

}

.index_banner{

width: 100%;

height: 316rpx;

margin: 0rpx auto;

overflow: hidden;

}

.banner_url{

width: 100%;

height: 316rpx;

overflow: hidden;

}

.index_banner image{

width: 100%;

height: 100%;

}

getBannerList: function () {

var _this = this;

wx.request({

url: 'https://www.dadushi.vip/index.php?s=/Api/Banner/index',

header: {

'content-type': 'application/x-www-form-urlencoded',

},

data: {},

method: 'GET',

success: function (res) {

console.log("首页滚播图")

console.log(res.data.data)

_this.setData({

bannerArray: res.data.data,

})

},

})

},

猜你喜欢

转载自blog.csdn.net/weixin_42388503/article/details/81110918