轮播图
基于小程序swiper实现轮播图布局
<swiper :indicator-dots='indicatorDots'>
<swiper-item :key='index' v-for='(item, index) in imgUrls'>
<image :src="item" class="slide-image"/>
</swiper-item>
</swiper>
data
: {
imgUrls
: [
'https://images.unsplash.com/photo-1551334787-21e6bd3ab135?w=640',
'https://images.unsplash.com/photo-1551214012-84f95e060dee?w=640',
'https://images.unsplash.com/photo-1551446591-142875a901a1?w=640'
],
indicatorDots
: false,
autoplay
: false
}
对接后台接口轮播图数据：接口地址参见【接口文档】
mpvue
.request({
url
: 'https://www.zhengzhicheng.cn/api/public/v1/home/swiperdata',
success
: function (res
) {
let {message
} = res
.data
let imgs
= message
.map(item
=> {
return item
.image_src
;
});
that
.imgUrls
= imgs
}
})
在home/index.vue中,
基本布局
结构
样式
效果
对接数据
结构
<swiper indicator-dots='true' autoPlay='true'>
<swiper-item :key='item.goods_id' v-for='item in swiper'>
<img :src="item.image_src">
</swiper-item>
</swiper>
数据
export default {
data () {
return {
swiper
: [],
}
},
methods
: {
swiperData () {
wx
.request({
url
: 'https://www.zhengzhicheng.cn/api/public/v1/home/swiperdata',
success
: (res
) => {
if (res
.data
.meta
.status
=== 200) {
this.swiper
= res
.data
.message
}
}
})
}
},
created () {
this.swiperData ()
},
}
打印轮播图数据
