本文主要是介绍【桂工微拍小程序】商品详情页设计与功能实现，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

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) } }) } `

这篇关于【桂工微拍小程序】商品详情页设计与功能实现的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！