1、商品轮播图

1-1、整体流程

1、swiper组件用来放置swiper-item组件
2、swiper-item组件用来放置图片
3、image组件显示轮播图图片
4、wx:for列表循环，设置每一个图片
5、云数据库请求数据完成动态响应

1-2、根据微信开发官方文档来设计商品轮播图

1、从官方文档的组件了找到试图容器里面的swiper组件

2、wxml代码：
`

`
3、样式代码
`
.container{
bottom: 0;
top:0;
left: 0;
right: 0;
position: fixed;
width: 100%;
height: 100%;
background-color: rgb(226, 233, 236);
}
.main{
width: 100%;
height: 93%;
top: 0;
position: absolute;
flex: 1;
border: aqua solid 1px;
}
swiper {
height: 420rpx;
}
swiper-item{
width: 100%;
height: 100%;
}
swiper-item image{
width: 100%;
height: 100%;
}
`
## 1-3、从云数据库获取商品数据（图片）
1、goods.js代码
`
onLoad(options) {
console.log(‘商品id:’,options.goodsid)
let goodsId = options.goodsid
wx.cloud.database().collection(‘goods’).doc(goodsId).get({
success: (res) => {
this.setData({
goodsInfo: res.data
})
console.log(‘商品详细：’,this.data.goodsInfo)
}
})
}
`